/**
 * Custom synthesis in the basket.
 *
 * Deliberately plain: this sits inside the theme's cart page, and a form that
 * looks like a different website makes people wonder whether they have left it.
 */

.cp-bespoke {
	margin: 2rem 0;
	padding: 1.4rem 1.6rem;
	background: #fbfbfb;
	border: 1px solid #e3e3e3;
	border-left: 4px solid #b32d2e;
	border-radius: 4px;
}

/*
 * The folded state. Padding shrinks when shut so a closed box is one line on the
 * cart page rather than a panel, and grows back once it is open.
 */
.cp-bespoke:not([open]) { padding: .9rem 1.6rem; }

.cp-bespoke__summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem .7rem;
}

/* Safari and older WebKit draw their own triangle through `list-style: none`. */
.cp-bespoke__summary::-webkit-details-marker { display: none; }

.cp-bespoke__summary::after {
	content: "+";
	margin-left: auto;
	font-size: 1.3rem;
	line-height: 1;
	color: #b32d2e;
}

.cp-bespoke[open] .cp-bespoke__summary::after { content: "\2212"; }

.cp-bespoke[open] .cp-bespoke__summary { margin-bottom: .4rem; }

.cp-bespoke__summary:focus-visible {
	outline: 2px solid #b32d2e;
	outline-offset: 3px;
}

.cp-bespoke__summary-title { font-size: 1.25rem; font-weight: 600; }
.cp-bespoke__summary-hint { color: #50575e; }

/*
 * Closing a `<details>` normally hides its non-summary children through the
 * browser's own `display: none`, but a class selector beats a UA rule: with
 * `.cp-bespoke__form { display: grid }` below, the whole 986px form went on
 * rendering inside a box that said it was shut. These two rules are scoped
 * under `:not([open])` so they outrank it without reaching for `!important`.
 */
.cp-bespoke:not([open]) .cp-bespoke__form,
.cp-bespoke:not([open]) .cp-bespoke__lede { display: none; }

.cp-bespoke__heading { margin: 0 0 .4rem; font-size: 1.25rem; }
.cp-bespoke__lede { margin: 0 0 1.2rem; color: #50575e; max-width: 60ch; }

.cp-bespoke__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.4rem;
}

/* The two free-text fields carry the detail the lab needs; giving them the
   full width is the difference between a usable sequence box and a slot. */
.cp-bespoke__field--sequence,
.cp-bespoke__field--notes,
.cp-bespoke__submit { grid-column: 1 / -1; }

.cp-bespoke__field { margin: 0; }
.cp-bespoke__field label { display: block; margin-bottom: .3rem; font-weight: 600; }
.cp-bespoke__field input,
.cp-bespoke__field textarea { width: 100%; }
.cp-bespoke__field .required { color: #b32d2e; border: 0; text-decoration: none; }

.cp-bespoke__submit { margin: .4rem 0 0; }

/*
 * Paints the button rather than borrowing the theme's `.button`.
 *
 * On the live cart that class resolves to white text on a white background: the
 * button was there, the right size, fully clickable, and completely invisible —
 * customers filled the form in and reported that there was no way to submit it.
 * The colour is the one the theme's own primary buttons use (Checkout, Apply
 * coupon), so this still looks like part of the page rather than an exception.
 *
 * The long selector is doing real work. Elementor's cart widget ships
 * `.elementor-widget-woocommerce-cart .woocommerce button.button` at (0,3,1),
 * which is what painted it white; a bare `.cp-bespoke__button` at (0,1,0) never
 * stood a chance. This reaches (0,3,2) and wins on specificity rather than on
 * `!important`, so a later override of our own still behaves predictably.
 */
details.cp-bespoke .cp-bespoke__submit button.cp-bespoke__button,
details.cp-bespoke .cp-bespoke__submit button.cp-bespoke__button:focus {
	background: #b92102;
	color: #fff;
	border: 0;
	padding: .7rem 1.4rem;
	border-radius: 3px;
	font-size: .95rem;
	cursor: pointer;
}

details.cp-bespoke .cp-bespoke__submit button.cp-bespoke__button:hover { background: #9c1c02; }

details.cp-bespoke .cp-bespoke__submit button.cp-bespoke__button:focus-visible {
	outline: 2px solid #b92102;
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.cp-bespoke__form { grid-template-columns: minmax(0, 1fr); }
}


/* The split offer sits above the basket, where the decision is being made. */
.cp-bespoke__split {
	margin: 1.5rem 0;
	padding: 1rem 1.2rem;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-left: 4px solid #2b7f8f;
	border-radius: 4px;
}
.cp-bespoke__split p { margin: 0 0 .8rem; max-width: 70ch; }
.cp-bespoke__split form { margin: 0; }


/* The pitch at the foot of a catalogue page: an answer to "you don't stock this",
   not a section of the site. */
.cp-bespoke__pitch {
	margin: 2.5rem 0 1rem;
	padding: 1.6rem 1.8rem;
	background: #fbfbfb;
	border: 1px solid #e3e3e3;
	border-left: 4px solid #b32d2e;
	border-radius: 4px;
	text-align: center;
}
.cp-bespoke__pitch h2 { margin: 0 0 .5rem; }
.cp-bespoke__pitch p { margin: 0 auto .9rem; max-width: 62ch; }

.cp-bespoke__status { margin-bottom: 1.2rem; }

/* Rendered on the order-pay page, where there is no cart summary beside it. */
.cp-deposit--pay { margin: 1.4rem 0; }