@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//www.ax2f6rx.rentyshop.com/wp-content/themes/woodmart/fonts/woodmart-font-3-300.woff2") format("woff2");
}

.wd-popup.wd-promo-popup{
	background-color:#111111;
	background-image: none;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:left center;
}

.page-title-default{
	background-color:rgb(141,46,255);
	background-image: none;
	background-size:cover;
	background-position:center center;
}

.footer-container{
	background-image: url(https://www.ax2f6rx.rentyshop.com/wp-content/uploads/2019/03/camping-footer-bg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center bottom;
}

:root{
--wd-text-font:"Albert Sans", Arial, Helvetica, sans-serif;
--wd-text-font-weight:400;
--wd-text-color:rgb(56,56,56);
--wd-text-font-size:13px;
}
:root{
--wd-title-font:"Albert Sans", Arial, Helvetica, sans-serif;
--wd-title-font-weight:400;
--wd-title-color:rgb(10,10,10);
}
:root{
--wd-entities-title-font:"Albert Sans", Arial, Helvetica, sans-serif;
--wd-entities-title-font-weight:400;
--wd-entities-title-color:rgb(12,12,12);
--wd-entities-title-color-hover:rgb(51 51 51 / 65%);
}
:root{
--wd-alternative-font:"Albert Sans", Arial, Helvetica, sans-serif;
}
:root{
--wd-widget-title-font:"Albert Sans", Arial, Helvetica, sans-serif;
--wd-widget-title-font-weight:400;
--wd-widget-title-transform:uppercase;
--wd-widget-title-color:rgb(0,0,0);
--wd-widget-title-font-size:16px;
}
:root{
--wd-header-el-font:"Albert Sans", Arial, Helvetica, sans-serif;
--wd-header-el-font-weight:500;
--wd-header-el-transform:capitalize;
--wd-header-el-font-size:16px;
}
html .main-page-wrapper .product-grid-item .product-wrapper .wd-entities-title{
	font-family: "Jost", Arial, Helvetica, sans-serif;font-weight: 600;font-size: 16px;
}

:root{
--wd-primary-color:rgb(82,78,74);
}
:root{
--wd-alternative-color:rgb(255,255,255);
}
:root{
--wd-link-color:#333333;
--wd-link-color-hover:#242424;
}
body{
	background-color:rgb(255,255,255);
	background-image: none;
}

.page .main-page-wrapper{
	background-color:rgb(250,251,252);
	background-image: none;
}

.woodmart-archive-shop .main-page-wrapper{
	background-color:rgb(250,251,252);
	background-image: none;
}

.single-product .main-page-wrapper{
	background-color:rgb(250,251,252);
	background-image: none;
}

:root{
--btn-default-bgcolor:rgb(82,78,74);
}
:root{
--btn-default-bgcolor-hover:rgb(82,78,74);
}
:root{
--btn-accented-bgcolor:rgb(82,78,74);
}
:root{
--btn-accented-bgcolor-hover:rgb(82,78,74);
}
:root{
--notices-success-bg:#459647;
}
:root{
--notices-success-color:#fff;
}
:root{
--notices-warning-bg:#E0B252;
}
:root{
--notices-warning-color:#fff;
}
	:root{
					
			
							--wd-form-brd-radius: 0px;
					
					--wd-form-brd-width: 1px;
		
					--btn-default-color: #333;
		
					--btn-default-color-hover: #333;
		
					--btn-accented-color: #fff;
		
					--btn-accented-color-hover: #fff;
		
					
			
							--btn-default-brd-radius: 35px;
				--btn-default-box-shadow: none;
				--btn-default-box-shadow-hover: none;
			
					
					
			
							--btn-accented-brd-radius: 35px;
				--btn-accented-box-shadow: none;
				--btn-accented-box-shadow-hover: none;
			
					
							
					--wd-brd-radius: 0px;
			}

	
	
			@media (min-width: 1025px) {
			.whb-boxed:not(.whb-sticked):not(.whb-full-width) .whb-main-header {
				max-width: 1192px;
			}
		}

		.container {
			max-width: 1222px;
		}

		:root{
			--wd-container-width: 1222px;
		}
	
			.elementor-section.wd-section-stretch > .elementor-column-gap-no {
			max-width: 1192px;
		}
		.elementor-section.wd-section-stretch > .elementor-column-gap-narrow {
			max-width: 1202px;
		}
		.elementor-section.wd-section-stretch > .elementor-column-gap-default {
			max-width: 1212px;
		}
		.elementor-section.wd-section-stretch > .elementor-column-gap-extended {
			max-width: 1222px;
		}
		.elementor-section.wd-section-stretch > .elementor-column-gap-wide {
			max-width: 1232px;
		}
		.elementor-section.wd-section-stretch > .elementor-column-gap-wider {
			max-width: 1252px;
		}
		@media (min-width: 1239px) {
			.platform-Windows .wd-section-stretch > .elementor-container {
				margin-left: auto;
				margin-right: auto;
			}
		}
		@media (min-width: 1222px) {
			html:not(.platform-Windows) .wd-section-stretch > .elementor-container {
				margin-left: auto;
				margin-right: auto;
			}
		}
	
	
	
	
	
			.woodmart-woocommerce-layered-nav .wd-scroll-content {
			max-height: 280px;
		}
	
	
	body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {

									--wd-form-color: rgb(132,132,132);
					
							
									--wd-form-brd-color: rgb(217,217,217);
					
							
									--wd-form-bg: rgb(255,255,255);
						}
.woocommerce.cart-content-wrapper.row .datespophtmlwrap{
	flex: 0 0 100%; 
}
.product-label.featured {
	background-color: #e88637;
}
.product-label.new{
		background-color: #577c80;
}
.page-title-default {
	background: rgba(0,0,0,0.35);
	background-size:cover;
	padding:50px;
}
span.tab-label{
color:#fff;
}
#order_data .order_data_column div.address[style*="display: none"] + div.edit_address {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#billing_phone_field, #shipping_phone_field, #shipping_country_field{
	clear:none!important;
}
#billing_company_field, #shipping_company_field {
    display: flow-root!important;
}
#billing_postcode_field label, #billing_first_name_field label, #billing_last_name_field label, #billing_company_field label, #billing_address_1_field label, #billing_city_field label, #billing_state_field label, #billing_phone_field label, #billing_email_field label{
	display:none;
}
#customer_details .woocommerce-billing-fields h3,#order_review_heading, #customer_details .woocommerce-additional-fields h3{
	font-size:18px!important;
	color:#545454;
	text-transform:capitalize;
}
#bb_dates_panel_before .bb_dates_panel{
	margin-bottom:20px;
}
#bb_dates_panel_before .bb_dates_panel div{
	font-size:13px;
}
label.bb_length_text:has(input[type="radio"]:checked),label.bb_length_text:hover {
    background-color: var(--btn-accented-bgcolor-hover);
    color: white;
}
/* =========================================================
   Reservety — Thank-you page (order received)

   Visually matched to reservety-checkout.css: theme-driven Primary /
   Secondary colors, the same neutrals, 14px cards with a hairline border
   (no drop shadows), theme fonts, 48px fields, focus rings and buttons.
   Works with order-thumbs.js for product images.

   Never touches the contract-signing page (an order-received page that
   holds a Gravity Form): every rule is scoped to
   .woocommerce-order:not(:has(.gform_wrapper)). That page is styled by
   contract-page.css.

   COLORS — WoodMart › Theme Settings › Styles and colors
     Primary   (--wd-primary-color)      buttons, links, focus, the total
     Secondary (--wd-alternative-color)  signing card, tags, icons
   Text on those colors is picked automatically from their lightness.
   ========================================================= */

/* ---------- 0. Page canvas — same neutral ground as the checkout ---------- */

body.woocommerce-order-received {
	background-color: #f4f6f9 !important;
}

body.woocommerce-order-received .site-content,
body.woocommerce-order-received .content-layout-wrapper,
body.woocommerce-order-received .main-page-wrapper,
body.woocommerce-order-received article.page,
body.woocommerce-order-received article.page > .entry-content,
body.woocommerce-order-received .woocommerce,
body.woocommerce-order-received .woocommerce-order:not(:has(.gform_wrapper)) {
	background: transparent !important;
	box-shadow: none !important;
}

.woocommerce-order:not(:has(.gform_wrapper))::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: #f4f6f9;
}

/* ---------- 1. Tokens + base ----------
   Type scale: page 26 · section titles 18 · item 15 · body 14–15
               meta 13 · labels 13                               */

.woocommerce-order:not(:has(.gform_wrapper)) {
	--bb-primary: var(--wd-primary-color, #1f5fd6);
	--bb-secondary: var(--wd-alternative-color, #0e2a5c);
	--bb-accent: var(--bb-primary);

	--bb-on-primary: var(--btn-accented-color, #fff);
	--bb-on-primary: oklch(from var(--bb-primary) clamp(0, (l - 0.62) * -1000, 1) 0 h);
	--bb-on-secondary: #fff;
	--bb-on-secondary: oklch(from var(--bb-secondary) clamp(0, (l - 0.62) * -1000, 1) 0 h);

	--bb-primary-soft: #eef4ff;
	--bb-primary-soft: color-mix(in srgb, var(--bb-primary) 9%, #fff);
	--bb-primary-ring: rgba(31, 95, 214, .25);
	--bb-primary-ring: color-mix(in srgb, var(--bb-primary) 28%, transparent);
	--bb-primary-hover: var(--bb-primary);
	--bb-primary-hover: color-mix(in srgb, var(--bb-primary) 84%, #000);
	--bb-secondary-soft: #eef2f8;
	--bb-secondary-soft: color-mix(in srgb, var(--bb-secondary) 8%, #fff);

	--bb-ink: #16202e;
	--bb-text: #4a5666;
	--bb-body: #36414f;
	--bb-placeholder: #7a8594;
	--bb-line: #dce2ea;
	--bb-field: #c3ccd8;
	--bb-success: #1e7b45;
	--bb-success-soft: #e7f5ec;

	--bb-radius: 14px;
	--bb-btn-radius: 10px;
	--bb-field-radius: 8px;
	--bb-surface: #fff;
	--bb-tint: #f4f6f9;
	--bb-shadow: none;
	--bb-pad: 28px;
	--bb-font: var(--wd-text-font, inherit);
	--bb-title-font: var(--wd-title-font, var(--wd-text-font, inherit));
	--bb-thumb: 56px;

	max-width: 880px;
	margin-inline: auto;
	padding-block: 10px 24px;
	color: var(--bb-text);
	font-family: var(--bb-font);
	font-size: 15px;
	line-height: 1.55;
	letter-spacing: 0;
}

.woocommerce-order:not(:has(.gform_wrapper)) *,
.woocommerce-order:not(:has(.gform_wrapper)) *::before,
.woocommerce-order:not(:has(.gform_wrapper)) *::after {
	box-sizing: border-box;
}

.woocommerce-order:not(:has(.gform_wrapper)) a,
.woocommerce-order:not(:has(.gform_wrapper)) p,
.woocommerce-order:not(:has(.gform_wrapper)) li,
.woocommerce-order:not(:has(.gform_wrapper)) td,
.woocommerce-order:not(:has(.gform_wrapper)) th,
.woocommerce-order:not(:has(.gform_wrapper)) span,
.woocommerce-order:not(:has(.gform_wrapper)) strong,
.woocommerce-order:not(:has(.gform_wrapper)) address,
.woocommerce-order:not(:has(.gform_wrapper)) textarea,
.woocommerce-order:not(:has(.gform_wrapper)) input {
	font-family: var(--bb-font) !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) h2,
.woocommerce-order:not(:has(.gform_wrapper)) h3 {
	font-family: var(--bb-title-font) !important;
}

/* keyboard focus, same ring as the checkout */
.woocommerce-order:not(:has(.gform_wrapper)) a:focus-visible,
.woocommerce-order:not(:has(.gform_wrapper)) button:focus-visible,
.woocommerce-order:not(:has(.gform_wrapper)) input[type="submit"]:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px var(--bb-primary-ring) !important;
	border-radius: var(--bb-btn-radius);
}

/* ---------- 2. Confirmation card ---------- */

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-thankyou-order-received {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 20px;
	padding: 36px var(--bb-pad) 32px;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	background: var(--bb-surface);
	color: var(--bb-ink);
	font-family: var(--bb-title-font) !important;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-thankyou-order-received::before {
	content: "";
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--bb-success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e7b45' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-thankyou-order-received::after {
	content: "A confirmation is on its way to your inbox.";
	display: block;
	margin-top: 6px;
	color: var(--bb-text);
	font-family: var(--bb-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
}

/* ---------- 3. Order summary strip ---------- */

.woocommerce-order:not(:has(.gform_wrapper)) ul.order_details,
.woocommerce-order:not(:has(.gform_wrapper)) ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: 1fr 1.15fr 1.6fr 1fr;
	margin: 0 0 20px;
	padding: 0;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	background: var(--bb-surface);
	box-shadow: var(--bb-shadow);
	list-style: none;
	overflow: hidden;
}

.woocommerce-order:not(:has(.gform_wrapper)) ul.order_details li,
.woocommerce-order:not(:has(.gform_wrapper)) ul.woocommerce-order-overview li {
	float: none;
	width: auto;
	margin: 0;
	padding: 18px 24px;
	border: none;
	border-left: 1px solid var(--bb-line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--bb-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce-order:not(:has(.gform_wrapper)) ul.order_details li:first-child,
.woocommerce-order:not(:has(.gform_wrapper)) ul.woocommerce-order-overview li:first-child {
	border-left: none;
}

.woocommerce-order:not(:has(.gform_wrapper)) ul.order_details li strong,
.woocommerce-order:not(:has(.gform_wrapper)) ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 5px;
	color: var(--bb-ink);
	font-size: 16px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.woocommerce-order:not(:has(.gform_wrapper)) ul.order_details li.email strong,
.woocommerce-order:not(:has(.gform_wrapper)) ul.woocommerce-order-overview li.email strong {
	font-size: 14px;
	letter-spacing: 0;
}

.woocommerce-order:not(:has(.gform_wrapper)) ul.order_details li.total strong,
.woocommerce-order:not(:has(.gform_wrapper)) ul.woocommerce-order-overview li.total strong {
	color: var(--bb-primary);
	font-weight: 800;
}

/* ---------- 4. Order-details section + signing card ----------
   The signing card uses the Secondary color, like the rental-period
   block in the checkout summary, with a Primary call-to-action. */

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-order-details {
	display: flex;
	flex-direction: column;
	float: none !important;
	width: 100% !important;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--bb-ink);
}

.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc {
	order: -2;
	display: block;
	position: relative;
	width: 100%;
	margin: 0 0 20px;
	padding: var(--bb-pad);
	border: 0;
	border-radius: var(--bb-radius);
	background: var(--bb-secondary);
	color: var(--bb-on-secondary);
	box-shadow: none;
	overflow: hidden;
}

.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc::before {
	content: none;
}

.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc::after {
	content: "Signature required";
	position: absolute;
	top: var(--bb-pad);
	right: var(--bb-pad);
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	color: var(--bb-on-secondary);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc table,
.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc thead,
.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc tbody,
.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc tr,
.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc th,
.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc td {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	text-align: left;
	vertical-align: baseline;
}

.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc thead th {
	padding-right: 170px;
	color: var(--bb-on-secondary);
	font-family: var(--bb-title-font) !important;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
}

.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc thead th::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-right: 10px;
	vertical-align: -3px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Cpath d='M2 2l7.586 7.586'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Cpath d='M2 2l7.586 7.586'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* supporting copy — edit this string to change the wording */
.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc thead th::after {
	content: "Sign your rental agreement so we can schedule the drop-off. It takes about a minute.";
	display: block;
	margin-top: 8px;
	max-width: 52ch;
	color: inherit;
	opacity: .85;
	font-family: var(--bb-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
}

.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc tbody {
	margin-top: 22px;
}

.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc tbody tr + tr {
	margin-top: 10px;
}

/* call to action — the checkout's Place order button */
.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc td a {
	display: inline-block;
	position: relative;
	padding: 16px 52px 16px 24px;
	border-radius: var(--bb-btn-radius);
	background: var(--bb-primary);
	color: var(--bb-on-primary) !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	/* stored text is in caps — renders as sentence case.
	   Delete this and the ::first-letter rule to keep the original. */
	text-transform: lowercase;
	box-shadow: none;
	transition: background-color .15s ease;
}

.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc td a::first-letter {
	text-transform: uppercase;
}

.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc td a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 22px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s ease;
}

.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc td a:hover {
	background: var(--bb-primary-hover);
	color: var(--bb-on-primary) !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc td a:hover::after {
	transform: translateX(3px);
}

.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc td a:focus-visible {
	outline: 3px solid rgba(255, 255, 255, .7) !important;
	outline-offset: 2px;
	box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc td a,
	.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc td a::after {
		transition: none;
	}
	.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc td a:hover::after {
		transform: none;
	}
}

/* ---------- 5. Rental dates ---------- */

.woocommerce-order:not(:has(.gform_wrapper)) .bb_dates_panel {
	order: -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 26px;
	margin: 0 0 28px;
	padding: 16px 24px;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	background: var(--bb-surface);
	box-shadow: var(--bb-shadow);
	font-size: 14px;
}

.woocommerce-order:not(:has(.gform_wrapper)) .bb_dates_panel > div:first-child {
	color: var(--bb-text);
	font-weight: 500 !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) .bb_dates_panel > div:not(:first-child) {
	display: flex;
	align-items: center;
	color: var(--bb-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.woocommerce-order:not(:has(.gform_wrapper)) .bb_dates_panel i {
	color: var(--bb-secondary);
	font-size: 13px;
}

/* ---------- 6. Section titles (one size everywhere) ---------- */

.woocommerce-order:not(:has(.gform_wrapper)) h2,
.woocommerce-order:not(:has(.gform_wrapper)) h3,
.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-order-details__title,
.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-column__title {
	margin: 0 0 12px !important;
	padding: 0 4px !important;
	border: none !important;
	color: var(--bb-ink) !important;
	font-family: var(--bb-title-font) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) h2::after,
.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-column__title::after {
	display: none;
}

/* ---------- 7. Order details table ---------- */

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-order-details .responsive-table {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--bb-line) !important;
	border-radius: var(--bb-radius) !important;
	background: var(--bb-surface) !important;
	box-shadow: var(--bb-shadow) !important;
	overflow: hidden;
}

/* force a real table (the theme turns rows into flex boxes) */
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details {
	display: table !important;
	width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	table-layout: auto !important;
	background: transparent !important;
	box-shadow: none !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details thead { display: none !important; }
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tbody { display: table-row-group !important; }
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tfoot { display: table-footer-group !important; }

.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tr {
	display: table-row !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details th,
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details td {
	display: table-cell !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	flex: none !important;
	padding: 12px 24px !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--bb-ink) !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	text-align: left !important;
	vertical-align: middle !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table td::after,
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table tr::before,
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table tr::after {
	display: none !important;
	content: none !important;
}

/* prices inherit their cell's size/weight */
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table .amount,
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table .amount bdi,
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table .woocommerce-Price-currencySymbol {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-variant-numeric: tabular-nums;
}

/* price column: narrow, right, never wraps */
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details td.product-total,
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tfoot td {
	width: 1% !important;
	white-space: nowrap !important;
	text-align: right !important;
	font-weight: 600 !important;
}

/* rows */
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tbody tr {
	border-bottom: 1px solid var(--bb-line) !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tbody tr.bundled_table_item {
	border-bottom: 0 !important;
	background: var(--bb-tint) !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tbody tr:last-child {
	border-bottom: 1px solid var(--bb-line) !important;
}

/* product cell — name and qty inline, details beneath */
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details td.product-name {
	position: relative !important;
	width: 100% !important;
	min-height: calc(var(--bb-thumb) + 36px);
	padding-top: 18px !important;
	padding-bottom: 18px !important;
	padding-left: calc(24px + var(--bb-thumb) + 16px) !important;
	font-weight: 600 !important;
	letter-spacing: 0;
}

.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table td.product-name br {
	display: none;
}

.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table td.product-name a {
	color: var(--bb-ink) !important;
	font-size: inherit !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table td.product-name a:hover {
	color: var(--bb-ink) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--bb-primary) !important;
	text-underline-offset: 3px;
}

.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table .product-quantity {
	display: inline-block !important;
	margin-left: 8px !important;
	padding: 1px 8px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--bb-secondary-soft) !important;
	color: var(--bb-secondary) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	vertical-align: 1px;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table tr.bundled_table_item .product-quantity {
	background: #fff !important;
}

/* thumbnails — image supplied by order-thumbs.js via --thumb */
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table td.product-name::before {
	content: "" !important;
	display: block !important;
	position: absolute;
	top: 50%;
	left: 24px;
	width: var(--bb-thumb);
	height: var(--bb-thumb);
	transform: translateY(-50%);
	border: 1px solid var(--bb-line);
	border-radius: 10px;
	background-color: var(--bb-tint);
	background-image: var(--thumb, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5b7bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E"));
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table tr:not(.has-thumb) td.product-name::before {
	background-size: 22px;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table tr.has-thumb td.product-name::before {
	background-color: #fff;
	animation: bb-thumb-in .25s ease;
}
@keyframes bb-thumb-in {
	from { opacity: .4; }
	to { opacity: 1; }
}

/* if the theme ever outputs real thumbnails, use those instead */
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table td.product-name img {
	display: inline-block !important;
	width: var(--bb-thumb) !important;
	height: var(--bb-thumb) !important;
	margin-right: 14px;
	border: 1px solid var(--bb-line);
	border-radius: 10px;
	object-fit: cover;
	vertical-align: middle;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table tr:has(td.product-name img) td.product-name {
	padding-left: 24px !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table tr:has(td.product-name img) td.product-name::before {
	display: none !important;
}

/* item meta (dates / options) — compact */
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table ul.wc-item-meta {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	margin: 3px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	list-style: none !important;
	order: 0 !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table ul.wc-item-meta li {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--bb-text) !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table ul.wc-item-meta li::before {
	display: none !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table .wc-item-meta-label,
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table ul.wc-item-meta p {
	display: inline !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--bb-text) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	letter-spacing: 0 !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table .wc-item-meta-label {
	margin-right: 4px !important;
	font-weight: 500 !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table ul.wc-item-meta p {
	color: var(--bb-body) !important;
}

/* other plugins' attribute markup (kept from v4, sized to match) */
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table .item-attributes {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 3px 0 0;
	padding: 0;
	color: var(--bb-text);
	font-size: 13px;
	font-weight: 400;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table .item-attributes__item,
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table .item-attributes__item__content {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
	padding: 0;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table .item-attributes__item__content__item {
	margin: 0;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table .item-attributes__item__content__item--text span {
	color: var(--bb-ink);
	font-weight: 600;
}

/* bundled items — indented, smaller */
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tr.bundled_table_item td {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tr.bundled_table_item td.product-name {
	--bb-thumb: 40px;
	min-height: calc(var(--bb-thumb) + 16px);
	padding-left: calc(44px + var(--bb-thumb) + 14px) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tr.bundled_table_item td.product-name a {
	font-weight: 500 !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tr.bundled_table_item td.product-name::before {
	left: 44px;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tbody tr:not(.bundled_table_item) + tr.bundled_table_item td {
	padding-top: 14px !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tbody tr.bundled_table_item:last-child td,
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tbody tr.bundled_table_item:has(+ tr:not(.bundled_table_item)) td {
	padding-bottom: 14px !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table .bundled-product-name,
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table .bundled_table_item_indent {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-indent: 0 !important;
}
/* bundled items repeat the parent's dates — hidden. Delete to show them. */
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table tr.bundled_table_item ul.wc-item-meta li:nth-last-child(-n+2) {
	display: none !important;
}

/* totals */
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tfoot:has(.order-actions--heading) {
	display: none !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tfoot th,
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tfoot td {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	font-size: 14px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tfoot th {
	color: var(--bb-text) !important;
	font-weight: 500 !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tfoot tr:first-child th,
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tfoot tr:first-child td {
	padding-top: 18px !important;
}
/* Total */
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tfoot tr:nth-last-child(2) th,
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tfoot tr:nth-last-child(2) td {
	padding-top: 14px !important;
	padding-bottom: 2px !important;
	border-top: 1px solid var(--bb-line) !important;
	color: var(--bb-ink) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
}
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tfoot tr:nth-last-child(2) td .amount {
	color: var(--bb-primary) !important;
	font-size: 24px !important;
	font-weight: 800 !important;
}

/* Total paid by customer — quiet confirmation line */
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tfoot tr:last-child th,
.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tfoot tr:last-child td {
	padding-top: 0 !important;
	padding-bottom: 18px !important;
	color: var(--bb-text) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
}

/* ---------- 8. Order again — the checkout's outline button ---------- */

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-order-details .bb-order-actions {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center;
	min-height: 0 !important;
	margin: 16px 0 28px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-order-details .bb-order-actions__label {
	display: none !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-order-details .bb-order-actions__buttons {
	display: flex;
	gap: 8px;
	margin: 0;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-order-details .bb-order-actions a.button.order-again {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px !important;
	padding: 0 20px !important;
	border: 1px solid var(--bb-secondary) !important;
	border-radius: var(--bb-field-radius) !important;
	background: var(--bb-surface) !important;
	box-shadow: none !important;
	color: var(--bb-secondary) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	text-transform: none !important;
	transition: background-color .15s ease;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-order-details .bb-order-actions a.button.order-again::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-order-details .bb-order-actions a.button.order-again:hover {
	border-color: var(--bb-secondary) !important;
	background: var(--bb-secondary-soft) !important;
	color: var(--bb-secondary) !important;
}

/* ---------- 9. Message — one card ---------- */

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-order-details > .wooconvo-send {
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--bb-line) !important;
	border-radius: var(--bb-radius) !important;
	background: var(--bb-surface) !important;
	box-shadow: var(--bb-shadow) !important;
	overflow: hidden;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-order-details > .wooconvo-send .chat-container {
	min-height: 0 !important;
	margin: 0 !important;
	padding: var(--bb-pad) var(--bb-pad) 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: left !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) .wooconvo-send ol.chat {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	text-align: left !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) .wooconvo-send .wooconvo-first-message {
	position: relative;
	margin: 0 !important;
	padding: 0 0 0 48px !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--bb-ink) !important;
	font-family: var(--bb-title-font) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0;
	text-align: left !important;
	list-style: none;
}

.woocommerce-order:not(:has(.gform_wrapper)) .wooconvo-send .wooconvo-first-message::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--bb-secondary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316202e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
}

/* subtitle — edit this string to change the wording */
.woocommerce-order:not(:has(.gform_wrapper)) .wooconvo-send .wooconvo-first-message::after {
	content: "Questions about pickup, placement or timing? Write to us here and we'll reply by email.";
	display: block;
	position: static;
	margin-top: 2px;
	max-width: 60ch;
	color: var(--bb-text);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.55;
}

.woocommerce-order:not(:has(.gform_wrapper)) #wooconvo-send.wooconvo-send {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) #wooconvo-send .bottom-bottons {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	padding: 18px var(--bb-pad) var(--bb-pad) !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

#wooconvo-send textarea.wooconvo-textarea {
	order: 1;
	flex: 1 1 100%;
	width: 100% !important;
	min-height: 104px;
	margin: 0 !important;
	padding: 12px 14px !important;
	border: 1px solid var(--bb-field) !important;
	border-radius: var(--bb-field-radius) !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--bb-ink) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	resize: vertical;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#wooconvo-send textarea.wooconvo-textarea::placeholder {
	color: var(--bb-placeholder);
	opacity: 1;
}

#wooconvo-send textarea.wooconvo-textarea:focus {
	border-color: var(--bb-primary) !important;
	background: #fff !important;
	outline: none !important;
	box-shadow: 0 0 0 3px var(--bb-primary-ring) !important;
}

#wooconvo-send .nm-uploader-area {
	order: 2;
	flex: 0 1 auto;
	position: relative !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

#wooconvo-send .nm-uploader-area .container_buttons,
#wooconvo-send .nm-uploader-area .btn_center {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	text-align: left !important;
}

#nm-uploader-area-wooconvo_file a.select_button {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	margin: 0 !important;
	min-height: 44px;
	padding: 0 14px !important;
	border: 1px dashed var(--bb-field) !important;
	border-radius: var(--bb-field-radius) !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--bb-text) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: none !important;
}

#nm-uploader-area-wooconvo_file a.select_button:hover {
	border-color: var(--bb-primary) !important;
	color: var(--bb-primary) !important;
}

#nm-uploader-area-wooconvo_file a.select_button .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

#wooconvo-send .moxie-shim {
	top: 0 !important;
	left: 0 !important;
}

#wooconvo-send .filelist {
	margin: 0 !important;
}

#wooconvo-send .filelist:empty,
.woocommerce-order:not(:has(.gform_wrapper)) #sending-order-message:empty {
	display: none !important;
}

#wooconvo-send input.nm-wooconvo-send,
#wooconvo-send input[type="submit"].nm-wooconvo-send {
	order: 3;
	width: auto !important;
	height: auto !important;
	min-width: 120px;
	min-height: 48px;
	margin: 0 0 0 auto !important;
	padding: 0 26px !important;
	border: none !important;
	border-radius: var(--bb-btn-radius) !important;
	background: var(--bb-primary) !important;
	box-shadow: none !important;
	color: var(--bb-on-primary) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background-color .15s ease;
}

#wooconvo-send input.nm-wooconvo-send:hover,
#wooconvo-send input[type="submit"].nm-wooconvo-send:hover {
	background: var(--bb-primary-hover) !important;
}

/* ---------- 10. Addresses + additional information ---------- */

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details {
	margin-top: 28px;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details .addresses,
.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details .col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
	margin: 0;
}

/* billing only (no shipping column) → full width */
.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details > address,
.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details .col2-set:not(:has(.col-2)) {
	grid-template-columns: minmax(0, 1fr);
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details .col2-set::before,
.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details .col2-set::after {
	display: none;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details .woocommerce-column,
.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details .col-1,
.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details .col-2 {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: var(--bb-pad);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	background: var(--bb-surface);
	box-shadow: var(--bb-shadow);
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details .woocommerce-column__title {
	margin-bottom: 10px !important;
	padding: 0 !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details address {
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	color: var(--bb-body);
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details address p {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.6;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details address p::before {
	display: none !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details address a {
	color: var(--bb-body);
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details address a:hover {
	color: var(--bb-ink);
}

/* "Additional Information" (heading + paragraphs after the address card)
   styled as a matching card */
.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details ~ h2,
.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details ~ h3 {
	margin: 16px 0 0 !important;
	padding: var(--bb-pad) var(--bb-pad) 10px !important;
	border: 1px solid var(--bb-line) !important;
	border-bottom: 0 !important;
	border-radius: var(--bb-radius) var(--bb-radius) 0 0 !important;
	background: var(--bb-surface) !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details ~ p,
.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details ~ div:not(.clear) {
	margin: 0 !important;
	padding: 0 var(--bb-pad) 10px !important;
	border-left: 1px solid var(--bb-line) !important;
	border-right: 1px solid var(--bb-line) !important;
	background: var(--bb-surface) !important;
	color: var(--bb-body) !important;
	font-size: 14px !important;
	line-height: 1.65 !important;
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details ~ p:last-child,
.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details ~ div:not(.clear):last-child {
	padding-bottom: var(--bb-pad) !important;
	border-bottom: 1px solid var(--bb-line) !important;
	border-radius: 0 0 var(--bb-radius) var(--bb-radius) !important;
	box-shadow: var(--bb-shadow);
}

.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details ~ * strong,
.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details ~ * b {
	color: var(--bb-ink);
	font-weight: 600;
}

/* ---------- 11. Small screens ---------- */

@media (max-width: 767px) {
	.woocommerce-order:not(:has(.gform_wrapper)) ul.order_details,
	.woocommerce-order:not(:has(.gform_wrapper)) ul.woocommerce-order-overview {
		grid-template-columns: repeat(2, 1fr);
	}

	.woocommerce-order:not(:has(.gform_wrapper)) ul.order_details li:nth-child(odd),
	.woocommerce-order:not(:has(.gform_wrapper)) ul.woocommerce-order-overview li:nth-child(odd) {
		border-left: none;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) ul.order_details li:nth-child(n + 3),
	.woocommerce-order:not(:has(.gform_wrapper)) ul.woocommerce-order-overview li:nth-child(n + 3) {
		border-top: 1px solid var(--bb-line);
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details .addresses,
	.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details .col2-set {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 575px) {
	.woocommerce-order:not(:has(.gform_wrapper)) {
		--bb-thumb: 44px;
		--bb-pad: 18px;
		--bb-radius: 12px;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-thankyou-order-received {
		padding: 28px var(--bb-pad) 24px;
		font-size: 22px;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc {
		padding: var(--bb-pad);
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc::after {
		position: static;
		display: inline-block;
		margin-bottom: 12px;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc thead th {
		padding-right: 0;
		font-size: 20px;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc td a {
		display: block;
		text-align: center;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details th,
	.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details td {
		padding-left: 16px !important;
		padding-right: 16px !important;
		font-size: 14px !important;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details td.product-name {
		padding-left: calc(16px + var(--bb-thumb) + 12px) !important;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table td.product-name::before {
		left: 16px;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tr.bundled_table_item td.product-name {
		--bb-thumb: 34px;
		padding-left: calc(28px + var(--bb-thumb) + 10px) !important;
		font-size: 13px !important;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .responsive-table table.order_details tr.bundled_table_item td.product-name::before {
		left: 28px;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-order-details .bb-order-actions a.button.order-again {
		width: 100%;
		justify-content: center;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-order-details > .wooconvo-send .chat-container {
		padding: var(--bb-pad) var(--bb-pad) 0 !important;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) #wooconvo-send .bottom-bottons {
		padding: 14px var(--bb-pad) var(--bb-pad) !important;
	}

	#wooconvo-send input.nm-wooconvo-send,
	#wooconvo-send input[type="submit"].nm-wooconvo-send {
		flex: 1 1 100%;
		margin: 0 !important;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details ~ h2,
	.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details ~ h3 {
		padding: var(--bb-pad) var(--bb-pad) 10px !important;
	}

	.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details ~ p,
	.woocommerce-order:not(:has(.gform_wrapper)) .woocommerce-customer-details ~ div:not(.clear) {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* ---------- 12. Print ---------- */

@media print {
	.woocommerce-order:not(:has(.gform_wrapper))::before,
	.woocommerce-order:not(:has(.gform_wrapper)) .wooconvo-send,
	.woocommerce-order:not(:has(.gform_wrapper)) #wooconvo-send,
	.woocommerce-order:not(:has(.gform_wrapper)) .bb-order-actions,
	.woocommerce-order:not(:has(.gform_wrapper)) .waiverdesc td a {
		display: none !important;
	}
}/* =========================================================
   Reservety — Contract signing page (Gravity Forms)

   The rental-agreement page shown after checkout: an order-received page
   holding a Gravity Form (agreement text + consents + name + signature).
   Visually matched to reservety-checkout.css.

   THE AGREEMENT TEXT IS NOT STYLED. It lives in the form's HTML field
   and changes per customer / version, so only its frame is set (a
   bordered, scrollable document box). Everything inside it keeps its
   own styling.

   Works for any form on this page — no form or field IDs are used, only
   Gravity Forms' standard classes. Scope: an order page that contains a
   Gravity Form (.woocommerce-order:has(.gform_wrapper)); thank-you-page.css
   skips that page, so the two never overlap.

   COLORS — WoodMart › Theme Settings › Styles and colors
     Primary   (--wd-primary-color)      Submit, ticks, focus, chosen rows
     Secondary (--wd-alternative-color)  accents
   ========================================================= */


/* ---------- 1. Tokens (same values as the checkout) ---------- */
.woocommerce-order:has(.gform_wrapper) {
	--bb-primary: var(--wd-primary-color, #1f5fd6);
	--bb-secondary: var(--wd-alternative-color, #0e2a5c);
	--bb-on-primary: var(--btn-accented-color, #fff);
	--bb-on-primary: oklch(from var(--bb-primary) clamp(0, (l - 0.62) * -1000, 1) 0 h);

	--bb-primary-soft: #eef4ff;
	--bb-primary-soft: color-mix(in srgb, var(--bb-primary) 9%, #fff);
	--bb-primary-ring: rgba(31, 95, 214, .25);
	--bb-primary-ring: color-mix(in srgb, var(--bb-primary) 28%, transparent);
	--bb-primary-hover: var(--bb-primary);
	--bb-primary-hover: color-mix(in srgb, var(--bb-primary) 84%, #000);

	--bb-text: #16202e;
	--bb-muted: #4a5666;
	--bb-placeholder: #7a8594;
	--bb-border: #c3ccd8;
	--bb-line: #dce2ea;
	--bb-bg: #f4f6f9;
	--bb-doc-bg: #fbfcfd;
	--bb-card: #fff;
	--bb-error: #b42318;
	--bb-error-soft: #fff1ef;
	--bb-success: #1e7b45;
	--bb-success-soft: #e7f5ec;

	--bb-radius: 14px;
	--bb-row-radius: 10px;
	--bb-input-radius: 8px;
	--bb-input-h: 48px;
	--bb-pad: 32px;
	--bb-font: var(--wd-text-font, inherit);
	--bb-title-font: var(--wd-title-font, var(--wd-text-font, inherit));

	max-width: 880px;
	margin-inline: auto;
	padding-block: 8px 40px;
}

body.woocommerce-order-received:has(.woocommerce-order .gform_wrapper) .main-page-wrapper,
body.woocommerce-order-received:has(.woocommerce-order .gform_wrapper) .wd-page-content {
	background-color: #f4f6f9;
}


/* ---------- 2. Page heading ---------- */
.woocommerce-order:has(.gform_wrapper) .gform_heading {
	margin: 0 0 20px !important;
	padding: 0 !important;
}

.woocommerce-order:has(.gform_wrapper) .gform_title {
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: var(--bb-title-font) !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--bb-text) !important;
}

.woocommerce-order:has(.gform_wrapper) .gform_description:empty {
	display: none;
}

.woocommerce-order:has(.gform_wrapper) .gform_description {
	margin: 0 0 6px !important;
	font-size: 15px;
	line-height: 1.55;
	color: var(--bb-muted);
}

.woocommerce-order:has(.gform_wrapper) .gform_required_legend {
	margin: 0 !important;
	font-size: 13px !important;
	color: var(--bb-muted) !important;
}

.woocommerce-order:has(.gform_wrapper) .gfield_required,
.woocommerce-order:has(.gform_wrapper) .gfield_required_asterisk {
	color: var(--bb-error) !important;
	font-weight: 600;
}


/* ---------- 3. The form card ---------- */
.woocommerce-order:has(.gform_wrapper) .gform_wrapper form {
	margin: 0;
	padding: var(--bb-pad);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	background: var(--bb-card);
	box-shadow: none;
}

.woocommerce-order:has(.gform_wrapper) .gform_wrapper,
.woocommerce-order:has(.gform_wrapper) .gform_wrapper :is(input, textarea, select, button, label, legend) {
	font-family: var(--bb-font);
}

.woocommerce-order:has(.gform_wrapper) .gform_fields {
	row-gap: 24px !important;
	column-gap: 16px !important;
}


/* ---------- 4. Agreement document — FRAME ONLY ----------
   A bordered, scrollable box so the signing section stays close by.
   Nothing inside .gfield_html is styled. To show the full agreement
   without scrolling, delete max-height and overflow below. */
.woocommerce-order:has(.gform_wrapper) .gfield--type-html {
	box-sizing: border-box;
	max-height: 62vh;
	overflow: auto;
	overscroll-behavior: contain;
	margin: 0 !important;
	padding: 24px 28px !important;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-row-radius);
	background: var(--bb-doc-bg);
	scrollbar-gutter: stable;
}

.woocommerce-order:has(.gform_wrapper) .gfield--type-html:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--bb-primary-ring);
}


/* ---------- 5. Section title ("Select or initial each…") ---------- */
.woocommerce-order:has(.gform_wrapper) .gsection {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.woocommerce-order:has(.gform_wrapper) .gsection_title {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: var(--bb-title-font) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--bb-text) !important;
}

.woocommerce-order:has(.gform_wrapper) .gsection_description {
	margin-top: 4px;
	font-size: 14px;
	color: var(--bb-muted);
}


/* ---------- 6. Consent statements — the checkout's selectable rows ---------- */
.woocommerce-order:has(.gform_wrapper) .gfield--type-consent {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* consents follow each other closely, as one list */
.woocommerce-order:has(.gform_wrapper) .gfield--type-consent + .gfield--type-consent {
	margin-top: -14px !important;
}

.woocommerce-order:has(.gform_wrapper) .ginput_container_consent {
	position: relative;
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	margin: 0 !important;
	padding: 14px 16px !important;
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-row-radius);
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.woocommerce-order:has(.gform_wrapper) .ginput_container_consent:hover {
	border-color: var(--bb-primary);
}

.woocommerce-order:has(.gform_wrapper) .ginput_container_consent:has(input[type="checkbox"]:checked) {
	border-color: var(--bb-primary);
	box-shadow: inset 0 0 0 1px var(--bb-primary);
	background: var(--bb-primary-soft);
}

.woocommerce-order:has(.gform_wrapper) .ginput_container_consent input[type="checkbox"] {
	flex: 0 0 20px;
	width: 20px !important;
	height: 20px !important;
	margin: 1px 0 0 !important;
	accent-color: var(--bb-primary);
	cursor: pointer;
}

.woocommerce-order:has(.gform_wrapper) .ginput_container_consent input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--bb-primary-ring);
	border-radius: 4px;
}

.woocommerce-order:has(.gform_wrapper) .gfield_consent_label {
	flex: 1;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	color: var(--bb-text) !important;
	cursor: pointer;
}

/* the whole row toggles the checkbox, not just the text */
.woocommerce-order:has(.gform_wrapper) .gfield_consent_label::after {
	content: "";
	position: absolute;
	inset: 0;
}


/* ---------- 7. Labels ---------- */
.woocommerce-order:has(.gform_wrapper) .gfield_label {
	display: block;
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--bb-text) !important;
}

.woocommerce-order:has(.gform_wrapper) .gform-field-label--type-sub {
	margin: 0 0 6px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--bb-muted) !important;
}

.woocommerce-order:has(.gform_wrapper) .gfield_description {
	margin-top: 8px !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.5;
	color: var(--bb-muted) !important;
}


/* ---------- 8. Text fields (name etc.) — the checkout's 48px field ---------- */
.woocommerce-order:has(.gform_wrapper) .gfield :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select),
.woocommerce-order:has(.gform_wrapper) .gfield textarea {
	box-sizing: border-box;
	width: 100% !important;
	height: var(--bb-input-h) !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1px solid var(--bb-border) !important;
	border-radius: var(--bb-input-radius) !important;
	background: #fff !important;
	box-shadow: none !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: var(--bb-text) !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.woocommerce-order:has(.gform_wrapper) .gfield textarea {
	height: auto !important;
	min-height: 104px;
	padding: 12px 14px !important;
}

.woocommerce-order:has(.gform_wrapper) .gfield :is(input, textarea, select)::placeholder {
	color: var(--bb-placeholder);
	opacity: 1;
}

.woocommerce-order:has(.gform_wrapper) .gfield :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea):focus {
	border-color: var(--bb-primary) !important;
	box-shadow: 0 0 0 3px var(--bb-primary-ring) !important;
	outline: none !important;
}

/* read-only (e.g. the auto-filled date): looks filled-in, not editable */
.woocommerce-order:has(.gform_wrapper) .gfield input[readonly] {
	max-width: 240px;
	background: var(--bb-bg) !important;
	color: var(--bb-muted) !important;
	cursor: default;
}

.woocommerce-order:has(.gform_wrapper) .gfield input[readonly]:focus {
	border-color: var(--bb-border) !important;
	box-shadow: none !important;
}

/* name: First | Last side by side */
.woocommerce-order:has(.gform_wrapper) .ginput_container--name {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px !important;
	margin: 0 !important;
}

.woocommerce-order:has(.gform_wrapper) .ginput_container--name > span {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-order:has(.gform_wrapper) fieldset.gfield {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}


/* ---------- 9. Signature pad ----------
   The pad's drawing size is set by the plugin and is NOT resized here
   (stretching a canvas with CSS breaks where the pen lands). Only its
   frame changes. */
.woocommerce-order:has(.gform_wrapper) .gfield--type-signature .gfield_signature_container canvas {
	border: 1.5px dashed var(--bb-border) !important;
	border-radius: var(--bb-input-radius);
	background-color: #fff !important;
	touch-action: none;
}

.woocommerce-order:has(.gform_wrapper) .gfield--type-signature .gfield_signature_container:hover canvas {
	border-color: var(--bb-primary) !important;
}

.woocommerce-order:has(.gform_wrapper) .gfield--type-signature [id$="_toolbar"] {
	margin: 6px 0 0 !important;
}

.woocommerce-order:has(.gform_wrapper) .gfield--type-signature [id$="_resetbutton"] {
	opacity: .65;
}

.woocommerce-order:has(.gform_wrapper) .gfield--type-signature [id$="_resetbutton"]:hover {
	opacity: 1;
}


/* ---------- 10. Submit — the checkout's Place order button ---------- */
.woocommerce-order:has(.gform_wrapper) .gform_footer {
	margin: 28px 0 0 !important;
	padding: 24px 0 0 !important;
	border-top: 1px solid var(--bb-line);
}

.woocommerce-order:has(.gform_wrapper) .gform_footer :is(input[type="submit"], button[type="submit"], .gform_button) {
	display: block;
	width: 100% !important;
	min-height: 56px;
	margin: 0 !important;
	padding: 0 24px !important;
	border: 0 !important;
	border-radius: var(--bb-row-radius) !important;
	background: var(--bb-primary) !important;
	color: var(--bb-on-primary) !important;
	font-family: var(--bb-font);
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color .15s ease;
}

.woocommerce-order:has(.gform_wrapper) .gform_footer :is(input[type="submit"], button[type="submit"], .gform_button):hover {
	background: var(--bb-primary-hover) !important;
}

.woocommerce-order:has(.gform_wrapper) .gform_footer :is(input[type="submit"], button[type="submit"], .gform_button):focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px var(--bb-primary-ring) !important;
}

.woocommerce-order:has(.gform_wrapper) .gform_ajax_spinner {
	margin: 12px auto 0;
	display: block;
}


/* ---------- 11. Errors + confirmation ---------- */
.woocommerce-order:has(.gform_wrapper) .gform_validation_errors {
	margin: 0 0 20px !important;
	padding: 14px 18px !important;
	border: 0 !important;
	border-radius: var(--bb-row-radius) !important;
	background: var(--bb-error-soft) !important;
	box-shadow: none !important;
}

.woocommerce-order:has(.gform_wrapper) .gform_validation_errors :is(h2, .gform_submission_error) {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #8a1c12 !important;
}

.woocommerce-order:has(.gform_wrapper) .gfield_error :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
	border-color: var(--bb-error) !important;
	background: var(--bb-error-soft) !important;
}

.woocommerce-order:has(.gform_wrapper) .gfield_error .ginput_container_consent {
	border-color: var(--bb-error);
	background: var(--bb-error-soft);
}

.woocommerce-order:has(.gform_wrapper) .gfield_error canvas {
	border-color: var(--bb-error) !important;
}

.woocommerce-order:has(.gform_wrapper) .gfield_validation_message,
.woocommerce-order:has(.gform_wrapper) .validation_message {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 13px !important;
	color: var(--bb-error) !important;
}

/* after submitting */
.woocommerce-order:has(.gform_confirmation_wrapper) .gform_confirmation_message,
.woocommerce-order .gform_confirmation_message {
	padding: 24px var(--bb-pad, 32px);
	border: 1px solid var(--bb-line, #dce2ea);
	border-radius: var(--bb-radius, 14px);
	background: #fff;
	font-size: 16px;
	line-height: 1.55;
	color: var(--bb-text, #16202e);
}


/* ---------- 12. Phones ---------- */
@media (max-width: 640px) {
	.woocommerce-order:has(.gform_wrapper) {
		--bb-pad: 18px;
		--bb-radius: 12px;
	}

	.woocommerce-order:has(.gform_wrapper) .gform_title {
		font-size: 22px !important;
	}

	.woocommerce-order:has(.gform_wrapper) .gfield--type-html {
		max-height: 55vh;
		padding: 18px !important;
	}

	.woocommerce-order:has(.gform_wrapper) .ginput_container--name {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-order:has(.gform_wrapper) .gfield input[readonly] {
		max-width: none;
	}

	/* a fixed-width signature pad must never push the page sideways */
	.woocommerce-order:has(.gform_wrapper) .gfield--type-signature {
		overflow-x: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-order:has(.gform_wrapper) :is(.ginput_container_consent, .gform_button, input) {
		transition: none !important;
	}
}

@media print {
	.woocommerce-order:has(.gform_wrapper) .gfield--type-html {
		max-height: none;
		overflow: visible;
		border: 0;
		padding: 0 !important;
		background: none;
	}
}
/* =========================================================
   Reservety — Add-on form (options and add-ons)

   Applies to every single product page, on any site. Covers every
   option section the booking plugin renders — checkboxes, radio buttons,
   select dropdowns, text fields — found by shape (any field that is not
   the date picker), so it works however the plugin numbers them.

   Visually matched to reservety-checkout.css: add-on rows look like the
   checkout's delivery-method rows (1px border, 10px corners, Primary
   outline + soft tint when chosen), fields are the checkout's 48px
   fields, prices are neutral like the checkout's line items.
   Standalone: paste on its own or alongside the calendar and
   add-to-cart files. Each card is titled by its own label text.
   ========================================================= */

/* ---------- Theme colors (same roles + values as the checkout) ----------
   Primary color    (--wd-primary-color)      chosen rows, checkboxes, focus
   Secondary color  (--wd-alternative-color)  brand accents
   Identical to the token block in the calendar and add-to-cart files,
   so loading them together changes nothing. */
.single-product-page {
  --rd-primary: var(--wd-primary-color, var(--wd-alternative-color, #1f5fd6));
  --rd-secondary-brand: var(--wd-alternative-color, var(--wd-primary-color, #0e2a5c));

  --rd-on-primary: var(--btn-accented-color, #fff);
  --rd-on-primary: oklch(from var(--rd-primary) clamp(0, (l - 0.62) * -1000, 1) 0 h);

  --rd-primary-soft: #eef4ff;
  --rd-primary-soft: color-mix(in srgb, var(--rd-primary) 9%, #fff);
  --rd-primary-tint: #f6f9ff;
  --rd-primary-tint: color-mix(in srgb, var(--rd-primary) 5%, #fff);
  --rd-primary-ring: rgba(31, 95, 214, .25);
  --rd-primary-ring: color-mix(in srgb, var(--rd-primary) 28%, transparent);

  /* neutrals — identical to the checkout skin */
  --rd-ink: #16202e;
  --rd-text: #4a5666;
  --rd-muted: #5f6b7a;
  --rd-placeholder: #7a8594;
  --rd-card-bg: #fff;
  --rd-line: #dce2ea;
  --rd-field: #c3ccd8;
  --rd-field-hover: #9aa5b4;

  --rd-font-body: var(--wd-text-font, inherit);
  --rd-font-title: var(--wd-title-font, var(--wd-text-font, inherit));

  --rd-radius: 14px;
  --rd-row-radius: 10px;
  --rd-field-radius: 8px;
  --rd-field-h: 48px;
  --rd-pad: 28px;
}

@media (max-width: 768px) {
  .single-product-page {
    --rd-pad: 18px;
    --rd-radius: 12px;
  }
}

.single-product-page form.cart {
  display: block;
}
/* ---------- Which sections this styles ----------
   Every options section the plugin outputs, found by shape rather than
   by id: any field that is NOT the date picker. That way it works on a
   product with one add-on, several, or dropdown upgrades, whatever the
   plugin numbered them. */

/* Card shell. The plugin wraps some sections in .tm-box and leaves
   others bare, so both are covered. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-box,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)):not(:has(.tm-box)) > .cpf-section {
  position: relative;
  box-sizing: border-box;
  display: block !important;
  width: 100% !important;
  background: var(--rd-card-bg) !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-radius) !important;
  box-shadow: none !important;
  padding: var(--rd-pad);
  margin: 0 0 20px !important;
}

/* Section title — the first label in the card */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-box > [class*="cpf-type-"] > .tm-epo-field-label,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)):not(:has(.tm-box)) > .cpf-section > [class*="cpf-type-"] > .tm-epo-field-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rd-font-title);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rd-ink);
  margin: 0 0 16px;
}
/* Sub-labels inside the card sit smaller than the section title */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-box > [class*="cpf-type-"]:not(:first-of-type) > .tm-epo-field-label,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)):not(:has(.tm-box)) > .cpf-section > [class*="cpf-type-"]:not(:first-of-type) > .tm-epo-field-label {
  font-family: var(--rd-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 6px;            /* the gap above comes from the element spacing rule */
}

/* The section heading. When the plugin outputs one it is an
   h3.tm-section-label (e.g. "Add-ons") placed directly in the card —
   that becomes the card title. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-box > .tm-section-label,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)):not(:has(.tm-box)) > .cpf-section > .tm-section-label {
  display: block;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--rd-font-title);
  font-size: 18px !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rd-ink);
}

/* With that heading present, every element's own label inside the card
   ("ABC", "Never Mind", "Now") is a field label, never a second title —
   whichever element comes first. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-box:has(> .tm-section-label) > [class*="cpf-type-"] > .tm-epo-field-label,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)):not(:has(.tm-box)) > .cpf-section:has(> .tm-section-label) > [class*="cpf-type-"] > .tm-epo-field-label {
  display: block;
  font-family: var(--rd-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--rd-ink);
  margin: 0 0 6px;
}

/* Space between elements in one card (checkbox list → text field → …) */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) [class*="cpf-type-"] + .cpfclear + [class*="cpf-type-"],
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) [class*="cpf-type-"] + [class*="cpf-type-"] {
  margin-top: 20px !important;
}

/* Small helper line under a sub-label ("select 1 game") */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .cpf-type-header p,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-description,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tc-description {
  font-family: var(--rd-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--rd-text);
  margin: 0 0 10px;
}

/* ---------- Strip the plugin's own spacing ---------- */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) > .cpf-section,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) [class*="cpf-type-"] {
  box-sizing: border-box !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0;
  margin: 0;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm_padding {
  display: none;
}

/* ---------- Keep each element inside its own space ----------
   Fixes "only half the field is clickable". Something from the element
   above was reaching over the next field and taking its clicks:
   - the plugin floats its option rows, and floats can hang out of their
     block and sit on top of the field below;
   - the plugin's round checkbox puts the real (invisible) input in a
     position:absolute box. Its wrapper wasn't a positioning parent, so
     the input was sized/placed against the whole card instead.
   Each element now contains its own floats (flow-root) and stacks in
   page order (position + z-index 0), so a later field always sits on
   top of anything the element above it draws. No padding hack needed. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) [class*="cpf-type-"] {
  display: flow-root !important;
  position: relative;
  z-index: 0;
  clear: both;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-ul-wrap {
  display: block !important;
  float: none !important;
  width: 100% !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both;
}
/* the custom checkbox / radio: keep the real input inside its 20px box */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style-wrapper {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  vertical-align: middle;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style-wrapper > input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
/* hidden elements (conditional logic) take no space and no clicks */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) [class*="cpf-type-"][style*="display: none"],
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) [class*="cpf-type-"][style*="display:none"] {
  display: none !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-ul-wrap {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Select dropdowns ----------
   Matched to the date and zip fields: same height, border, radius and
   focus color. The chevron stays a neutral gray because a color inside
   an SVG data URI cannot read a CSS variable. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) select,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) select.tmcp-field,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) select.tmcp-select,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap select {
  display: block !important;
  margin: 0 !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box !important;
  flex: 1 1 auto;          /* shares the row with the price */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  height: var(--rd-field-h) !important;
  border: 1px solid var(--rd-field) !important;
  border-radius: var(--rd-field-radius) !important;
  box-shadow: none !important;
  background: var(--rd-card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px 18px no-repeat !important;
  padding: 0 44px 0 14px !important;
  font-family: var(--rd-font-body);
  font-size: 16px !important; /* 16px = no iOS zoom on focus */
  line-height: 46px !important;
  color: var(--rd-ink) !important;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) select:hover {
  border-color: var(--rd-field-hover) !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) select:focus {
  border-color: var(--rd-primary) !important;
  box-shadow: 0 0 0 3px var(--rd-primary-ring) !important;
  outline: none;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) select option {
  font-family: var(--rd-font-body);
  color: var(--rd-ink);
}

/* ---------- Text and number fields in an options section ---------- */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) input[type="text"].tmcp-field,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) input[type="number"].tmcp-field,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) input[type="email"].tmcp-field,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) input[type="tel"].tmcp-field,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) input.tmcp-textfield,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) textarea.tmcp-field {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  height: var(--rd-field-h) !important;
  border: 1px solid var(--rd-field) !important;
  border-radius: var(--rd-field-radius) !important;
  box-shadow: none !important;
  background: var(--rd-card-bg) !important;
  padding: 0 14px !important;
  font-family: var(--rd-font-body);
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--rd-ink) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) textarea.tmcp-field {
  height: auto !important;
  padding: 12px 14px !important;
  line-height: 1.6;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) input[type="text"].tmcp-field:focus,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) input[type="number"].tmcp-field:focus,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) input[type="email"].tmcp-field:focus,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) input[type="tel"].tmcp-field:focus,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) input.tmcp-textfield:focus,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) textarea.tmcp-field:focus {
  border-color: var(--rd-primary) !important;
  box-shadow: 0 0 0 3px var(--rd-primary-ring) !important;
  outline: none;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field::placeholder {
  color: var(--rd-placeholder);
  opacity: 1;
}

/* ---------- Field + price row ----------
   A dropdown sits beside its price; a checkbox fills the row. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  row-gap: 10px;
  gap: 12px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap + .tmcp-field-wrap {
  margin-top: 8px;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap > label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

/* Text fields and dropdowns: the plugin wraps the control in a <label>
   too. That label must NOT be the flex row above (that layout is for
   checkbox / radio rows) — as a flex row it shrinks the field and gives
   it a pointer cursor. Here it is a plain block, so the control fills
   the row and behaves like a normal field. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap > label:has(> select, > textarea, > input.tmcp-textfield, > input[type="text"], > input[type="number"], > input[type="email"], > input[type="tel"]) {
  display: block !important;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  cursor: auto;
}

/* Empty price slots (fields with no price) took up a 12px gap beside
   the field, so text fields and dropdowns stopped short of the card's
   edge. Hidden while empty; a real price still shows. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tc-price:empty {
  display: none !important;
}

/* =========================================================
   Plugin wrappers that change the row structure
   ========================================================= */

/* ---------- .tm-field-display ----------
   When an option allows a quantity, the plugin puts the field inside an
   extra <div class="tm-field-display"> (next to the stepper). Without
   this rule that wrapper shrank to its content — the field was only
   half as wide, and only that half was clickable. It is now the row's
   main area: it fills the space and lays out like the row itself. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap > .tm-field-display {
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* labels inside that wrapper behave like labels directly in the row */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-field-display > label {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-field-display > label:has(> select, > textarea, > input.tmcp-textfield, > input[type="text"], > input[type="number"], > input[type="email"], > input[type="tel"]) {
  display: block !important;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  cursor: auto;
}

/* ---------- Quantity stepper (.tm-quantity) ----------
   Comes first in the markup and carries tm-right (a float). Shown by the
   plugin only once its option is chosen. Here it is never floated, sits
   at the right end of the row, and matches the checkout's fields. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap > .tm-quantity {
  order: 2;
  float: none !important;
  flex: 0 0 auto;
  align-items: stretch;
  height: 40px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--rd-field);
  border-radius: var(--rd-field-radius);
  background: var(--rd-card-bg);
}
/* the plugin toggles inline display; give it the right layout when shown */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap > .tm-quantity:not([style*="display: none"]):not([style*="display:none"]) {
  display: inline-flex !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap > .tm-quantity:focus-within {
  border-color: var(--rd-primary);
  box-shadow: 0 0 0 3px var(--rd-primary-ring);
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-quantity .bb-qty-stepper__btn {
  width: 36px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--rd-font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--rd-text) !important;
  cursor: pointer;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-quantity .bb-qty-stepper__btn:hover {
  background: var(--rd-primary-soft) !important;
  color: var(--rd-primary) !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-quantity input.tm-qty {
  width: 44px !important;
  min-width: 0;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--rd-font-body);
  font-size: 16px !important;
  font-weight: 600;
  color: var(--rd-ink) !important;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-quantity input.tm-qty::-webkit-outer-spin-button,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-quantity input.tm-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-quantity input.tm-qty:focus {
  outline: none;
}

/* ---------- Text before / after the price ----------
   ("from", "/day", …). Quiet supporting text that sits tight against
   the price; the plugin's .tm-hidden still hides unused ones. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-hidden {
  display: none !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .before-amount,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .after-amount {
  flex: 0 0 auto;
  font-family: var(--rd-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--rd-text);
  white-space: nowrap;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .before-amount + .tc-price,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tc-price + .after-amount {
  margin-left: -8px;      /* 4px from the price instead of the row's 12px gap */
}

/* ---------- Linked-product thumbnail ---------- */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) img.tm-linked-product-thumb {
  flex: 0 0 auto;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  object-fit: cover;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-field-radius);
  background: #fff;
}

/* ---------- Divider element ----------
   A real thin rule between elements. Spacing above and below comes from
   the same 20px element gap, so dividers never stack extra space. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .cpf-type-divider {
  height: 0;
  min-height: 0;
  margin-top: 20px !important;
  padding: 0 !important;
  border-top: 1px solid var(--rd-line);
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .cpf-type-divider > * {
  display: none !important;
}

/* ---------- Checkbox and radio rows ----------
   These get the bordered, tinted row; dropdown rows do not, since the
   select already draws its own box. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="checkbox"]),
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="radio"]) {
  justify-content: space-between;
  min-height: 52px;
  border: 1px solid var(--rd-field);
  border-radius: var(--rd-row-radius);
  background: var(--rd-card-bg);
  padding: 12px 14px;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="checkbox"]):hover,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="radio"]):hover {
  border-color: var(--rd-primary);
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input:checked) {
  border-color: var(--rd-primary);
  box-shadow: inset 0 0 0 1px var(--rd-primary);
  background: var(--rd-primary-soft);
}
/* keyboard focus on a row: the checkout's soft ring */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="checkbox"]:focus-visible),
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="radio"]:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px var(--rd-primary-ring);
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input:checked:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--rd-primary), 0 0 0 3px var(--rd-primary-ring);
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-label {
  font-family: var(--rd-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rd-ink);
}

/* Native controls follow the theme too */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) input,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) select {
  accent-color: var(--rd-primary);
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style.round {
  border-radius: 5px !important;
  border-color: var(--rd-field) !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) input:checked + .tm-epo-style.round {
  background: var(--rd-primary) !important;
  border-color: var(--rd-primary) !important;
  color: var(--rd-on-primary) !important;
}

/* ---------- Price ---------- */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tc-price {
  font-family: var(--rd-font-body);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--rd-ink) !important;
  white-space: nowrap;
  flex: 0 0 auto;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tc-price.hidden {
  display: none;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tc-price .amount::before {
  content: "+";
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap {
    flex-wrap: wrap;
  }
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="checkbox"]),
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="radio"]) {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) select,
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field,
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap {
    transition: none;
  }
}


/* =========================================================
   Refinement — one consistent row design
   Every checkbox / radio option renders the same way:
     [checkbox] [thumbnail?] Name ............ before  +$29.00  after
   whether or not the plugin uses its "linked product card" style.
   ========================================================= */

/* ---------- The row ---------- */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="checkbox"]),
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="radio"]) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center !important;
  gap: 14px;
  box-sizing: border-box !important;
  min-height: 68px;               /* same for every row: 44px thumbnail + 12px padding top and bottom */
  padding: 11px 16px !important;  /* 11px + 1px border = 12px */
  background: var(--rd-card-bg) !important;
  background-image: none !important;
  border: 1px solid var(--rd-field) !important;
  border-radius: var(--rd-row-radius) !important;
  box-shadow: none !important;
  cursor: pointer;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="checkbox"]):hover,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="radio"]):hover {
  border-color: var(--rd-primary) !important;
}
/* chosen: Primary outline + soft tint, exactly like the checkout's rows */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="checkbox"]:checked),
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="radio"]:checked) {
  border-color: var(--rd-primary) !important;
  box-shadow: inset 0 0 0 1px var(--rd-primary) !important;
  background: var(--rd-primary-soft) !important;
}

/* The plugin's linked-product "card" style (blue gradient, price on its
   own line) is flattened into the same row as every other option. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap.tm-linked-card-style::before,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap.tm-linked-card-style::after {
  content: none !important;
  display: none !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap > label,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-field-display > label {
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  width: auto !important;
  background: none !important;
  padding: 0 !important;
}

/* ---------- Name ---------- */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap .tm-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--rd-ink) !important;
  overflow-wrap: anywhere;
}

/* ---------- Thumbnail ---------- */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) img.tm-linked-product-thumb {
  box-sizing: border-box !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  padding: 3px;
  object-fit: contain;
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-field-radius) !important;
  background: #fff !important;
}

/* ---------- Checkbox / radio — the checkout's 20px control ----------
   The plugin's own drawing (large colored square + icon font) is
   replaced. The real input stays on top, invisible, so clicks and
   keyboard work exactly as before. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style-wrapper {
  position: relative !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style-wrapper > input {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style-wrapper > .tm-epo-style {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid var(--rd-field) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style-wrapper > input[type="radio"] + .tm-epo-style {
  border-radius: 50% !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style-wrapper > .tm-epo-style::before {
  content: none !important;
  display: none !important;
}
/* the tick (checkbox) / dot (radio), drawn in the text color for the Primary */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style-wrapper > .tm-epo-style::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  margin: auto !important;
  border: 0 !important;
  background: var(--rd-on-primary) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  font-size: 0 !important;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style-wrapper > input[type="radio"] + .tm-epo-style::after {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  -webkit-mask: none;
  mask: none;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style-wrapper > input:checked + .tm-epo-style {
  border-color: var(--rd-primary) !important;
  background: var(--rd-primary) !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style-wrapper > input:checked + .tm-epo-style::after {
  opacity: 1;
  transform: none;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:hover .tm-epo-style-wrapper > input:not(:checked) + .tm-epo-style {
  border-color: var(--rd-primary) !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style-wrapper > input:focus-visible + .tm-epo-style {
  box-shadow: 0 0 0 3px var(--rd-primary-ring) !important;
}

/* ---------- Price block: before · price · after ----------
   Pushed to the right edge as one tight group. The theme colored the
   inner amount orange; it is neutral here, like the checkout's lines. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap .tc-price,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap .tc-price * {
  color: var(--rd-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.3 !important;
  background: none !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap .tc-price {
  flex: 0 0 auto;
  margin: 0 0 0 auto !important;   /* pushes the group right */
  padding: 0 !important;
  white-space: nowrap;
  text-align: right;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap .before-amount:not(.tm-hidden) {
  margin-left: auto !important;    /* the group starts here when it has a prefix */
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap .before-amount:not(.tm-hidden) + .tc-price {
  margin-left: -10px !important;   /* 4px from the prefix, not the row's 14px gap */
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap .tc-price + .after-amount {
  margin-left: -10px !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap :is(.before-amount, .after-amount) {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--rd-text) !important;
}

/* ---------- Phones: the price group drops under the name when needed ---------- */
@media (max-width: 480px) {
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="checkbox"]),
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="radio"]) {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 12px 14px !important;
  }
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap > label {
    flex: 1 1 100% !important;
  }
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) img.tm-linked-product-thumb {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style-wrapper > .tm-epo-style,
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tm-epo-style-wrapper > .tm-epo-style::after {
    transition: none;
  }
}

/* Nothing inside a row adds its own vertical spacing, so row height is
   decided only by the row (68px), never by its content. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="checkbox"]) :is(label, .tm-label, .tm-field-display, .tm-epo-style-wrapper),
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:not(:has(.start_end_panel)) .tmcp-field-wrap:has(input[type="radio"]) :is(label, .tm-label, .tm-field-display, .tm-epo-style-wrapper) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* =========================================================
   Reservety — Add to cart / Reserve button

   Applies to every single product page, on any site. Visually matched
   to the checkout's Place order button in reservety-checkout.css:
   same height, corners, weight, colors, hover and focus ring, so the
   button people press on the product page is the button they press to
   pay. Standalone: paste on its own or alongside the calendar files.
   ========================================================= */

/* ---------- Theme colors (same roles + values as the checkout) ----------
   Primary color    (--wd-primary-color)      the button, focus, stepper hover
   Secondary color  (--wd-alternative-color)  brand accents
   Text on the button is picked automatically from the color's own
   lightness (dark on a pale primary, white on a deep one); the line
   above is the fallback for older browsers.
   Identical to the token block in date-calendar.css and
   date-time-calendar.css, so loading them together changes nothing. */
.single-product-page {
  --rd-primary: var(--wd-primary-color, var(--wd-alternative-color, #1f5fd6));
  --rd-secondary-brand: var(--wd-alternative-color, var(--wd-primary-color, #0e2a5c));

  --rd-on-primary: var(--btn-accented-color, #fff);
  --rd-on-primary: oklch(from var(--rd-primary) clamp(0, (l - 0.62) * -1000, 1) 0 h);

  --rd-primary-soft: #eef4ff;
  --rd-primary-soft: color-mix(in srgb, var(--rd-primary) 9%, #fff);
  --rd-primary-tint: #f6f9ff;
  --rd-primary-tint: color-mix(in srgb, var(--rd-primary) 5%, #fff);
  --rd-primary-ring: rgba(31, 95, 214, .25);
  --rd-primary-ring: color-mix(in srgb, var(--rd-primary) 28%, transparent);
  --rd-primary-hover: var(--rd-primary);
  --rd-primary-hover: color-mix(in srgb, var(--rd-primary) 84%, #000);

  /* neutrals — identical to the checkout skin */
  --rd-ink: #16202e;
  --rd-text: #4a5666;
  --rd-muted: #5f6b7a;
  --rd-card-bg: #fff;
  --rd-line: #dce2ea;
  --rd-field: #c3ccd8;
  --rd-disabled-bg: #e7ebf0;

  --rd-font-body: var(--wd-text-font, inherit);
  --rd-font-title: var(--wd-title-font, var(--wd-text-font, inherit));

  --rd-field-radius: 8px;
  --rd-field-h: 48px;
  --rd-btn-radius: 10px;
  --rd-btn-h: 56px;
}

/* ---------- The button — the checkout's Place order ---------- */
.single-product-page form.cart .single_add_to_cart_button,
.single-product-page form.cart button[name="add-to-cart"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--rd-btn-h);
  margin: 20px 0 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: var(--rd-btn-radius) !important;
  background: var(--rd-primary) !important;
  color: var(--rd-on-primary) !important;
  font-family: var(--rd-font-body);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  text-align: center;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .15s ease, transform .08s ease;
}

/* hover darkens the same color, like the checkout */
.single-product-page form.cart .single_add_to_cart_button:hover,
.single-product-page form.cart button[name="add-to-cart"]:hover {
  background: var(--rd-primary-hover) !important;
  color: var(--rd-on-primary) !important;
}
.single-product-page form.cart .single_add_to_cart_button:active,
.single-product-page form.cart button[name="add-to-cart"]:active {
  transform: scale(.99);
}

/* keyboard focus only — the checkout's soft ring */
.single-product-page form.cart .single_add_to_cart_button:focus,
.single-product-page form.cart button[name="add-to-cart"]:focus {
  outline: none !important;
}
.single-product-page form.cart .single_add_to_cart_button:focus-visible,
.single-product-page form.cart button[name="add-to-cart"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--rd-primary-ring) !important;
}

/* ---------- Waiting for the server ----------
   WooCommerce adds .loading while the request is in flight; the button
   dims and ignores clicks so the order can't be sent twice. */
.single-product-page form.cart .single_add_to_cart_button.loading {
  opacity: .7;
  pointer-events: none;
}

/* ---------- Unavailable ----------
   Dates not chosen yet, or booked out. Stays readable rather than
   fading to near-invisible gray. */
.single-product-page form.cart .single_add_to_cart_button:disabled,
.single-product-page form.cart .single_add_to_cart_button.disabled,
.single-product-page form.cart .single_add_to_cart_button[disabled] {
  background: var(--rd-disabled-bg) !important;
  color: var(--rd-muted) !important;
  cursor: not-allowed;
  transform: none;
}
.single-product-page form.cart .single_add_to_cart_button:disabled:hover,
.single-product-page form.cart .single_add_to_cart_button.disabled:hover {
  background: var(--rd-disabled-bg) !important;
  color: var(--rd-muted) !important;
}

@media (prefers-reduced-motion: reduce) {
  .single-product-page form.cart .single_add_to_cart_button,
  .single-product-page form.cart button[name="add-to-cart"] {
    transition: none;
  }
  .single-product-page form.cart .single_add_to_cart_button:active,
  .single-product-page form.cart button[name="add-to-cart"]:active {
    transform: none;
  }
}

/* ---------- Around the button ---------- */

/* the plugin hides the quantity box on bookings — keep it hidden */
.single-product-page form.cart .quantity.hidden {
  display: none !important;
}

/* quantity stepper, when shown: a checkout-sized field */
.single-product-page form.cart .quantity:not(.hidden) {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  height: var(--rd-field-h);
  margin: 16px 0 0;
  border: 1px solid var(--rd-field);
  border-radius: var(--rd-field-radius);
  background: var(--rd-card-bg);
}
.single-product-page form.cart .quantity:not(.hidden):focus-within {
  border-color: var(--rd-primary);
  box-shadow: 0 0 0 3px var(--rd-primary-ring);
}
.single-product-page form.cart .quantity:not(.hidden) input,
.single-product-page form.cart .quantity:not(.hidden) .minus,
.single-product-page form.cart .quantity:not(.hidden) .plus,
.single-product-page form.cart .quantity:not(.hidden) [class*="qty"] {
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--rd-font-body);
  font-size: 16px;
  color: var(--rd-ink);
}
.single-product-page form.cart .quantity:not(.hidden) .minus,
.single-product-page form.cart .quantity:not(.hidden) .plus {
  width: 44px;
  color: var(--rd-text) !important;
  font-weight: 600;
  cursor: pointer;
}
.single-product-page form.cart .quantity:not(.hidden) .minus:hover,
.single-product-page form.cart .quantity:not(.hidden) .plus:hover {
  background: var(--rd-primary-soft) !important;
  color: var(--rd-primary) !important;
}
.single-product-page form.cart .quantity:not(.hidden) input {
  width: 52px;
  font-weight: 600;
  text-align: center;
  outline: none;
}

/* the subtotal line sits directly above the button */
.single-product-page .tc-totals-form {
  margin: 0 0 4px;
}

/* wishlist and SKU below get room to breathe */
.single-product-page .wd-wishlist-btn {
  margin-top: 16px;
}

/* ---------- Mobile — same as the checkout's Place order on phones ---------- */
@media (max-width: 768px) {
  .single-product-page form.cart .single_add_to_cart_button,
  .single-product-page form.cart button[name="add-to-cart"] {
    min-height: 58px;
    font-size: 18px;
  }
}
/* =========================================================
   SCRIPT — reveal the time fields once a date is chosen
   Pairs with this stylesheet (the "Choosing a time" section).

   A CSS file can't run JavaScript, so it is kept here to copy:
   paste everything between the two lines below into
   WoodMart > Theme Settings > Custom JS > Global custom JS
   (or Appearance > Customize > Additional JS, or enqueue it from the
   child theme). It needs jQuery, which WooCommerce already loads.

   Why it exists: the booking plugin cannot offer times until a date is
   set, so the time field is hidden until then. CSS cannot read a field's
   value, so this marks the card and each panel instead.
   If the script does not run, both fields stay visible as before.

   ----- copy from here -----

   ----- copy to here -----
   ========================================================= */

/* =========================================================
   Reservety — Date-time calendar

   Styles the product-page booking calendar that asks for a date AND a
   time (the clock toggle and time fields the plugin renders beside each
   date), plus the time-slot popup. Visually matched to
   reservety-checkout.css: same theme-driven colors, neutrals, 48px
   fields, 8px field corners, 14px cards, focus rings, selected states
   and loading shimmer — so product page and checkout read as one system.

   Date-only calendars are not touched, so this can load alongside a
   date-only stylesheet. To exempt one calendar by hand, add
   rd-no-style  to its section or to the field that wraps it.
   ========================================================= */

/* ---------- Theme colors (same roles as the checkout) ----------
   Primary color    (--wd-primary-color)      actions + state: links, focus
                                              rings, selected slot, chip
   Secondary color  (--wd-alternative-color)  brand accents
   Text on those colors is picked automatically from the color's own
   lightness (relative color syntax); the line above each is the
   fallback for older browsers. Nothing here needs editing per site. */
.single-product-page,
.bb-time-picker {
  --rd-primary: var(--wd-primary-color, var(--wd-alternative-color, #1f5fd6));
  --rd-secondary-brand: var(--wd-alternative-color, var(--wd-primary-color, #0e2a5c));

  --rd-on-primary: var(--btn-accented-color, #fff);
  --rd-on-primary: oklch(from var(--rd-primary) clamp(0, (l - 0.62) * -1000, 1) 0 h);

  /* derived from the primary color, like the checkout */
  --rd-primary-soft: #eef4ff;
  --rd-primary-soft: color-mix(in srgb, var(--rd-primary) 9%, #fff);
  --rd-primary-tint: #f6f9ff;
  --rd-primary-tint: color-mix(in srgb, var(--rd-primary) 5%, #fff);
  --rd-primary-ring: rgba(31, 95, 214, .25);
  --rd-primary-ring: color-mix(in srgb, var(--rd-primary) 28%, transparent);
  /* primary darkened enough to read as text on its soft tint */
  --rd-primary-text: color-mix(in srgb, var(--rd-primary) 50%, #000);
  --rd-primary-text: oklch(from var(--rd-primary) min(l, 0.45) c h);

  /* neutrals — identical to the checkout skin (WCAG AA on white) */
  --rd-ink: #16202e;
  --rd-text: #4a5666;
  --rd-muted: #5f6b7a;
  --rd-placeholder: #7a8594;
  --rd-card-bg: #fff;
  --rd-page-bg: #f4f6f9;
  --rd-line: #dce2ea;
  --rd-field: #c3ccd8;
  --rd-field-hover: #9aa5b4;
  --rd-sk: #e7ebf0;
  --rd-sk-hi: #f3f5f8;

  /* fonts follow the theme (form controls don't inherit on their own) */
  --rd-font-body: var(--wd-text-font, inherit);
  --rd-font-title: var(--wd-title-font, var(--wd-text-font, inherit));

  --rd-clock-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");

  --rd-radius: 14px;
  --rd-field-radius: 8px;
  --rd-field-h: 48px;
  --rd-pad: 28px;
}

@media (max-width: 768px) {
  .single-product-page,
  .bb-time-picker {
    --rd-pad: 18px;
    --rd-radius: 12px;
  }
}

/* ---------- Card shell + card title ----------
   The plugin gives this section no heading, so the title below is
   written by CSS. Edit it in the `content:` line. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) {
  position: relative;
  background: var(--rd-card-bg) !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-radius) !important;
  box-shadow: none !important;
  padding: var(--rd-pad) !important;
  margin: 0 0 20px !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"])::before {
  content: "Pick your dates and times";
  position: absolute;
  top: var(--rd-pad);
  left: var(--rd-pad);
  right: 110px;              /* leaves room for Reset */
  line-height: 28px;
  font-family: var(--rd-font-title);
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  color: var(--rd-ink);
  margin: 0;
}

/* ---------- Two panels, each with a date and a time ----------
   Start and end sit side by side; inside each, the date takes the room
   it needs and the time keeps a fixed, narrower column. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-top: calc(var(--rd-pad) + 28px + 20px) !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) > .calendar_single_popup {
  grid-column: 1 / -1 !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .cpfclear {
  display: none !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 126px !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  grid-column: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  flex: none !important;
  float: none !important;
  position: static !important;   /* keeps Reset pinned to the card */
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--rd-font-body);
  font-size: 15px;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel > .tm-cell {
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* The panel heading spans the whole panel */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel > .cpf-type-header {
  grid-column: 1 / -1 !important;
}

/* The plugin also renders a combined date+time field and hides it.
   It stays hidden — revealing it shows the same value twice. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel .start_datetime_id-div,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel .end_datetime_id-div,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel > .tm-cell[style*="display: none"],
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel > .tm-cell[style*="display:none"] {
  display: none !important;
}

/* ---------- Labels and wrappers ---------- */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel .tm-epo-field-label {
  font-family: var(--rd-font-body);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--rd-ink);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 6px !important;
  padding: 0 !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel .tm-extra-product-options-container:not(.clear_all_div),
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel .tmcp-ul-wrap,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel .tmcp-field-wrap {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  list-style: none;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel .tmcp-field-wrap,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel .tmcp-field-wrap label {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

/* ---------- The two fields ---------- */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel input.tmcp-textfield {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--rd-field-h) !important;
  border: 1px solid var(--rd-field) !important;
  border-radius: var(--rd-field-radius) !important;
  box-shadow: none !important;
  background: var(--rd-card-bg) !important;
  padding: 0 40px 0 14px !important;
  font-family: var(--rd-font-body);
  font-size: 16px;            /* 16px = no iOS zoom on focus */
  line-height: 1.4;
  color: var(--rd-ink);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel label:hover input.tmcp-textfield {
  border-color: var(--rd-field-hover) !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel input.tmcp-textfield:focus,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel input.flatpickr-input.active,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel input[aria-expanded="true"] {
  border-color: var(--rd-primary) !important;
  box-shadow: 0 0 0 3px var(--rd-primary-ring) !important;
  outline: none;
}

/* The time field is the narrower of the two, so it gets a smaller type
   size and less room reserved for its icon — otherwise "09:00 am" is
   clipped by its own padding. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel [class*="-time_id-div"] input.tmcp-textfield,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel [class*="_time_id-div"] input.tmcp-textfield {
  padding: 0 32px 0 12px !important;
  font-size: 15px;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel [class*="-time_id-div"] .tmcp-field-wrap label::after,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel [class*="_time_id-div"] .tmcp-field-wrap label::after {
  right: 11px;
  width: 16px;
  height: 16px;
}

/* Icons: masked shapes, so they take the theme's color rather than a
   fixed gray. A calendar on the date field, a clock on the time one. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel .tmcp-field-wrap label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 13px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  background-color: var(--rd-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
  pointer-events: none;
  z-index: 1;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel [class*="-time_id-div"] .tmcp-field-wrap label::after,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel [class*="_time_id-div"] .tmcp-field-wrap label::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel .tmcp-field-wrap label:hover::after {
  background-color: var(--rd-primary);
}

/* The plugin opens each picker from its own link, not from the input.
   Stretching the link across the field means a click anywhere on the
   box works. Capped to the field height so it can never cover a popup
   rendered underneath. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel a.bb-cal-toggle {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: auto !important;
  height: var(--rd-field-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: none !important;
  z-index: 2;
  cursor: pointer;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel a.bb-cal-toggle i,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel a.bb-cal-toggle svg,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel a.bb-clock i,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel a.bb-clock svg {
  opacity: 0 !important;
}

/* The clock link stays at the icon and never covers the field.
   Unlike the date field, the plugin opens the time picker from the
   INPUT — that is the element carrying aria-expanded — so a link
   stretched across the field swallows the click and the picker never
   opens. This keeps a hit area for people who aim at the icon while
   leaving the rest of the field to the input. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel a.bb-clock {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 36px !important;
  height: var(--rd-field-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: none !important;
  z-index: 2;
  cursor: pointer;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel a.bb-cal-toggle:focus,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel a.bb-clock:focus {
  outline: none !important;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel a.bb-cal-toggle:focus-visible,
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .start_end_panel a.bb-clock:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--rd-primary-ring) !important;
  border-radius: var(--rd-field-radius) !important;
}

/* ---------- Reset ----------
   Two rules, because the plugin injects this link from a template and
   where it lands differs between sites. */
.single-product-page .clear_all_div {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) .clear_all_div {
  position: absolute !important;
  top: var(--rd-pad);
  right: var(--rd-pad);
  left: auto !important;
  display: block;
  width: auto !important;
  max-width: calc(100% - (var(--rd-pad) * 2));
  line-height: 28px;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 3;
}
.single-product-page .bb-clear-all-button {
  font-family: var(--rd-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--rd-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.single-product-page .bb-clear-all-button:hover {
  text-decoration-thickness: 2px;
}

/* ---------- Date popup sits above the click overlay ---------- */
.single-product-page .flatpickr-calendar {
  position: absolute;
  z-index: 999 !important;
}
/* Clickable only while open. A closed picker left in the page must never
   catch clicks, or it blocks part of the fields underneath. */
.single-product-page .flatpickr-calendar.open,
.single-product-page .flatpickr-calendar.open *,
.single-product-page .flatpickr-calendar.inline,
.single-product-page .flatpickr-calendar.inline * {
  pointer-events: auto !important;
}
.single-product-page .flatpickr-calendar:not(.open):not(.inline),
.single-product-page .flatpickr-calendar:not(.open):not(.inline) * {
  pointer-events: none !important;
}

/* ---------- Mobile: the two panels stack ---------- */
@media (max-width: 768px) {
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 16px !important;
  }
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]) > .calendar_single_popup {
    margin-bottom: -16px !important;
  }
}

/* =========================================================
   The time picker
   The plugin renders this popup from a template, sometimes inside the
   card and sometimes at the end of the page, so it is styled on its own
   class rather than through the card. It carries its own copy of the
   theme tokens at the top of this file for that reason.
   ========================================================= */

.bb-time-picker {
  box-sizing: border-box;
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 16px;
  background: var(--rd-card-bg);
  border: 1px solid var(--rd-line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
  font-family: var(--rd-font-body);
  color: var(--rd-ink);
  z-index: 1000;
}
.bb-time-picker * {
  box-sizing: border-box;
}

/* ---------- Header: which day these times belong to ---------- */
.bb-time-picker__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--rd-line);
  font-family: var(--rd-font-title);
  font-size: 15px;
  color: var(--rd-ink);
  font-weight: 700;
}
.bb-time-picker__header--clickable {
  cursor: pointer;
}
.bb-time-picker__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: -6px;
  border-radius: 50%;
  color: var(--rd-text);
  cursor: pointer;
}
.bb-time-picker__back:hover {
  background: var(--rd-primary-soft);
  color: var(--rd-primary-text);
}
.bb-time-picker__icon {
  color: var(--rd-muted);
  flex: 0 0 auto;
}
.bb-time-picker__date {
  flex: 1;
  min-width: 0;
}

.bb-time-picker__subheader {
  margin: -4px 0 10px;
}
.bb-time-picker__step-label {
  font-size: 13px;
  color: var(--rd-muted);
}

/* ---------- The chosen time, once picked ---------- */
.bb-time-picker__selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  background: var(--rd-primary-soft);
  color: var(--rd-primary-text);
  font-size: 14px;
  font-weight: 600;
}
.bb-time-picker__chip-change {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.bb-time-picker__chip-change:hover {
  background: rgba(0, 0, 0, 0.16);
}

/* ---------- The slots ---------- */
.bb-time-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
  max-height: 280px;
  margin: 0;
  padding: 2px;
  overflow-y: auto;
  list-style: none;
}
.bb-time-picker__item {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bb-time-picker__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 4px 6px;
  border: 1px solid var(--rd-field);
  border-radius: 10px;
  background: var(--rd-card-bg);
  font-family: var(--rd-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--rd-ink);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.bb-time-picker__slot:hover {
  border-color: var(--rd-primary);
  background: var(--rd-primary-tint);
}
.bb-time-picker__slot:focus-visible {
  outline: none;
  border-color: var(--rd-primary);
  box-shadow: 0 0 0 3px var(--rd-primary-ring);
}

/* The second line some slots carry, e.g. the end of the window */
.bb-time-end {
  font-size: 11px;
  color: var(--rd-muted);
}

/* Chosen. The plugin marks this with one of several class names, so
   all of them are covered. */
.bb-time-picker__slot.selected,
.bb-time-picker__slot.active,
.bb-time-picker__slot.bb-selected,
.bb-time-picker__slot[aria-selected="true"] {
  border-color: var(--rd-primary);
  box-shadow: inset 0 0 0 1px var(--rd-primary);
  background: var(--rd-primary-soft);
  color: var(--rd-primary-text);
  font-weight: 700;
}
.bb-time-picker__slot.selected .bb-time-end,
.bb-time-picker__slot.active .bb-time-end,
.bb-time-picker__slot[aria-selected="true"] .bb-time-end {
  color: inherit;
  opacity: 0.85;
}

/* Already taken. Visible but clearly out of reach — a slot that simply
   vanishes leaves people wondering whether they misread the page. */
.bb-time-picker__item.bb-time-item-disabled .bb-time-picker__slot,
.bb-time-picker__slot.disabled,
.bb-time-picker__slot[aria-disabled="true"] {
  border-color: var(--rd-line);
  box-shadow: none;
  background: var(--rd-page-bg);
  color: var(--rd-placeholder);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.bb-time-picker__item.bb-time-item-disabled .bb-time-picker__slot:hover,
.bb-time-picker__slot.disabled:hover {
  border-color: var(--rd-line);
  background: var(--rd-page-bg);
  transform: none;
}

/* ---------- Nothing available ---------- */
.bb-time-picker__empty {
  padding: 22px 12px;
  border-radius: 10px;
  background: var(--rd-page-bg);
  text-align: center;
  font-size: 14px;
  color: var(--rd-text);
}

/* ---------- Still fetching ----------
   The grid is empty until availability comes back, so an empty grid
   becomes a shimmering block rather than a collapsed gap. */
@keyframes rd-time-shimmer {
  from { background-position: -140% 0; }
  to   { background-position: 240% 0; }
}
.bb-time-picker__grid:empty {
  display: block;
  height: 132px;
  border-radius: 10px;
  background-image: linear-gradient(
    100deg,
    var(--rd-sk) 0%,
    var(--rd-sk) 36%,
    var(--rd-sk-hi) 50%,
    var(--rd-sk) 64%,
    var(--rd-sk) 100%
  );
  background-color: var(--rd-sk);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: rd-time-shimmer 1.4s linear infinite;
}

/* ---------- Motion ----------
   The slots arrive in sequence rather than all at once, which makes a
   long list read as a list instead of a wall. The delay is capped so
   the last slot is never more than about half a second behind. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rd-slot-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }
  .bb-time-picker__item {
    animation: rd-slot-in 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .bb-time-picker__item:nth-child(1) { animation-delay: 0ms; }
  .bb-time-picker__item:nth-child(2) { animation-delay: 22ms; }
  .bb-time-picker__item:nth-child(3) { animation-delay: 44ms; }
  .bb-time-picker__item:nth-child(4) { animation-delay: 66ms; }
  .bb-time-picker__item:nth-child(5) { animation-delay: 88ms; }
  .bb-time-picker__item:nth-child(6) { animation-delay: 110ms; }
  .bb-time-picker__item:nth-child(7) { animation-delay: 132ms; }
  .bb-time-picker__item:nth-child(8) { animation-delay: 154ms; }
  .bb-time-picker__item:nth-child(9) { animation-delay: 176ms; }
  .bb-time-picker__item:nth-child(10) { animation-delay: 198ms; }
  .bb-time-picker__item:nth-child(11) { animation-delay: 220ms; }
  .bb-time-picker__item:nth-child(12) { animation-delay: 242ms; }
  .bb-time-picker__item:nth-child(13) { animation-delay: 264ms; }
  .bb-time-picker__item:nth-child(14) { animation-delay: 286ms; }
  .bb-time-picker__item:nth-child(15) { animation-delay: 308ms; }
  .bb-time-picker__item:nth-child(16) { animation-delay: 330ms; }
  .bb-time-picker__item:nth-child(17) { animation-delay: 352ms; }
  .bb-time-picker__item:nth-child(18) { animation-delay: 374ms; }
  .bb-time-picker__item:nth-child(19) { animation-delay: 396ms; }
  .bb-time-picker__item:nth-child(20) { animation-delay: 418ms; }
  .bb-time-picker__item:nth-child(21) { animation-delay: 440ms; }
  .bb-time-picker__item:nth-child(22) { animation-delay: 462ms; }
  .bb-time-picker__item:nth-child(23) { animation-delay: 484ms; }
  .bb-time-picker__item:nth-child(24) { animation-delay: 506ms; }
  /* Beyond two dozen slots they all land together — a longer stagger
     would just be waiting. */
  .bb-time-picker__item:nth-child(n + 25) {
    animation-delay: 528ms;
  }

  .bb-time-picker__slot:hover {
    transform: translateY(-1px);
  }
  .bb-time-picker__slot:active {
    transform: translateY(0) scale(0.98);
  }

  @keyframes rd-chip-in {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: none; }
  }
  .bb-time-picker__selected-chip {
    animation: rd-chip-in 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-time-picker__item,
  .bb-time-picker__selected-chip,
  .bb-time-picker__grid:empty {
    animation: none !important;
  }
  .bb-time-picker__grid:empty {
    background: var(--rd-sk);
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .bb-time-picker {
    width: 100%;
  }
  .bb-time-picker__grid {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  }
}

/* =========================================================
   Choosing a time
   The plugin cannot offer times until a date is set, so a time field
   shown up front is a dead control. Instead the date stands alone, and
   once it is chosen the time appears as a line beneath it: the value,
   and a link to change it. The field itself only opens on request.

   Needs the snippet that ships with this file — CSS cannot read a
   field's value, and the summary line has to be built. Without the
   snippet none of this applies and both fields show as before, so a
   missing script never strands a control.
   ========================================================= */

/* One column: the date owns the row, everything else stacks under it. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]).rd-timed .start_end_panel {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* ---------- Before a date is chosen ---------- */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]).rd-timed .start_end_panel::after {
  content: "Pick a date to choose a time";
  grid-column: 1 / -1;
  overflow: hidden;
  max-height: 22px;
  margin-top: 8px;
  font-family: var(--rd-font-body);
  font-size: 13px;
  color: var(--rd-muted);
  transition: max-height 0.28s ease, opacity 0.2s ease, margin-top 0.28s ease;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]).rd-timed .start_end_panel.rd-has-date::after {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
}

/* ---------- The summary line ----------
   Built by the snippet and placed under the date. It shows the time
   that is actually set, so the value is never hidden from view — only
   the control for editing it is. */
.rd-time-summary {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 7px;
  row-gap: 2px;
  grid-column: 1 / -1;
  margin-top: 8px;
  font-family: var(--rd-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--rd-text);
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]).rd-timed .start_end_panel.rd-has-date:not(.rd-time-open) .rd-time-summary {
  display: flex;
}
.rd-time-summary__icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background-color: var(--rd-muted);
  -webkit-mask: var(--rd-clock-mask) center / 15px 15px no-repeat;
  mask: var(--rd-clock-mask) center / 15px 15px no-repeat;
}
.rd-time-summary__value {
  font-weight: 600;
  white-space: nowrap;
  color: var(--rd-ink);
}
.rd-time-summary__sep {
  color: var(--rd-muted);
}
/* The label is left in sentence case and at its natural width. Themes
   often set buttons to uppercase with extra letter-spacing, which turns
   this line into two cramped rows inside a half-width panel. */
.rd-time-edit {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--rd-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: inherit;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap;
  color: var(--rd-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rd-time-edit:hover {
  text-decoration-thickness: 2px;
}
.rd-time-edit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--rd-primary-ring);
  border-radius: 4px;
}

/* ---------- The time field ----------
   Folded away rather than merely transparent, so it cannot be tabbed
   into or clicked while it is closed. */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]).rd-timed .start_end_panel [class*="-time_id-div"]:not([class*="datetime"]) {
  grid-column: 1 / -1;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: max-height 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.22s ease,
              margin-top 0.3s ease;
}
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]).rd-timed .start_end_panel.rd-time-open [class*="-time_id-div"]:not([class*="datetime"]) {
  max-height: 64px;
  margin-top: 8px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* It draws the eye once as it opens, then settles. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rd-time-arrive {
    0%   { box-shadow: 0 0 0 0 var(--rd-primary-soft); }
    55%  { box-shadow: 0 0 0 5px var(--rd-primary-soft); }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]).rd-timed .start_end_panel.rd-time-open [class*="-time_id-div"]:not([class*="datetime"]) input.tmcp-textfield {
    animation: rd-time-arrive 0.9s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]).rd-timed .start_end_panel [class*="-time_id-div"]:not([class*="datetime"]),
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]).rd-timed .start_end_panel::after,
  .rd-time-summary {
    transition: none !important;
  }
  .single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]).rd-timed .start_end_panel.rd-time-open [class*="-time_id-div"]:not([class*="datetime"]) input.tmcp-textfield {
    animation: none !important;
  }
}


/* =========================================================
   Fixes — time ranges in the popup, and the opened time field
   ========================================================= */

/* An opened time field must not clip the picker the plugin renders
   inside it (the fold uses overflow:hidden while closed). */
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]).rd-timed .start_end_panel.rd-time-open [class*="-time_id-div"]:not([class*="datetime"]),
.single-product-page #tm-extra-product-options .tm-extra-product-options-field:has(.start_end_panel):not(.rd-no-style):not(:has(.rd-no-style)):has(.bb-clock, [class*="-time_id-div"], [class*="_time_id-div"]).rd-timed .start_end_panel.rd-time-open [class*="_time_id-div"]:not([class*="datetime"]) {
  overflow: visible;
  max-height: none;
}

/* The summary line's link: a real, easy-to-hit control */
.single-product-page .rd-time-summary .rd-time-edit {
  min-height: 32px;
  font-weight: 600 !important;
}

/* The picker is drawn inside a Tippy tooltip, which caps its box at
   350px and adds its own padding and arrow — narrower than a picker with
   time ranges, so the slots were clipped. The tooltip shell becomes an
   invisible holder; the picker itself is the card. */
.tippy-box:has(.bb-time-picker) {
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.tippy-box:has(.bb-time-picker) > .tippy-content {
  padding: 0 !important;
  background: transparent !important;
}
.tippy-box:has(.bb-time-picker) > .tippy-arrow,
.tippy-box:has(.bb-time-picker) > .tippy-svg-arrow {
  display: none !important;
}

/* Single times ("09:00 am") keep the compact picker; ranges
   ("08:00 am - 12:00 pm", class bb-time-picker--range) get a wider one
   with columns that fit a whole range. Text may wrap inside its slot
   and the list never clips sideways. */
.bb-time-picker {
  max-width: calc(100vw - 24px) !important;
}
.bb-time-picker.bb-time-picker--range {
  width: 390px !important;
}
.bb-time-picker .bb-time-picker__grid {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 3px 6px 3px 3px !important;
}
.bb-time-picker.bb-time-picker--range .bb-time-picker__grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
}
.bb-time-picker .bb-time-picker__grid .bb-time-picker__slot {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--rd-field) !important;
  border-radius: 10px !important;
  background: var(--rd-card-bg) !important;
  color: var(--rd-ink) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: center !important;
  text-indent: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.bb-time-picker .bb-time-picker__slot .bb-time-end {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--rd-muted);
  text-decoration: none;
}
.bb-time-picker .bb-time-picker__grid .bb-time-picker__slot:hover {
  border-color: var(--rd-primary) !important;
  background: var(--rd-primary-tint) !important;
}
.bb-time-picker .bb-time-picker__grid .bb-time-picker__slot:focus-visible {
  outline: none !important;
  border-color: var(--rd-primary) !important;
  box-shadow: 0 0 0 3px var(--rd-primary-ring) !important;
}
.bb-time-picker .bb-time-picker__grid .bb-time-picker__slot:is(.selected, .active, .bb-selected, [aria-selected="true"]) {
  border-color: var(--rd-primary) !important;
  box-shadow: inset 0 0 0 1px var(--rd-primary) !important;
  background: var(--rd-primary-soft) !important;
  color: var(--rd-primary-text) !important;
  font-weight: 700 !important;
}
.bb-time-picker .bb-time-picker__item.bb-time-item-disabled .bb-time-picker__slot,
.bb-time-picker .bb-time-picker__grid .bb-time-picker__slot:is(.disabled, [aria-disabled="true"]) {
  border-color: var(--rd-line) !important;
  background: var(--rd-page-bg) !important;
  color: var(--rd-placeholder) !important;
  text-decoration: line-through;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .bb-time-picker.bb-time-picker--range {
    width: calc(100vw - 24px) !important;
  }
  .bb-time-picker.bb-time-picker--range .bb-time-picker__grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }
}