/**
 * Cart — front-end widget + drawer styles.
 *
 * File Name:      cart.css
 * Version:        1.8.0
 * Last Modified:  2026-09-07
 * Package:        Pixels and Paint Extensions
 *
 * Scoped entirely under .pixelsandpaint- prefixed classes; design tokens are scoped to those
 * roots rather than the document :root, so nothing here leaks into or collides with the
 * host theme's own custom properties.
 */

/* Order Subtotal (GF form 6, field 21) is a real type=number field — not GF's own "hidden"
   field type, deliberately: GF's Calculation-formula engine treats hidden-type fields as
   invisible and always resolves them to 0 (confirmed live, 2026-09-08 — see ROADMAP.md).
   Hidden from the customer via CSS instead, including the native number-input spin buttons. */
.gfield.pixelsandpaint-hidden-field {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pixelsandpaint-cart-widget {
	--pixelsandpaint-cart-gap: 0.5rem;
	--pixelsandpaint-cart-radius: 0.25rem;
	--pixelsandpaint-cart-border: #ccc;
	--pixelsandpaint-cart-accent: #282b2d;

	margin-block-start: var(--pixelsandpaint-cart-gap);
	padding: clamp(0.75rem, 2vw, 1.25rem);
	border: 1px solid var(--pixelsandpaint-cart-border);
	border-radius: var(--pixelsandpaint-cart-radius);
}

.pixelsandpaint-cart-widget__item-id {
	margin-block-end: var(--pixelsandpaint-cart-gap);
	font-size: 0.8rem;
	color: #8c8c8c;
}

.pixelsandpaint-cart-widget__line {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--pixelsandpaint-cart-gap);
	margin-block-end: var(--pixelsandpaint-cart-gap);
}

.pixelsandpaint-cart-widget__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.85rem;
}

.pixelsandpaint-cart-widget__field--quantity {
	inline-size: 4.5rem;
}

.pixelsandpaint-cart-widget__field select,
.pixelsandpaint-cart-widget__field input {
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--pixelsandpaint-cart-border);
	border-radius: var(--pixelsandpaint-cart-radius);
}

.pixelsandpaint-cart-widget__add {
	padding-block: 0.5rem;
	padding-inline: 0.9rem;
	border: 1px solid var(--pixelsandpaint-cart-accent);
	border-radius: var(--pixelsandpaint-cart-radius);
	background: var(--pixelsandpaint-cart-accent);
	color: #fff;
	cursor: pointer;

	&:focus-visible {
		outline: 2px solid var(--pixelsandpaint-cart-accent);
		outline-offset: 2px;
	}

	&:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}
}

/* Disabled options (unsupported Format/Size combos) still show, per client's explicit ask —
   they're grayed out rather than removed, so the customer can see what doesn't pair together. */
.pixelsandpaint-cart-widget__field select option:disabled {
	color: #b0b0b0;
}

/* Trigger + drawer are fixed-position, injected via wp_footer — no theme-file edits.
   z-index confirmed live (2026-09-08, Chrome DevTools) against the theme's own stacking:
   #masthead (fixed header) is 9999, #wpadminbar (logged-in admin bar) is 99999 — both were
   sitting above the drawer at its old 9000/9001, hiding it behind the header. Cleared both. */

.pixelsandpaint-cart-trigger {
	position: fixed;
	inset-block-end: 1.5rem;
	inset-inline-end: 1.5rem;
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.75rem 1rem;
	border: none;
	border-radius: 999px;
	background: #282b2d;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 25%);

	&:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}
}

.pixelsandpaint-cart-trigger__count {
	min-inline-size: 1.25rem;
	padding-inline: 0.35rem;
	border-radius: 999px;
	background: #b69853;
	color: #fff;
	font-size: 0.75rem;
	text-align: center;
}

.pixelsandpaint-cart-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	inline-size: min(24rem, 100vw);
	background: #fff;
	box-shadow: -0.25rem 0 1rem rgb(0 0 0 / 20%);
	overflow-y: auto;
}

.pixelsandpaint-cart-drawer[hidden] {
	display: none;
}

.pixelsandpaint-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-block-end: 1px solid #ccc;
}

.pixelsandpaint-cart-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	border: none;
	border-radius: 999px;
	background: #f2f2f2;
	color: #282b2d;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;

	&:hover {
		background: #e0e0e0;
	}

	&:focus-visible {
		outline: 2px solid #282b2d;
		outline-offset: 2px;
	}
}

.pixelsandpaint-cart-drawer__items {
	flex: 1 1 auto;
	padding: 1rem 1.25rem;
}

.pixelsandpaint-cart-drawer__empty {
	color: #8c8c8c;
}

.pixelsandpaint-cart-drawer__item {
	display: flex;
	gap: 0.75rem;
	padding-block: 0.6rem;
	border-block-end: 1px solid #f2f2f2;
}

.pixelsandpaint-cart-drawer__item-thumb {
	inline-size: 7rem;
	block-size: 7rem;
	object-fit: cover;
	border-radius: 0.375rem;
	flex-shrink: 0;
}

.pixelsandpaint-cart-drawer__item-details {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	flex: 1 1 auto;
	justify-content: center;
}

/* Every line in here is a <p> — the browser's default paragraph margin is the actual
   cause of loose spacing (it stacks on top of the flex `gap` above), not the gap itself.
   Zeroed out globally for this block rather than fixed up per line. */
.pixelsandpaint-cart-drawer__item-details p {
	margin: 0;
	line-height: 1.25;
}

/* Item Name (Format — Size) is the prominent line, like a product title. */
.pixelsandpaint-cart-drawer__item-name {
	font-weight: 600;
}

.pixelsandpaint-cart-drawer__item-gallery {
	font-size: 0.85rem;
	color: #8c8c8c;
}

/* Item ID — the smallest, most muted line. */
.pixelsandpaint-cart-drawer__item-id {
	font-size: 0.75rem;
	color: #b0b0b0;
}

.pixelsandpaint-cart-drawer__item-price {
	font-weight: 600;
	margin-block-start: 0.15rem;
}

/* Trash + quantity stepper, one bordered pill control (Amazon-style cart-line removal UX). */
.pixelsandpaint-cart-drawer__item-stepper {
	display: inline-flex;
	align-items: stretch;
	inline-size: fit-content;
	border: 1px solid #ccc;
	border-radius: 999px;
	overflow: hidden;
	margin-block-start: 0.2rem;
}

.pixelsandpaint-cart-drawer__item-remove,
.pixelsandpaint-cart-drawer__item-step {
	border: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
	padding-inline: 0.65rem;
	padding-block: 0.35rem;
	display: flex;
	align-items: center;
	justify-content: center;

	&:hover {
		background: rgb(128 128 128 / 12%);
	}

	&:focus-visible {
		outline: 2px solid #282b2d;
		outline-offset: -2px;
	}
}

.pixelsandpaint-cart-drawer__item-remove {
	border-inline-end: 1px solid #ccc;
}

.pixelsandpaint-cart-drawer__item-step--down {
	border-inline-end: 1px solid #ccc;
}

.pixelsandpaint-cart-drawer__item-step--up {
	border-inline-start: 1px solid #ccc;
}

.pixelsandpaint-cart-drawer__item-qty {
	min-inline-size: 2rem;
	padding-inline: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}

.pixelsandpaint-cart-drawer__footer {
	padding: 1rem 1.25rem;
	border-block-start: 1px solid #ccc;
}

.pixelsandpaint-cart-drawer__subtotal {
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	margin-block-end: 0.75rem;
}

.pixelsandpaint-cart-drawer__checkout {
	display: block;
	text-align: center;
	padding-block: 0.75rem;
	border-radius: 0.25rem;
	background: #282b2d;
	color: #fff;
	text-decoration: none;

	&:focus-visible {
		outline: 2px solid #282b2d;
		outline-offset: 2px;
	}
}

/* Pixels & Paint Gallery block — replaces core Gallery/Image blocks going forward. */

.pixelsandpaint-gallery-block {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.5rem;
}

.pixelsandpaint-gallery-block__item {
	margin: 0;
}

.pixelsandpaint-gallery-block__image {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

/* Cart block — full-page equivalent of the drawer; reuses the drawer's own item/subtotal
   classes (see class-cart-block.php's docblock) so cart.js keeps both in sync for free. */

.pixelsandpaint-cart-page {
	max-inline-size: 40rem;
	margin-inline: auto;
}

.pixelsandpaint-cart-page .pixelsandpaint-cart-drawer__item {
	padding-block: 1rem;
}

.pixelsandpaint-cart-page__footer {
	padding-block-start: 1rem;
	border-block-start: 1px solid #ccc;
}

/* Checkout order summary (GF form 6): the Project/Gallery name is a Section field
   (.gsection_title) — GF's default heading size reads as a page title, competing with the
   actual page heading above it. Scoped to form 6 specifically, not a global GF override. */
#gform_6 .gsection_title {
	font-size: 1rem;
	font-weight: 600;
	margin-block-end: 0.5rem;
}

.pixelsandpaint-checkout-line__thumb {
	display: block;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	object-fit: cover;
	border-radius: 0.25rem;
	margin-block-end: 0.35rem;
}

@media (prefers-color-scheme: dark) {
	.pixelsandpaint-cart-drawer {
		background: #1c1c1c;
		color: #f2f2f2;
	}

	.pixelsandpaint-cart-drawer__item {
		border-block-end-color: #333;
	}
}