/**
 * The cart drawer.
 *
 * Every number here is measured off the live panel at a 1280 viewport: the
 * 420px width, the 20px gutter, the 75x100 cover, the 96px quantity pill and
 * the 17px/600 headings.
 */

.gp-cart-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	inline-size: 420px;
	max-inline-size: 100vw;
	background: var(--wp--preset--color--surface-alt, #fdfdfd);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), -8px 0 40px rgba(0, 0, 0, 0.12);
	transform: translateX(100%);
	transition: transform 300ms ease;
}

.gp-cart-drawer.is-open {
	transform: translateX(0);
}

.gp-cart-drawer__overlay {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: #000;
	opacity: 0;
	transition: opacity 300ms ease;
}

.gp-cart-drawer__overlay.is-open {
	opacity: 0.5;
}

/* The page behind the panel must not scroll under it. */
.gp-cart-drawer-open,
.gp-cart-drawer-open body {
	overflow: hidden;
}

/* ---------- head ---------- */

.gp-cart-drawer__top {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 20px 20px 0;
}

.gp-cart-drawer__heading {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--ink, #040404);
}

/* The live panel picks out its basket and its grand total in this indigo; it
   is the only place on the site that uses it, so it is not a palette colour. */
.gp-cart-drawer__icon {
	inline-size: 22px;
	block-size: 22px;
	color: #5e77f1;
}

.gp-cart-drawer__pill {
	padding: 5px 9px;
	border-radius: 999px;
	background: rgba(6, 78, 59, 0.1);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--brand-green, #064e3b);
	white-space: nowrap;
}

.gp-cart-drawer__close {
	position: absolute;
	inset-block-start: 20px;
	inset-inline-end: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 20px;
	block-size: 20px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink, #040404);
	cursor: pointer;
	transition: opacity 300ms ease;
}

.gp-cart-drawer__close:hover {
	opacity: 0.6;
}

.gp-cart-drawer__close svg {
	inline-size: 20px;
	block-size: 20px;
}

/* ---------- items ---------- */

.gp-cart-drawer__items {
	flex: 1 1 auto;
	padding: 16px 20px 20px;
	overflow-y: auto;
	overscroll-behavior-y: contain;
}

.gp-cart-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.gp-cart-item + .gp-cart-item {
	margin-block-start: 20px;
	padding-block-start: 20px;
	border-block-start: 1px solid rgba(0, 0, 0, 0.08);
}

.gp-cart-item__media {
	flex: none;
	inline-size: 75px;
	block-size: 100px;
	border-radius: 6px;
	overflow: clip;
}

.gp-cart-item__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.gp-cart-item__info {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.gp-cart-item__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink, #040404);
	text-decoration: none;
}

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

.gp-cart-item__vendor {
	margin: 3px 0 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.6);
}

.gp-cart-item__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-block-start: 10px;
}

.gp-cart-item__qty {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex: 0 0 96px;
	block-size: 30px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	overflow: hidden;
}

.gp-cart-item__qty-button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 28px;
	block-size: 28px;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	color: var(--wp--preset--color--ink, #040404);
	cursor: pointer;
}

.gp-cart-item__qty-button:hover {
	color: var(--wp--preset--color--brand-green, #064e3b);
}

/* The live buttons carry a 9px glyph, not a typed character: a text minus and
   plus sit on different baselines and at different optical weights. */
.gp-cart-item__qty-icon {
	inline-size: 9px;
	block-size: 9px;
	background: currentColor;
}

.gp-cart-item__qty-button[data-gp-cart-step="-1"] .gp-cart-item__qty-icon {
	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-item__qty-button[data-gp-cart-step="1"] .gp-cart-item__qty-icon {
	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-item__qty-input {
	/* Border box, or the 6px of side padding is added to the 38px and the
	   three children total 106px inside a 94px pill — the plus was clipped. */
	box-sizing: border-box;
	inline-size: 38px;
	block-size: 28px;
	padding: 0 6px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 14px;
	text-align: center;
	color: var(--wp--preset--color--ink, #040404);
	appearance: textfield;
}

.gp-cart-item__qty-input::-webkit-outer-spin-button,
.gp-cart-item__qty-input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.gp-cart-item__price-group {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex: 0 0 auto;
}

.gp-cart-item__prices {
	display: flex;
	align-items: baseline;
	gap: 5px;
}

.gp-cart-item__price {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--ink, #040404);
	white-space: nowrap;
}

.gp-cart-item__price-was {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.5);
	white-space: nowrap;
}

.gp-cart-item__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 30px;
	block-size: 30px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	color: rgba(0, 0, 0, 0.55);
	cursor: pointer;
}

.gp-cart-item__remove:hover {
	background: rgba(0, 0, 0, 0.05);
	color: var(--wp--preset--color--sale-red, #e7000b);
}

.gp-cart-item__remove svg {
	inline-size: 17px;
	block-size: 17px;
}

/* ---------- empty ---------- */

.gp-cart-drawer__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding-block: 60px;
	text-align: center;
}

.gp-cart-drawer__empty-text {
	margin: 0;
	font-size: 15px;
	color: rgba(0, 0, 0, 0.6);
}

/* ---------- foot ---------- */

.gp-cart-drawer__foot {
	flex: none;
	margin-block-start: 10px;
	padding: 20px;
	border-block-start: 1px solid rgba(0, 0, 0, 0.08);
}

.gp-cart-drawer__discount {
	display: flex;
	gap: 8px;
	margin-block-end: 16px;
}

.gp-cart-drawer__discount-input {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-inline-size: 0;
	block-size: 40px;
	padding: 0 14px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	background: rgba(239, 244, 242, 0.31);
	font-family: inherit;
	font-size: 14px;
	color: var(--wp--preset--color--ink, #040404);
}

/* Two classes so this outranks .gp-cart-drawer__button whichever order they
   end up in: that rule sets only padding-inline, which would leave the user
   agent button padding standing on the block axis. */
.gp-cart-drawer__button.gp-cart-drawer__apply {
	flex: none;
	block-size: 40px;
	padding: 0 18px;
	font-size: 14px;
}

.gp-cart-drawer__message {
	margin: 0 0 12px;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.6);
}

.gp-cart-drawer__message.is-error {
	color: var(--wp--preset--color--sale-red, #e7000b);
}

.gp-cart-drawer__coupons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.gp-cart-drawer__coupon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(6, 78, 59, 0.1);
	font-size: 12px;
	font-weight: 600;
	color: var(--wp--preset--color--brand-green, #064e3b);
}

.gp-cart-drawer__coupon-remove {
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	line-height: 1;
	color: inherit;
	cursor: pointer;
}

.gp-cart-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 10px;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.8);
}

.gp-cart-drawer__note {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.6);
}

.gp-cart-drawer__row--total {
	margin-block: 12px 10px;
	padding-block-start: 12px;
	border-block-start: 1px solid rgba(0, 0, 0, 0.12);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--wp--preset--color--ink, #040404);
}

.gp-cart-drawer__total-value {
	color: #5e77f1;
}

.gp-cart-drawer__cta {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gp-cart-drawer__button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	block-size: 40px;
	padding-inline: 15px;
	border: 2px solid var(--wp--preset--color--brand-green, #064e3b);
	border-radius: 8px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.gp-cart-drawer__button--secondary {
	background: var(--wp--preset--color--surface, #fff);
	/* The live panel prints this label in its darkest green, which is not the
	   near-black the palette calls surface-dark. */
	color: #002c22;
}

.gp-cart-drawer__button--secondary:hover {
	background: var(--wp--preset--color--brand-green, #064e3b);
	color: #fff;
}

.gp-cart-drawer__button--primary {
	background: var(--wp--preset--color--brand-green, #064e3b);
	color: #fff;
}

.gp-cart-drawer__button--primary:hover {
	background: var(--wp--preset--color--highlight-green, #0c6b3d);
	border-color: var(--wp--preset--color--highlight-green, #0c6b3d);
}

.gp-cart-drawer__button-arrow {
	flex: none;
	inline-size: 14px;
	block-size: 10px;
	background: currentColor;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 10" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 5h11"/><path d="M8.5 1.5L12.5 5 8.5 8.5"/></svg>') center / contain no-repeat;
}

.gp-cart-drawer[aria-busy="true"] .gp-cart-drawer__items,
.gp-cart-drawer[aria-busy="true"] .gp-cart-drawer__foot {
	opacity: 0.6;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.gp-cart-drawer,
	.gp-cart-drawer__overlay {
		transition: none;
	}
}

/* The panel takes focus when it opens so the keyboard lands inside it; it is
   the container, not a control, so it draws no ring of its own. */
.gp-cart-drawer:focus {
	outline: none;
}

/* The admin bar is fixed over the top of the viewport for a logged-in user,
   and the panel is fixed too — without this its heading sits underneath. The
   bar is 32px, 46px on narrow screens, and stops being fixed below 600px. */
body.admin-bar .gp-cart-drawer {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .gp-cart-drawer {
		inset-block-start: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar .gp-cart-drawer {
		inset-block-start: 0;
	}
}