/*
 * Checkout page (page-checkout.php), both steps.
 * Sizes from Figma "bob-basset-web-shared": desktop frames at 1920 (Cart, Cart/Add gift box,
 * Checkout, Checkout/Filled, Checkout/This order is a gift[/Filled]) and the same frames at 375.
 */

.checkout {
	padding: 32px 0 88px;
	color: #000;
	font-family: 'gothampro', sans-serif;
}

.checkout__container.container-xl {
	max-width: none;
	padding-left: 80px;
	padding-right: 80px;
}

.checkout__back {
	display: inline-block;
	margin-bottom: 32px;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 0.15em;
	color: #000;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.checkout__back:hover {
	color: #ac947b;
}

.checkout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 600px;
	gap: 91px;
	align-items: start;
}

.checkout__grid[data-step="details"] .checkout__main {
	max-width: 1016px;
}

.checkout-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f3f3f5;
	overflow: hidden;
}

.checkout-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.checkout-thumb img.checkout-thumb__logo {
	width: 40%;
	height: auto;
}

/* Shared text styles */

.checkout-item__specs dt,
.checkout-summary__meta dt,
.checkout-field__label {
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #ac947b;
}

/* ---------- Cart: item ---------- */

/* 40px to the middle of the 2px divider on both sides (Figma stroke takes no height) → main 1069x495 */
.checkout-item {
	display: flex;
	gap: 40px;
	padding-bottom: 39px;
	border-bottom: 2px solid #f3f3f5;
}

/* 300x285 as in Figma; on narrower desktops the photo gives way so the specs stay on one line */
.checkout-item__thumb {
	flex: 0 1 300px;
	min-width: 160px;
	aspect-ratio: 300 / 285;
	align-self: flex-start;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.checkout-item__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.checkout-item__data {
	flex: 1 0 auto;
	min-width: 0;
}

.checkout-item__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 32px;
}

.checkout-item__title {
	margin: 0;
	font-family: 'Playfair Display', serif;
	font-size: 48px;
	font-weight: 400;
	line-height: 54px;
}

.checkout-item__remove {
	flex: 0 0 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: #000;
}

.checkout-item__remove svg {
	display: block;
	width: 24px;
	height: 24px;
}

.checkout-item__remove:hover {
	color: #ac947b;
}

.checkout-item__specs {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 12px 8px;
	margin: 0;
}

.checkout-item__specs dt,
.checkout-item__specs dd {
	white-space: nowrap;
}

.checkout-item__specs dd {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	text-align: right;
}

/* ---------- Cart: gift box ---------- */

.checkout-extra {
	display: flex;
	gap: 16px;
	padding-top: 39px;
}

.checkout-extra__thumb {
	flex: 0 0 130px;
	height: 130px;
}

.checkout-extra__data {
	flex: 1 1 auto;
	min-width: 0;
}

.checkout-extra__title {
	margin: 0 0 24px;
	font-family: 'Playfair Display', serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
}

.checkout-extra__text {
	margin: 4px 0 0 32px;
	font-size: 14px;
	line-height: 16px;
	color: #252525;
}

/* ---------- Checkbox / radio ---------- */

.checkout-check,
.checkout-radio {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16px;
	line-height: 20px;
	cursor: pointer;
}

.checkout-check__input,
.checkout-radio__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.checkout-check__box,
.checkout-radio__dot {
	position: relative;
	flex: 0 0 17px;
	width: 17px;
	height: 17px;
	margin: 1.5px;
	border: 1px solid #000;
	background: #fff;
}

.checkout-radio__dot {
	border-radius: 50%;
}

.checkout-check__input:checked + .checkout-check__box {
	background: #000;
}

.checkout-check__input:checked + .checkout-check__box:after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1.5px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 1.25px 1.25px 0;
	transform: rotate(45deg);
}

.checkout-radio__input:checked + .checkout-radio__dot:after {
	content: "";
	position: absolute;
	inset: 1.5px;
	border-radius: 50%;
	background: #000;
}

.checkout-check__input:focus-visible + .checkout-check__box,
.checkout-radio__input:focus-visible + .checkout-radio__dot {
	outline: 2px solid #ac947b;
	outline-offset: 2px;
}

.checkout-check__body,
.checkout-radio__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.checkout-check__hint {
	font-size: 14px;
	line-height: 16px;
	color: #252525;
}

.checkout-radio__hint {
	font-size: 14px;
	line-height: 24px;
	color: #252525;
}

.checkout-check__price {
	margin-left: 4px;
	font-size: 14px;
	line-height: 20px;
}

.checkout-radio__price {
	margin-left: auto;
	font-size: 14px;
	line-height: 24px;
}

.checkout-check--box {
	padding: 16px;
	background: #f3f3f5;
}

/* ---------- Details: sections and fields ---------- */

.checkout-section + .checkout-section {
	margin-top: 48px;
}

.checkout-section__title {
	margin: 0 0 32px;
	font-family: 'Playfair Display', serif;
	font-size: 48px;
	font-weight: 400;
	line-height: 54px;
}

.checkout-section__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	margin-bottom: 40px;
}

.checkout-section__head .checkout-section__title {
	margin-bottom: 0;
}

.checkout-section__head .checkout-check--box {
	flex: 0 1 543px;
}

.checkout-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.checkout-field {
	position: relative;
	min-width: 0;
}

.checkout-field--full {
	grid-column: 1 / -1;
}

.checkout-field__label {
	display: block;
	margin-bottom: 12px;
	padding: 0;
	line-height: 19.6px;
}

.checkout-field__input {
	display: block;
	width: 100%;
	padding: 12px 0 15px; /* + 1px border = 52px (48px on mobile) as in the design */
	border: 0;
	border-bottom: 1px solid #f3f3f5;
	border-radius: 0;
	background: transparent;
	font-family: 'gothampro', sans-serif;
	font-size: 18px;
	line-height: 24px;
	color: #252525;
	-webkit-appearance: none;
	appearance: none;
}

.checkout-field__input::placeholder {
	color: #252525;
	opacity: 0.55;
}

.checkout-field__input:focus {
	outline: none;
	border-bottom-color: #252525;
}

.checkout-field__input--select {
	padding-right: 40px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23252525'/%3E%3C/svg%3E") no-repeat right 20px center;
	cursor: pointer;
}

.checkout-field__input--select:invalid {
	color: rgba(37, 37, 37, 0.55);
}

.checkout-field__input--textarea {
	min-height: 52px;
	padding-right: 60px;
	resize: none;
	overflow: hidden;
}

.checkout-field__counter {
	position: absolute;
	right: 0;
	bottom: 16px;
	font-size: 12px;
	line-height: 16px;
	color: #252525;
}

.checkout-field__error {
	display: block;
	font-size: 12px;
	color: #b3261e;
}

.is-invalid .checkout-field__input {
	border-bottom-color: #b3261e;
}

.is-invalid .checkout-field__error {
	margin-top: 6px;
}

.checkout-delivery {
	max-width: calc(50% - 16px);
	margin: 32px 0 0;
	padding: 0;
	border: 0;
}

.checkout-delivery .checkout-field__label {
	margin-bottom: 24px;
}

.checkout-delivery .checkout-radio + .checkout-radio {
	margin-top: 16px;
}

.checkout-gift-options--js .checkout-field {
	margin-bottom: 32px;
}

.checkout-gift-options--js .checkout-check + .checkout-check {
	margin-top: 24px;
}

/* ---------- Summary ---------- */

.checkout-summary {
	position: sticky;
	top: 144px;
	padding: 32px;
	border-radius: 2.67px;
	background: #f3f3f5;
}

.checkout-summary__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 48px;
	padding-bottom: 21px;
	border-bottom: 1.33px solid #dadada;
}

.checkout-summary__title {
	margin: 0;
	font-family: 'Playfair Display', serif;
	font-size: 40px;
	font-weight: 400;
	line-height: 48px;
}

.checkout-summary__edit {
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 0.15em;
	color: #000;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.checkout-summary__edit:hover {
	color: #ac947b;
}

.checkout-summary__lines {
	margin-bottom: 48px;
}

.checkout-summary__line {
	display: flex;
	align-items: center;
	gap: 12px;
}

.checkout-summary__line + .checkout-summary__line {
	margin-top: 16px;
}

.checkout-summary__line[hidden] {
	display: none;
}

.checkout-summary__info {
	display: flex;
	flex: 1 1 auto;
	justify-content: space-between;
	align-items: center;
	gap: 48px;
	min-width: 0;
}

.checkout-summary__name {
	font-family: 'Playfair Display', serif;
	font-size: 32px;
	line-height: 40px;
}

.checkout-summary__price {
	font-size: 16px;
	line-height: 27.8px;
}

/* Details step: 80px white thumbnail, name with the price under it */
.checkout-summary--details .checkout-summary__thumb {
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
	background: #fff;
}

.checkout-summary--details .checkout-summary__line {
	align-items: flex-start;
}

.checkout-summary--details .checkout-summary__info {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.checkout-summary__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 10.67px 8px;
	margin: 0 0 32px;
}

.checkout-summary__meta dd {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	text-align: right;
}

.checkout-summary--details .checkout-summary__meta dd {
	line-height: 27.8px;
}

.checkout-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
}

.checkout-summary__total__label {
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 2.1px;
	text-transform: uppercase;
	color: #ac947b;
}

.checkout-summary__total__value {
	font-family: 'Playfair Display', serif;
	font-size: 30px;
	line-height: 40px;
}

.checkout-summary__total__value:before {
	content: "$";
	margin-right: 1px;
	font-size: 17.5px;
	vertical-align: 1px;
}

.checkout-summary__notice-box {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	padding: 12px;
	background: #e9e3dd;
	font-size: 12px;
	line-height: 14px;
}

.checkout-summary__notice-box svg {
	flex: 0 0 16px;
}

.checkout-summary__notice-title {
	flex: 0 0 auto;
	white-space: nowrap;
	letter-spacing: 0.175em;
	text-transform: uppercase;
	color: #ac947b;
}

.checkout-summary__notice-text {
	white-space: nowrap;
	color: #252525;
}

.checkout-summary__button,
.checkout-summary__button .button__inner {
	display: flex;
	width: 100%;
}

.checkout-summary__button .button__inner {
	gap: 16px;
}

.checkout-summary__paypal-logo {
	display: block;
	width: 91px;
	height: 24px;
	object-fit: contain;
	filter: brightness(0) invert(1); /* white, as in the design */
}

.checkout-summary__note {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 14px;
	text-align: center;
	color: #252525;
}

.checkout-summary__notice {
	margin: 16px 0 0;
	padding: 12px;
	border: 1px dashed #ac947b;
	font-size: 12px;
	text-align: center;
	color: #ac947b;
}

.checkout-summary__notice[hidden] {
	display: none;
}

/* ---------- Narrower desktops ----------
 * Full Figma layout (600px summary, 91px gap) from 1800px. Below that the summary and gutters
 * shrink so specs and the shipping notice stay on one line, as in the design.
 */

@media (max-width: 1799.98px) {
	.checkout__container.container-xl {
		padding-left: 40px;
		padding-right: 40px;
	}

	.checkout__grid {
		grid-template-columns: minmax(0, 1fr) 460px;
		gap: 40px;
	}

	.checkout-item {
		gap: 24px;
	}

	.checkout-summary {
		padding: 32px 24px;
	}

	.checkout-item__title,
	.checkout-section__title {
		font-size: 40px;
		line-height: 48px;
	}

	.checkout-summary__title {
		font-size: 36px;
		line-height: 44px;
	}

	.checkout-summary__name {
		font-size: 26px;
		line-height: 34px;
	}

	.checkout-section__head .checkout-check--box {
		flex-basis: 440px;
	}
}

@media (max-width: 1439.98px) {
	.checkout__container.container-xl {
		padding-left: 32px;
		padding-right: 32px;
	}

	.checkout__grid {
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 32px;
	}

	.checkout-summary__notice-box {
		flex-wrap: wrap;
	}

	/* Not enough room for one-line specs next to the photo: let the value wrap, keep it beside the label */
	.checkout-item__data {
		flex-shrink: 1;
	}

	.checkout-item__specs dd {
		white-space: normal;
	}
}

@media (max-width: 1199.98px) {
	.checkout__container.container-xl {
		padding-left: 30px;
		padding-right: 30px;
	}

	.checkout__grid {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 40px;
	}

	.checkout-item {
		gap: 24px;
	}

	.checkout-item__specs dt,
	.checkout-item__specs dd {
		white-space: normal;
	}

	.checkout-section__head {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.checkout-section__head .checkout-check--box {
		flex-basis: auto;
	}

	.checkout-summary {
		padding: 24px;
	}

	.checkout-summary__name {
		font-size: 24px;
		line-height: 32px;
	}

	.checkout-summary__info {
		gap: 16px;
	}
}

/* ---------- Mobile (Figma 375) ---------- */

@media (max-width: 991.98px) {
	.checkout {
		padding: 20px 0 48px;
	}

	.checkout__container.container-xl {
		padding-left: 20px;
		padding-right: 20px;
	}

	.checkout__back {
		margin-bottom: 20px;
	}

	.checkout__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.checkout__grid[data-step="details"] .checkout__main {
		max-width: none;
	}

	/* Cart item */
	.checkout-item {
		flex-direction: column;
		gap: 24px;
		padding-bottom: 24px;
	}

	.checkout-item__thumb {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
		height: 270px;
		aspect-ratio: auto;
		background: #f3f3f5;
	}

	.checkout-item__specs dt,
	.checkout-item__specs dd {
		white-space: normal;
	}

	.checkout-item__head {
		margin-bottom: 20px;
	}

	.checkout-item__title {
		font-size: 32px;
		line-height: 40px;
	}

	.checkout-item__specs {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.checkout-item__specs dt {
		margin-bottom: 4px;
	}

	.checkout-item__specs dd {
		margin-bottom: 16px;
		text-align: left;
	}

	.checkout-item__specs dd:last-child {
		margin-bottom: 0;
	}

	/* Gift box */
	.checkout-extra {
		padding-top: 24px;
	}

	.checkout-extra__thumb {
		flex-basis: 96px;
		height: 96px;
	}

	.checkout-extra__title {
		margin-bottom: 16px;
		font-size: 20px;
		line-height: 32px;
	}

	/* Details */
	.checkout-section + .checkout-section {
		margin-top: 32px;
	}

	.checkout-section__title {
		margin-bottom: 32px;
		font-size: 32px;
		line-height: 40px;
	}

	.checkout-section__head {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		margin-bottom: 40px;
	}

	.checkout-fields {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.checkout-field__label {
		font-size: 12px;
		line-height: 16px;
	}

	.checkout-field__input {
		font-size: 16px;
		line-height: 20px;
	}

	.checkout-field__input--textarea {
		min-height: 48px;
	}

	.checkout-delivery {
		max-width: none;
		margin-top: 24px;
	}

	.checkout-gift-options--js .checkout-field {
		margin-bottom: 24px;
	}

	/* Summary */
	.checkout-summary {
		position: static;
		padding: 24px;
	}

	.checkout-summary__head {
		margin-bottom: 32px;
	}

	.checkout-summary__title {
		font-size: 32px;
		line-height: 40px;
	}

	.checkout-summary__lines {
		margin-bottom: 32px;
	}

	.checkout-summary__line + .checkout-summary__line {
		margin-top: 12px;
	}

	.checkout-summary__name {
		font-size: 24px;
		line-height: 32px;
	}

	.checkout-summary__price {
		font-size: 16px;
		line-height: 20px;
	}

	.checkout-summary--details .checkout-summary__thumb {
		flex-basis: 64px;
		width: 64px;
		height: 64px;
	}

	.checkout-summary--details .checkout-summary__info {
		gap: 2px;
	}

	.checkout-summary--details .checkout-summary__price {
		line-height: 27.8px;
	}

	.checkout-summary__meta {
		margin-bottom: 24px;
	}

	.checkout-summary__meta dt {
		font-size: 12px;
		line-height: 16px;
	}

	.checkout-summary__meta dd,
	.checkout-summary--details .checkout-summary__meta dd {
		font-size: 14px;
		line-height: 16px;
	}

	.checkout-summary__total {
		margin-bottom: 24px;
	}

	.checkout-summary__total__label {
		font-size: 16px;
		line-height: 20px;
	}

	.checkout-summary__total__value {
		font-size: 28px;
		line-height: 32px;
	}

	.checkout-summary__button .button__inner {
		height: 42px;
	}

	.checkout-summary__notice-box {
		flex-wrap: wrap;
	}
}

/* Step 3 — thank-you page after PayPal (template-parts/checkout/done.php) */
.checkout-done {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}

.checkout-done__title {
	margin: 0 0 24px;
	font-family: 'Playfair Display', serif;
	font-size: 48px;
	font-weight: 400;
	line-height: 54px;
}

.checkout-done__text {
	margin: 0 0 40px;
	font-size: 16px;
	line-height: 27.8px;
}

.checkout-done__lines {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px 24px;
	margin: 0 0 40px;
	padding: 24px 0;
	border-top: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	text-align: left;
	font-size: 16px;
	line-height: 24px;
}

.checkout-done__lines dd {
	margin: 0;
	text-align: right;
}

.checkout-done__lines .checkout-done__total {
	font-size: 20px;
	letter-spacing: 2.1px;
}

.checkout-done__button,
.checkout-done__button .button__inner {
	display: flex;
	width: 100%;
}

@media (max-width: 767.98px) {
	.checkout-done__title {
		font-size: 32px;
		line-height: 40px;
	}
}