/* ==================================================================
   Nothing Wall — component styles

   These cover the certificate, the wall, the checkout fields and the
   receipt, so the plugin looks right in any theme. Every colour and
   typeface reads from a custom property with a fallback, so the
   Nothing On Purpose theme can restyle all of it by redefining the
   variables rather than fighting these rules.
   ================================================================== */

.nop-wall,
.nop-wall-fields,
.nop-receipt,
.nop-gift,
.nop-cert-link,
.cert-slot,
.cert,
.prices,
.nop-custom {
	--nop-paper: var(--paper, #fbf6e6);
	--nop-ink: var(--ink, #191712);
	--nop-ink-soft: var(--ink-soft, #5d5744);
	--nop-ink-faint: var(--ink-faint, rgba(25, 23, 18, 0.42));
	--nop-red: var(--margin-red, #d9584d);
	--nop-marker: var(--marker, #ffe45e);
	--nop-pink: var(--sticky-pink, #ffc9dc);
	--nop-hand: var(--hand, "Caveat", "Bradley Hand", "Comic Sans MS", cursive);
	--nop-neat: var(--neat, "Patrick Hand", "Comic Sans MS", cursive);
	--nop-type: var(--type, "Special Elite", "Courier New", monospace);
	--nop-sketch: var(--sketch, 255px 14px 225px 16px / 16px 225px 14px 255px);
}

/* ---------- The certificate ---------- */

.cert-slot {
	container-type: inline-size;
	width: 100%;
}

.cert {
	position: relative;
	display: block;
	width: 100%;
	padding: 5cqw 5.5cqw 4cqw;
	border: 0.9cqw solid var(--nop-ink);
	background-color: var(--nop-paper);
	background-image: repeating-linear-gradient(
		45deg,
		rgba(25, 23, 18, 0.028) 0 6px,
		transparent 6px 12px
	);
	box-shadow: 0.9cqw 1.2cqw 0 rgba(25, 23, 18, 0.16);
	line-height: 1.3;
	text-align: left;
	overflow: hidden;
}

.cert::before {
	content: "";
	position: absolute;
	inset: 1.6cqw;
	border: 0.35cqw dashed rgba(25, 23, 18, 0.4);
	pointer-events: none;
}

.cert-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2cqw;
	padding-bottom: 1.6cqw;
	border-bottom: 0.3cqw solid var(--nop-ink);
	font-family: var(--nop-type);
	font-size: 2.5cqw;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nop-ink);
}

.cert-serial {
	padding: 0.3em 0.6em;
	background: var(--nop-ink);
	color: var(--nop-paper);
	letter-spacing: 0.14em;
	white-space: nowrap;
}

.cert-body {
	display: grid;
	grid-template-columns: 20cqw 1fr;
	gap: 3.4cqw;
	align-items: start;
	padding: 3.4cqw 0 2cqw;
}

.cert-avatar {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border: 0.45cqw solid var(--nop-ink);
	background: #fff;
	overflow: hidden;
}

.cert-avatar svg {
	width: 100%;
	height: 100%;
	display: block;
}

.cert-kicker {
	margin: 0;
	font-family: var(--nop-type);
	font-size: 2.3cqw;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--nop-red);
}

.cert[data-tier="premium"] .cert-kicker {
	color: var(--nop-ink);
}

.cert[data-tier="executive"] {
	background-color: #f7f2e0;
}

.cert[data-tier="executive"] .cert-serial {
	background: var(--nop-red);
}

.cert-name {
	margin: 0.2em 0 0.05em;
	font-family: var(--nop-hand);
	font-size: 7.4cqw;
	font-weight: 700;
	line-height: 0.95;
	word-break: break-word;
	color: var(--nop-ink);
}

.cert-role {
	margin: 0 0 1.6cqw;
	font-family: var(--nop-neat);
	font-size: 3cqw;
	line-height: 1.2;
	color: var(--nop-ink-soft);
}

.cert-meta {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 0.6cqw 3cqw;
	justify-content: start;
	margin: 0;
	font-family: var(--nop-type);
	font-size: 1.95cqw;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cert-meta > div {
	min-width: 0;
}

.cert-meta dt {
	color: var(--nop-ink-faint);
	font-size: 0.86em;
}

.cert-meta dd {
	margin: 0;
	font-size: 1.05em;
	color: var(--nop-ink);
}

.cert-statement {
	margin: 0;
	padding-top: 1.6cqw;
	padding-right: 25cqw;
	border-top: 0.2cqw dotted rgba(25, 23, 18, 0.4);
	font-family: var(--nop-neat);
	font-size: 2.5cqw;
	line-height: 1.35;
	color: var(--nop-ink);
}

.cert-stamp {
	position: absolute;
	right: 3cqw;
	bottom: 11cqw;
	display: grid;
	place-items: center;
	width: 21cqw;
	height: 21cqw;
	padding: 2cqw;
	border: 0.7cqw double var(--nop-red);
	border-radius: 50%;
	font-family: var(--nop-type);
	font-size: 2.2cqw;
	line-height: 1.1;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	color: var(--nop-red);
	transform: rotate(-14deg);
	opacity: 0.82;
}

.cert-mrz {
	margin: 2.2cqw 0 0;
	padding-top: 1.4cqw;
	border-top: 0.3cqw solid var(--nop-ink);
	font-family: var(--nop-type);
	font-size: 2.3cqw;
	letter-spacing: 0.04em;
	line-height: 1.5;
	word-break: break-all;
	color: var(--nop-ink-soft);
}

/* ---------- The wall ---------- */

.nop-wall.is-loading .wall-grid {
	opacity: 0.45;
	transition: opacity 0.2s ease;
}

.wall-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 30px;
	padding-bottom: 16px;
	border-bottom: 2px dashed rgba(25, 23, 18, 0.24);
}

.search-field input {
	width: min(300px, 70vw);
	padding: 8px 14px;
	border: 2.5px solid var(--nop-ink);
	border-radius: var(--nop-sketch);
	background: var(--nop-paper);
	font-family: var(--nop-neat);
	color: var(--nop-ink);
}

.sort-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chip {
	padding: 4px 14px;
	border: 2px solid var(--nop-ink);
	border-radius: 40px 12px 34px 14px / 14px 30px 12px 36px;
	background: transparent;
	font-family: var(--nop-neat);
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--nop-ink);
	cursor: pointer;
}

.chip:hover {
	background: var(--nop-marker);
}

.chip.is-active {
	color: var(--nop-paper);
	background: var(--nop-ink);
}

.wall-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(22px, 3vw, 34px);
}

.wall-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform 0.16s ease;
}

.wall-card:nth-child(4n + 1) { transform: rotate(-1.3deg); }
.wall-card:nth-child(4n + 2) { transform: rotate(0.9deg); }
.wall-card:nth-child(4n + 3) { transform: rotate(-0.5deg); }
.wall-card:nth-child(4n + 4) { transform: rotate(1.5deg); }

.wall-card:hover {
	transform: rotate(0deg) translateY(-5px);
	z-index: 5;
}

.wall-card .cert {
	box-shadow: 4px 6px 0 rgba(25, 23, 18, 0.14);
}

.wall-note {
	margin: 0;
	padding: 0 6px;
	font-family: var(--nop-hand);
	font-size: 1.28rem;
	line-height: 1.15;
	color: var(--nop-ink-soft);
}

.wall-note::before { content: "\201C"; }
.wall-note::after { content: "\201D"; }

.wall-card.is-mine::after {
	content: "you";
	position: absolute;
	z-index: 7;
	top: -14px;
	left: -12px;
	padding: 4px 12px;
	border: 2.5px solid var(--nop-ink);
	border-radius: 40px 14px 34px 12px / 12px 32px 14px 38px;
	background: var(--nop-pink);
	font-family: var(--nop-hand);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--nop-ink);
	transform: rotate(-9deg);
}

.wall-empty {
	margin: 30px 0 0;
	font-family: var(--nop-hand);
	font-size: 1.6rem;
	text-align: center;
}

.wall-empty[hidden] {
	display: none;
}

.wall-more-row {
	margin-top: 34px;
	text-align: center;
}

.nop-wall-more[hidden] {
	display: none;
}

/* ---------- Prices ---------- */

.prices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 3vw, 30px);
	margin-top: 30px;
	align-items: stretch;
}

.price {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 28px 22px 24px;
	border: 2.5px solid var(--nop-ink);
	border-radius: var(--nop-sketch);
	background: var(--nop-paper);
	color: var(--nop-ink);
	text-align: left;
	text-decoration: none;
	box-shadow: 4px 6px 0 rgba(25, 23, 18, 0.13);
	transition: transform 0.14s ease, background 0.14s ease;
}

.price:nth-child(1) { transform: rotate(-1.2deg); }
.price:nth-child(3) { transform: rotate(1.1deg); }

.price:hover {
	background: var(--nop-marker);
	transform: rotate(0deg) translateY(-4px);
}

.price-popular {
	border-width: 3.5px;
}

.ribbon {
	position: absolute;
	top: -16px;
	right: -14px;
	padding: 4px 14px;
	border: 2.5px solid var(--nop-ink);
	border-radius: 40px 14px 34px 12px / 12px 32px 14px 38px;
	background: var(--nop-marker);
	font-family: var(--nop-hand);
	font-size: 1.1rem;
	font-style: normal;
	font-weight: 700;
	transform: rotate(8deg);
}

.price-name {
	font-family: var(--nop-type);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nop-red);
}

.price-tag {
	font-family: var(--nop-hand);
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1;
}

.price small {
	font-size: 0.98rem;
	color: var(--nop-ink-soft);
}

.price-title {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px dotted rgba(25, 23, 18, 0.4);
	font-size: 0.94rem;
	line-height: 1.35;
	color: var(--nop-ink-soft);
}

.price-title b {
	font-family: var(--nop-hand);
	font-size: 1.25rem;
	color: var(--nop-ink);
}

.custom-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-top: 34px;
	padding: 22px 26px;
	border: 2px dashed var(--nop-ink);
	border-radius: var(--nop-sketch);
}

.custom-row > label {
	font-family: var(--nop-hand);
	font-size: 1.45rem;
}

.custom-input {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-bottom: 2.5px solid var(--nop-ink);
}

.custom-input span {
	font-family: var(--nop-hand);
	font-size: 1.5rem;
}

.custom-input input {
	width: 110px;
	padding: 2px 0;
	border: 0;
	background: transparent;
	font-family: var(--nop-hand);
	font-size: 1.6rem;
	color: var(--nop-ink);
}

.custom-input input:focus {
	outline: none;
}

.custom-input:focus-within {
	border-bottom-color: var(--nop-red);
}

.custom-hint {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.95rem;
	color: var(--nop-ink-soft);
}

.nop-custom-error:empty {
	display: none;
}

.nop-custom-error {
	flex-basis: 100%;
	margin: 0;
	color: var(--nop-red);
}

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

.nop-wall-fields {
	margin: 36px 0;
	padding-top: 28px;
	border-top: 2px dashed rgba(25, 23, 18, 0.24);
}

.nop-wall-fields h3 {
	font-family: var(--nop-hand);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	margin: 0 0 6px;
}

.nop-fields-intro {
	margin: 0 0 22px;
	color: var(--nop-ink-soft);
}

.nop-fields-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}

.nop-fields-grid > * {
	min-width: 0;
}

.nop-wall-fields .form-row {
	display: block;
	margin: 0 0 18px;
}

.nop-wall-fields .form-row > label {
	display: block;
	margin-bottom: 4px;
	font-family: var(--nop-type);
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nop-ink-soft);
}

.nop-wall-fields .form-row input.input-text {
	width: 100%;
	padding: 9px 14px;
	border: 2.5px solid var(--nop-ink);
	border-radius: var(--nop-sketch);
	background: var(--nop-paper);
	font-family: var(--nop-hand);
	font-size: 1.4rem;
	line-height: 1.3;
	color: var(--nop-ink);
}

.nop-avatar-field {
	border: 0;
	padding: 0;
	margin: 0 0 18px;
}

.nop-wall-fields .nop-check > label.checkbox {
	text-transform: none;
	letter-spacing: 0;
}

.nop-avatar-field legend {
	font-family: var(--nop-type);
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nop-ink-soft);
	margin-bottom: 6px;
}

.avatar-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.avatar-option {
	width: 58px;
	height: 58px;
	padding: 2px;
	border: 2.5px solid var(--nop-ink);
	border-radius: 50%;
	background: #fff;
	overflow: hidden;
	cursor: pointer;
}

.avatar-option svg {
	width: 100%;
	height: 100%;
	display: block;
}

.avatar-option[aria-pressed="true"] {
	background: var(--nop-marker);
	box-shadow: 0 0 0 3px var(--nop-paper), 0 0 0 5.5px var(--nop-ink);
}

.nop-check label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--nop-hand);
	font-size: 1.3rem;
	line-height: 1.25;
	cursor: pointer;
}

.nop-check input[type="checkbox"] {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	accent-color: var(--nop-ink);
}

.nop-hint {
	display: block;
	margin-top: 4px;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--nop-ink-soft);
}

.preview-label {
	margin: 0 0 8px;
	font-family: var(--nop-type);
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nop-red);
}

.preview-foot {
	margin: 10px 0 0;
	font-size: 0.88rem;
	color: var(--nop-ink-soft);
}

#place_order.is-blocked {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---------- Receipt ---------- */

.nop-receipt {
	margin: 0 0 40px;
	text-align: center;
}

.nop-receipt .giant-face {
	margin: 0;
	font-family: var(--nop-hand);
	font-size: 4.4rem;
	font-weight: 700;
	line-height: 1;
}

.nop-receipt h2 {
	font-family: var(--nop-hand);
	font-size: clamp(2.2rem, 6vw, 3.4rem);
	margin: 0 0 10px;
}

.nop-receipt-cert {
	max-width: 620px;
	margin: 26px auto;
}

.success-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.share-status {
	min-height: 1.5em;
	margin: 12px 0 0;
	font-family: var(--nop-hand);
	font-size: 1.3rem;
}

.success-foot,
.nop-pending {
	margin: 6px 0 0;
	font-size: 0.92rem;
	color: var(--nop-ink-soft);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
	.prices,
	.nop-fields-grid {
		grid-template-columns: 1fr;
	}

	.price {
		transform: none !important;
	}

	.nop-fields-preview {
		order: -1;
		max-width: 460px;
	}
}

@media (max-width: 520px) {
	.wall-grid {
		grid-template-columns: 1fr;
	}

	.wall-card {
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wall-card,
	.price,
	.nop-wall .wall-grid {
		transition: none;
	}
}

/* ==================================================================
   Gifts
   ================================================================== */

.cert-gift-flag {
	position: absolute;
	z-index: 2;
	top: 5.4cqw;
	left: -8.6cqw;
	width: 34cqw;
	padding: 1cqw 0;
	background: var(--nop-red);
	color: #fff8ec;
	font-family: var(--nop-type);
	font-size: 2.2cqw;
	letter-spacing: 0.2em;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(-45deg);
	pointer-events: none;
}

.cert.is-gift .cert-head {
	padding-left: 11cqw;
}

.cert-gift-from {
	margin: 0 0 1.4cqw;
	font-family: var(--nop-neat);
	font-size: 2.5cqw;
	line-height: 1.2;
	color: var(--nop-red);
}

.cert-gift-from[hidden] {
	display: none;
}

.cert-gift-from b {
	font-family: var(--nop-hand);
	font-size: 1.35em;
	font-weight: 700;
}

/* A wish reads as a note pinned under the card, not a brag. */
.wall-note.is-wish {
	padding: 10px 14px;
	border-radius: 12px 3px 14px 4px / 4px 12px 3px 14px;
	background: var(--nop-pink);
	color: var(--nop-ink);
	transform: rotate(-0.8deg);
}

.wall-card.is-focus .cert {
	box-shadow: 0 0 0 4px var(--nop-marker), 6px 8px 0 rgba(25, 23, 18, 0.16);
}

.wall-focus-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-family: var(--nop-hand);
	font-size: 1.35rem;
}

.wall-focus-note[hidden] {
	display: none;
}

/* ---------- The gift explainer ---------- */

.gift-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 3vw, 34px);
	margin-top: 26px;
}

.gift-step {
	position: relative;
	padding-top: 34px;
}

.gift-step-number {
	position: absolute;
	top: -18px;
	left: -14px;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 2.5px solid var(--nop-ink);
	border-radius: 50%;
	background: var(--nop-marker);
	font-family: var(--nop-hand);
	font-size: 1.7rem;
	font-weight: 700;
	transform: rotate(-8deg);
}

.gift-prices {
	margin-top: clamp(40px, 6vw, 72px);
}

.gift-prices-title {
	font-family: var(--nop-hand);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	margin: 0;
}

/* ---------- Gift fields at checkout ---------- */

.nop-gift-toggle {
	padding: 16px 20px;
	border: 2.5px dashed var(--nop-red);
	border-radius: var(--nop-sketch);
	background: rgba(255, 201, 220, 0.28);
}

.nop-gift-only {
	display: none;
}

.nop-wall-fields.is-gift-mode .nop-gift-only,
.nop-wall-fields[data-gift="1"] .nop-gift-only {
	display: block;
}

.nop-label-gift {
	display: none;
}

.nop-wall-fields.is-gift-mode .nop-label-gift,
.nop-wall-fields[data-gift="1"] .nop-label-gift {
	display: inline;
}

.nop-wall-fields.is-gift-mode .nop-label-self,
.nop-wall-fields[data-gift="1"] .nop-label-self {
	display: none;
}

/* ---------- The certificate link on the receipt ---------- */

.nop-cert-link {
	max-width: 560px;
	margin: 26px auto 0;
	padding: 18px 20px;
	border: 2.5px dashed var(--nop-ink);
	border-radius: var(--nop-sketch);
	text-align: left;
}

.nop-cert-link-label {
	margin: 0 0 8px;
	font-family: var(--nop-hand);
	font-size: 1.3rem;
	line-height: 1.2;
}

.nop-cert-link-row {
	display: flex;
	gap: 10px;
}

.nop-cert-link-row input {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	border: 2px solid var(--nop-ink);
	border-radius: var(--nop-sketch);
	background: var(--nop-paper);
	font-family: var(--nop-type);
	font-size: 0.82rem;
	color: var(--nop-ink);
}

@media (max-width: 860px) {
	.gift-steps {
		grid-template-columns: 1fr;
	}

	.nop-cert-link-row {
		flex-direction: column;
	}
}

.wall-broken {
	max-width: 70ch;
	margin: 30px auto 0;
	padding: 16px 20px;
	border: 2px dashed var(--nop-red);
	font-family: var(--nop-neat);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--nop-red);
	word-break: break-word;
}