/**
 * Born Slippy Checkout.
 *
 * Enqueued rather than printed inline, and !important throughout. Without it
 * the theme's own button rules won, which is why the Reserve button rendered as
 * an empty outline with no text in it.
 */

.bsk{--ink:#0A0A0A !important;--paper:#FFFFFF !important;--card:#FBFBFB !important;--line:rgba(10,10,10,.12) !important;--soft:rgba(10,10,10,.52) !important;
	--gutter:clamp(20px,4.5vw,64px) !important;--r:12px !important;--r-sm:8px !important;
	position:relative !important;left:50% !important;width:100vw !important;margin-left:-50vw !important;background:var(--paper) !important;color:var(--ink) !important;
	min-height:100vh !important;min-height:100svh !important}
.bsk *,.bsk *::before,.bsk *::after{box-sizing:border-box !important}

.bsk__k{margin:0 0 14px !important;font-size:10px !important;font-weight:700 !important;letter-spacing:.2em !important;text-transform:uppercase !important;color:var(--soft) !important}
.bsk__h{margin:0 0 12px !important;font-size:clamp(28px,4vw,46px) !important;font-weight:800 !important;line-height:1.02 !important;letter-spacing:-.032em !important}
.bsk__h2{margin:0 0 10px !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.2em !important;text-transform:uppercase !important;color:var(--soft) !important}
.bsk__p{margin:0 0 26px !important;font-size:14px !important;line-height:1.6 !important;color:var(--soft) !important;max-width:46ch !important}

/* ---- empty ---- */
.bsk__empty{max-width:560px !important;margin:0 auto !important;padding:clamp(110px,18vh,200px) var(--gutter) !important;text-align:center !important}
.bsk__empty .bsk__p{margin-left:auto !important;margin-right:auto !important}

/* ---- layout ---- */
.bsk__grid{display:grid !important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) !important;align-items:stretch !important;
	min-height:100vh !important;min-height:100svh !important;margin:0 !important}

/* ---- object panel ----
   Separated from the form by a hairline rather than a colour block, so the
   whole page reads as one white sheet. */
.bsk__object{background:var(--card) !important;border-right:1px solid var(--line) !important;
	padding:clamp(90px,14vh,150px) clamp(24px,4vw,64px) !important}
.bsk .bsk__title{margin:0 !important;font-size:clamp(30px,3.4vw,52px) !important;font-weight:800 !important;font-style:italic !important;line-height:1 !important;
	letter-spacing:-.034em !important;text-transform:uppercase !important}
.bsk .bsk__ed{margin:12px 0 0 !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.18em !important;text-transform:uppercase !important;
	color:var(--soft) !important}

.bsk__spec{margin:clamp(30px,5vh,52px) 0 0 !important;display:grid !important;gap:0 !important}
.bsk__spec>div{display:flex !important;justify-content:space-between !important;align-items:baseline !important;gap:20px !important;padding:11px 0 !important;
	border-top:1px solid var(--line) !important}
.bsk__spec>div:first-child{border-top:0 !important;padding-top:0 !important}
.bsk .bsk__spec dt{margin:0 !important;font-size:9.5px !important;font-weight:700 !important;letter-spacing:.16em !important;text-transform:uppercase !important;
	color:var(--soft) !important;flex:none !important}
.bsk .bsk__spec dd{margin:0 !important;font-size:14px !important;text-align:right !important;line-height:1.4 !important}

.bsk__figures{margin-top:clamp(24px,4vh,40px) !important;padding-top:18px !important;border-top:1px solid var(--line) !important;display:grid !important}
.bsk__row{display:flex !important;justify-content:space-between !important;align-items:baseline !important;gap:20px !important;padding:8px 0 !important;
	font-size:12.5px !important;color:var(--soft) !important}
.bsk__row b{font-weight:700 !important;color:var(--ink) !important}
.bsk__row .amount,.bsk__row bdi{color:inherit !important}

.bsk__due{margin-top:clamp(22px,3.5vh,34px) !important;padding:20px !important;border:1px solid var(--ink) !important;border-radius:var(--r) !important;background:#fff !important}
.bsk .bsk__due-k{margin:0 !important;font-size:9.5px !important;font-weight:700 !important;letter-spacing:.16em !important;text-transform:uppercase !important;
	color:var(--soft) !important}
.bsk .bsk__due-n{margin:8px 0 0 !important;font-size:clamp(32px,3vw,46px) !important;font-weight:800 !important;letter-spacing:-.03em !important;line-height:1 !important}
.bsk .bsk__due-b{margin:12px 0 0 !important;font-size:11px !important;line-height:1.55 !important;color:var(--soft) !important}

.bsk__change{margin:clamp(22px,3.5vh,34px) 0 0 !important;font-size:11px !important;letter-spacing:.14em !important;text-transform:uppercase !important}
.bsk__object .bsk__change a{color:var(--soft) !important;text-decoration:none !important;box-shadow:inset 0 -1px 0 var(--line) !important}
.bsk__object .bsk__change a:hover{color:var(--ink) !important;box-shadow:inset 0 -1px 0 var(--ink) !important}

/* ---- form ---- */
.bsk__form{padding:clamp(90px,14vh,150px) clamp(24px,4vw,64px) !important;max-width:660px !important}

.bsk__fields{display:grid !important;grid-template-columns:1fr 1fr !important;gap:14px !important;margin-bottom:clamp(34px,5vh,54px) !important}
.bsk .bsk-half{grid-column:span 1 !important}
.bsk .bsk-full{grid-column:1/-1 !important}
.bsk .form-row{margin:0 !important;padding:0 !important}
.bsk .form-row label{display:block !important;margin-bottom:8px !important;font-size:9.5px !important;font-weight:700 !important;letter-spacing:.16em !important;
	text-transform:uppercase !important;color:var(--soft) !important}
.bsk .form-row .required{color:var(--ink) !important;text-decoration:none !important;border:0 !important}
.bsk .form-row input[type=text],.bsk .form-row input[type=email],.bsk .form-row input[type=tel],
.bsk .form-row select,.bsk .select2-selection{
	width:100% !important;padding:14px 16px !important;border:1px solid var(--line) !important;border-radius:var(--r-sm) !important;background:#fff !important;
	color:var(--ink) !important;font-family:inherit !important;font-size:16px !important;line-height:1.2 !important;-webkit-appearance:none !important;appearance:none !important;
	height:auto !important;transition:border-color .25s !important}
.bsk .form-row input:focus,.bsk .form-row select:focus{outline:0 !important;border-color:var(--ink) !important}
.bsk .form-row .description,.bsk .form-row small{display:block !important;margin-top:7px !important;font-size:11px !important;line-height:1.5 !important;color:var(--soft) !important}
.bsk .select2-container--default .select2-selection--single{border:1px solid var(--line) !important;border-radius:var(--r-sm) !important;height:auto !important;padding:8px 6px !important}
.bsk .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.6 !important;font-size:16px !important;color:var(--ink) !important}
.bsk .select2-container--default .select2-selection--single .select2-selection__arrow{height:100% !important;right:10px !important}

/* ---- payment, WooCommerce markup restyled ---- */
.bsk__pay .shop_table,.bsk__pay .woocommerce-checkout-review-order-table{display:none !important}
.bsk #payment{background:transparent !important;border-radius:0 !important;padding:0 !important}
.bsk #payment ul.payment_methods{margin:0 0 18px !important;padding:0 !important;list-style:none !important;border:0 !important;display:grid !important;gap:8px !important}
.bsk #payment ul.payment_methods li{margin:0 !important;padding:14px 16px !important;border:1px solid var(--line) !important;border-radius:var(--r-sm) !important;
	background:var(--card) !important;list-style:none !important}
.bsk #payment ul.payment_methods li input[type=radio]{margin-right:9px !important}
.bsk #payment ul.payment_methods li label{display:inline !important;font-size:13px !important;font-weight:700 !important;letter-spacing:-.01em !important}
.bsk #payment div.payment_box{margin:12px 0 0 !important;padding:0 !important;background:transparent !important;font-size:13px !important;line-height:1.6 !important;color:var(--soft) !important}
.bsk #payment div.payment_box::before{display:none !important}
.bsk #payment .form-row.place-order{margin:0 !important;padding:0 !important}
.bsk #payment .woocommerce-terms-and-conditions-wrapper{margin:0 0 16px !important;font-size:11.5px !important;line-height:1.6 !important;color:var(--soft) !important}

.bsk button#place_order,.bsk #place_order,.bsk a.bsk__btn,.bsk .bsk__btn{display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;width:100% !important;min-height:56px !important;height:auto !important;line-height:1 !important;background-image:none !important;box-shadow:none !important;text-shadow:none !important;
	padding:17px 26px !important;border:1px solid var(--ink) !important;border-radius:999px !important;background:var(--ink) !important;color:#fff !important;
	font-family:inherit !important;font-size:11.5px !important;font-weight:700 !important;letter-spacing:.22em !important;text-transform:uppercase !important;
	text-decoration:none !important;cursor:pointer !important;-webkit-appearance:none !important;appearance:none !important;float:none !important;
	transition:background-color .3s,color .3s !important}
.bsk button#place_order:hover,.bsk #place_order:hover,.bsk a.bsk__btn:hover,.bsk .bsk__btn:hover{background:transparent !important;color:var(--ink) !important}
.bsk #place_order *,.bsk .bsk__btn *{color:inherit !important;pointer-events:none !important}
.bsk #place_order:focus-visible,.bsk .bsk__btn:focus-visible{outline:1px solid var(--ink) !important;outline-offset:3px !important}
.bsk__btn{display:inline-flex !important;width:auto !important}

.bsk__micro{margin-top:clamp(26px,4vh,40px) !important;display:grid !important;gap:10px !important;padding-top:20px !important;border-top:1px solid var(--line) !important}
.bsk__micro p{margin:0 !important;font-size:11px !important;line-height:1.6 !important;color:var(--soft) !important}
.bsk__micro b{font-weight:700 !important;color:var(--ink) !important}

/* ---- notices ----

   On a failed checkout, WooCommerce's own script does this:

       $( 'form.checkout' ).prepend( '<div class="woocommerce-NoticeGroup">…' )

   Our form IS the grid, so the notice arrives as grid item one, pushes the
   summary into column two and the form itself onto a second row below the fold.
   That is why the page looked broken the moment a field was missed.

   Spanning both columns puts it where it belongs, at the top, full width. */
.bsk__grid > .woocommerce-NoticeGroup,
.bsk__grid > .woocommerce-NoticeGroup-checkout,
.bsk__grid > .woocommerce-error,
.bsk__grid > .woocommerce-message,
.bsk__grid > .woocommerce-info,
.bsk__grid > .woocommerce-notices-wrapper{
	grid-column:1 / -1 !important;
	width:100% !important;
	margin:0 !important;
	padding:clamp(20px,3vh,28px) clamp(24px,4vw,64px) 0 !important;
}
.bsk__grid > .woocommerce-notices-wrapper:empty{ display:none !important; padding:0 !important; }

/* The text was invisible because nothing set a colour and the theme's own
   notice rules were doing it instead. Every part is stated. */
.bsk .woocommerce-error,
.bsk .woocommerce-message,
.bsk .woocommerce-info{
	display:block !important;
	margin:0 0 4px !important;
	padding:16px 18px !important;
	border:1px solid var(--ink) !important;
	border-left:3px solid var(--ink) !important;
	border-radius:var(--r-sm) !important;
	background:#fff !important;
	color:var(--ink) !important;
	font-size:13.5px !important;
	line-height:1.6 !important;
	list-style:none !important;
	box-shadow:0 8px 26px rgba(10,10,10,.07) !important;
}
.bsk .woocommerce-error{ border-color:#B23B33 !important; border-left-color:#B23B33 !important; }
.bsk .woocommerce-error::before{
	content:"Please check the following" !important;
	display:block !important;
	margin-bottom:8px !important;
	font-size:9.5px !important;
	font-weight:700 !important;
	letter-spacing:.18em !important;
	text-transform:uppercase !important;
	color:#B23B33 !important;
}
.bsk .woocommerce-error li,
.bsk .woocommerce-message li,
.bsk .woocommerce-info li{
	margin:0 0 5px !important;
	padding:0 !important;
	list-style:none !important;
	color:var(--ink) !important;
}
.bsk .woocommerce-error li:last-child{ margin-bottom:0 !important; }

/* the "jump to the field" link WooCommerce adds */
.bsk .woocommerce-error a,
.bsk .woocommerce-message a,
.bsk .woocommerce-info a{
	color:var(--ink) !important;
	font-weight:700 !important;
	text-decoration:none !important;
	box-shadow:inset 0 -1px 0 var(--ink) !important;
}
.bsk .woocommerce-error a:hover{ opacity:.7 !important; }
.bsk .woocommerce-error .button,
.bsk .woocommerce-message .button{ display:none !important; }

/* a field that failed validation says so */
.bsk .form-row.woocommerce-invalid input.input-text,
.bsk .form-row.woocommerce-invalid select{ border-color:#B23B33 !important; }
.bsk .form-row.woocommerce-validated input.input-text{ border-color:var(--line) !important; }


/* ---- confirmation ---- */
.bsk__done{max-width:720px !important;margin:0 auto !important;padding:clamp(90px,14vh,160px) var(--gutter) clamp(80px,12vh,140px) !important}
.bsk .bsk__intro{margin:clamp(20px,3vh,30px) 0 0 !important;max-width:52ch !important;font-size:clamp(15px,1.1vw,17px) !important;line-height:1.65 !important;color:var(--soft) !important}
.bsk .bsk__intro b{font-weight:700 !important;color:var(--ink) !important}
.bsk .bsk__h2{margin:0 0 6px !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.2em !important;text-transform:uppercase !important;color:var(--soft) !important}
.bsk__aside{margin:clamp(30px,4.5vh,48px) 0 0 !important;padding:clamp(20px,3vh,26px) !important;border:1px solid var(--line) !important;border-radius:12px !important;background:#fff !important;display:grid !important;gap:12px !important}
.bsk__aside p{margin:0 !important;font-size:12.5px !important;line-height:1.6 !important;color:var(--soft) !important}
.bsk__aside b{font-weight:700 !important;color:var(--ink) !important}
.bsk__aside a{color:var(--ink) !important}
.bsk .bsk__serial{margin:0 !important;font-size:clamp(64px,15vw,150px) !important;font-weight:800 !important;line-height:.86 !important;letter-spacing:-.055em !important;
	font-feature-settings:"tnum" 1 !important}
.bsk__done .bsk__ed{color:var(--soft) !important}
.bsk__next{margin-top:clamp(44px,7vh,80px) !important;padding-top:clamp(28px,4vh,44px) !important;border-top:1px solid var(--line) !important}
.bsk__list{list-style:none !important;margin:16px 0 0 !important;padding:0 !important;display:grid !important;gap:0 !important}
.bsk__list li{display:grid !important;grid-template-columns:auto 1fr !important;gap:6px 18px !important;padding:18px 0 !important;border-top:1px solid var(--line) !important}
.bsk__list li:first-child{border-top:0 !important;padding-top:0 !important}
.bsk__list li>span{font-size:9.5px !important;font-weight:700 !important;letter-spacing:.16em !important;color:var(--soft) !important;padding-top:4px !important;min-width:22px !important}
.bsk__list b{display:block !important;font-size:14px !important;font-weight:800 !important;letter-spacing:-.015em !important}
.bsk__list p{margin:7px 0 0 !important;font-size:13px !important;line-height:1.65 !important;color:var(--soft) !important;max-width:56ch !important}
.bsk__done .bsk__change a{color:var(--ink) !important;text-decoration:none !important;box-shadow:inset 0 -1px 0 var(--line) !important}

@media (max-width:1023px){
	.bsk__grid{grid-template-columns:1fr !important}
	.bsk__object{border-right:0 !important;border-bottom:1px solid var(--line) !important;padding:clamp(80px,12vh,120px) var(--gutter) clamp(40px,6vh,60px) !important}
	.bsk__form{max-width:none !important;padding:clamp(40px,6vh,60px) var(--gutter) clamp(80px,12vh,120px) !important}
}
@media (max-width:600px){
	.bsk__fields{grid-template-columns:1fr !important}
	.bsk .bsk-half{grid-column:1/-1 !important}
}
@media (prefers-reduced-motion:reduce){
	.bsk #place_order,.bsk__btn,.bsk .form-row input,.bsk .form-row select{transition:none !important}
}

/* Links inside the confirmation copy. Stated rather than inherited: the theme
   was colouring them the same as the page, so the address read as a gap. */
.bsk__done .bsk__p a,.bsk__done .bsk__intro a{color:var(--ink) !important;text-decoration:underline !important;text-underline-offset:2px !important}

/* =============================================================================
 * NOTHING INVISIBLE
 *
 * The theme colours links to match its own background, which left the email
 * address on the confirmation pages reading as a gap: the text was there and
 * could be selected, but not seen. Every colour the checkout relies on is
 * stated here rather than inherited, including inside the payment box, where
 * the gateway's own labels and notices are printed.
 * ========================================================================== */

.bsk,.bsk p,.bsk li,.bsk span,.bsk b,.bsk strong,.bsk em,.bsk dt,.bsk dd,.bsk label,.bsk h1,.bsk h2,.bsk h3{color:var(--ink) !important}
.bsk a{color:var(--ink) !important;text-decoration:underline !important;text-underline-offset:2px !important}

/* the soft greys, restated after the blanket rule so they survive it */
.bsk .bsk__k,.bsk .bsk__h2,.bsk .bsk__p,.bsk .bsk__ed,.bsk .bsk__micro,.bsk .bsk__micro p,
.bsk .bsk__aside,.bsk #payment div.payment_box,.bsk #payment .woocommerce-terms-and-conditions-wrapper{color:var(--soft) !important}
.bsk__object .bsk__change a,.bsk__done .bsk__change a{color:var(--soft) !important;text-decoration:none !important}

/* the payment box: labels, amounts and gateway notices all readable */
.bsk #payment,.bsk #payment *,.bsk .woocommerce-checkout-review-order *{color:var(--ink) !important}
.bsk #payment div.payment_box,.bsk #payment div.payment_box *{color:var(--soft) !important}
.bsk #payment label,.bsk #payment .wc_payment_method label{color:var(--ink) !important}

/* buttons keep their own colours */
.bsk button#place_order,.bsk #place_order,.bsk a.bsk__btn,.bsk .bsk__btn{color:var(--paper) !important;text-decoration:none !important}
.bsk button#place_order *,.bsk #place_order *,.bsk .bsk__btn *{color:inherit !important}
.bsk button#place_order:hover,.bsk #place_order:hover,.bsk a.bsk__btn:hover,.bsk .bsk__btn:hover{color:var(--ink) !important}
