/*
 * Single product.
 *
 * Values here are the design's, not approximations of it: 28px gallery radius,
 * 88px thumbs at 12px gaps, a 2px ink progress rail, 32px serif price, a 26px
 * quote card, and 20px linen accordion rows with 26px violet toggles.
 *
 * The quote card is WooCommerce's own add-to-cart form styled in place, not a
 * rebuilt component. When rentopian-sync removes the form and substitutes its
 * "select rental dates" button, the substitute lands in the same container and
 * inherits the same treatment.
 */

/* ----------------------------------------------------------- Breadcrumb -- */

.lb-single__crumbs {
	padding-top: var(--lb-s2);
}

/* The trail is muted; the current page is the only ink in it, which falls out
   of colouring the container ink and the links mute. */
.lb-single__crumbs .lb-crumbs,
.lb-single__crumbs .woocommerce-breadcrumb {
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lb-ink);
	margin: 0;
}

.lb-single__crumbs a {
	color: var(--lb-mute);
}

.lb-single__crumbs a:hover {
	color: var(--lb-ink);
}

.lb-crumbs__sep {
	padding-inline: 6px;
	color: var(--lb-mute);
}

/* --------------------------------------------------------------- Layout -- */

.lb-single__layout {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: var(--lb-s7);
	align-items: start;
	padding-block: 26px 80px;
}

/* -------------------------------------------------------------- Gallery -- */

.lb-gallery__main { margin: 0; }

.lb-gallery__well {
	border-radius: 28px;
	box-shadow: var(--lb-sh-rest);
}

.lb-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lb-scope .lb-gallery__zoom {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 1;
	gap: 7px;
	min-height: 0;
	padding: 9px 15px;
	border: 1px solid #E7E0D5;
	background: rgba(251, 249, 246, .94);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.lb-gallery__zoom .lb-glyph { font-size: 11px; }

/* Thumbnail row: arrow, track, arrow, then the rail and counter beneath. */
.lb-thumbs {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

.lb-thumbs__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: var(--lb-r-pill);
	color: var(--lb-ink);
	cursor: pointer;
	transition: background var(--lb-dur) var(--lb-ease),
	            color var(--lb-dur) var(--lb-ease),
	            opacity var(--lb-dur) var(--lb-ease);
}

/* Both arrows are the same control, so they keep one colour and one ground in
   every state - enabled, hovered, pressed and disabled. Only availability
   changes, and it changes through opacity alone. */
.lb-thumbs__arrow,
.lb-thumbs__arrow:hover,
.lb-thumbs__arrow:focus,
.lb-thumbs__arrow:active,
.lb-thumbs__arrow[disabled] {
	background: var(--lb-sand);
	color: var(--lb-ink);
}

.lb-thumbs__arrow[disabled] {
	opacity: .35;
	cursor: default;
}

.lb-thumbs__arrow:hover:not([disabled]) {
	box-shadow: 0 0 0 3px rgba(198, 168, 124, .35);
}
.lb-thumbs__arrow .lb-glyph { font-size: 14px; }

.lb-thumbs__viewport { overflow: hidden; }

.lb-thumbs__track {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}

.lb-thumbs__track::-webkit-scrollbar { display: none; }

.lb-thumbs__item { flex: 0 0 auto; scroll-snap-align: start; }

.lb-thumbs__button {
	display: block;
	width: 88px;
	height: 88px;
	padding: 0;
	border: 0;
	border-radius: var(--lb-r-thumb);
	background: var(--lb-well);
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow var(--lb-dur) var(--lb-ease);
}

.lb-thumbs__button img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A ring rather than a border, so the thumbnail never shifts by 2px. */
.lb-thumbs__button:hover,
.lb-thumbs__button.is-active {
	box-shadow: 0 0 0 2px var(--lb-ink);
}

.lb-thumbs__meta {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 4px;
}

.lb-thumbs__rail {
	flex: 1;
	height: 2px;
	border-radius: var(--lb-r-pill);
	background: #E6DFD4;
	overflow: hidden;
}

.lb-thumbs__rail-fill {
	display: block;
	height: 2px;
	width: 0;
	border-radius: var(--lb-r-pill);
	background: var(--lb-ink);
	transition: width 420ms var(--lb-ease);
}

.lb-thumbs__counter {
	margin: 0;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lb-mute);
	white-space: nowrap;
}

/* With four or fewer images the arrows are hidden and the row wraps. */
.lb-thumbs--fits .lb-thumbs__track { flex-wrap: wrap; overflow: visible; }

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

.lb-single__series {
	display: block;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #8A7A5E;
	margin: 0 0 14px;
}

.lb-summary .product_title,
.lb-summary h1.entry-title {
	font-family: var(--lb-font-serif);
	font-size: clamp(32px, 3.8vw, 50px);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -.015em;
	color: var(--lb-ink);
	margin: 0 0 16px;
}

/* Price, unit and the availability pill share one line. */
.lb-priceline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
}

.lb-summary .lb-priceline .price {
	font-family: var(--lb-font-serif);
	font-size: 32px;
	font-weight: 300;
	line-height: 1;
	color: var(--lb-ink);
	margin: 0;
	display: inline-flex;
	align-items: baseline;
	gap: var(--lb-s2);
}

.lb-summary .lb-priceline .price del { opacity: .45; font-size: 22px; }
.lb-summary .lb-priceline .price ins { text-decoration: none; }

.lb-priceline__unit {
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--lb-mute);
}

/* Availability pill. */
.lb-avail {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	padding: 7px 13px;
	border-radius: var(--lb-r-pill);
	background: var(--lb-ok-bg);
	color: var(--lb-ok);
	font-size: 11px;
	letter-spacing: .06em;
}

.lb-avail__dot {
	display: block;
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: var(--lb-r-pill);
	background: #22A366;
}

.lb-avail--out {
	background: var(--lb-linen);
	color: var(--lb-ink-2);
}

.lb-avail--out .lb-avail__dot { background: var(--lb-mute); }

/* The bare stock line duplicates the pill above it. */
.lb-summary > .stock:not(.entry-product-stock) { display: none; }

.lb-summary .woocommerce-product-details__short-description {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--lb-ink-2);
	max-width: 560px;
	margin: 0 0 30px;
}

.lb-summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- Variations -- */

.lb-summary .variations {
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: 100%;
	margin: 0 0 26px;
	border: 0;
}

/* The variation price and reset link sit between the swatches and the card. */
.lb-summary .woocommerce-variation {
	margin: 0 0 var(--lb-s4);
}

.lb-summary .woocommerce-variation-description p:last-child { margin-bottom: 0; }

.lb-summary .variations tbody,
.lb-summary .variations tr {
	display: contents;
}

.lb-summary .variations th,
.lb-summary .variations td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}

/* Attribute name and the chosen value sit on one baseline. */
.lb-summary .variations label {
	display: flex;
	align-items: baseline;
	gap: var(--lb-s2);
	margin: 0 0 11px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lb-mute);
}

.lb-variation__selected {
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lb-ink);
}

/* Controls that stay in the DOM as WooCommerce's source of truth while another
   surface - the pills, the stepper - is what the customer actually uses.

   Hiding this way needs position: absolute, and none of these sit inside a
   positioned ancestor, so their containing block is the viewport. The parent
   theme sets `.single-product .entry-summary form.variations_form
   div.variations .row-isw-swatch--isw_select select { width: 100% }`, which is
   far more specific than this rule, so the swatch select resolved to the full
   viewport width at its static offset and pushed the document into a
   horizontal scroll that `.site { overflow: hidden }` cannot clip. Nothing
   else declares max-width, so capping it there holds whichever width rule
   wins. */
.lb-scope .lb-select-hidden,
.lb-scope .lb-summary .isw-dropdown-select,
.lb-summary .quantity-button-wrapper > label.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	max-width: 1px;
	max-height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.lb-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.lb-scope .lb-swatch-pill {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 12px 18px;
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-r-pill);
	background: var(--lb-surface);
	color: var(--lb-ink-2);
	font-family: var(--lb-font-sans);
	font-size: 12.5px;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--lb-dur) var(--lb-ease),
	            box-shadow var(--lb-dur) var(--lb-ease),
	            color var(--lb-dur) var(--lb-ease),
	            opacity var(--lb-dur) var(--lb-ease);
}

/* Hover darkens the border and lifts the ring. The label colour is left alone
   so the row does not flicker as the pointer crosses it. */
.lb-swatch-pill:hover:not(.is-unavailable) {
	border-color: var(--lb-ink);
	box-shadow: var(--lb-ring-hover);
}

.lb-swatch-pill:active:not(.is-unavailable) {
	box-shadow: var(--lb-ring-active);
}

.lb-swatch-pill.is-selected {
	border-color: var(--lb-ink);
	color: var(--lb-ink);
	box-shadow: var(--lb-ring-active);
}

/* Combinations WooCommerce cannot offer stay visible but read as unavailable,
   so the row does not reflow while the customer explores. */
.lb-swatch-pill.is-unavailable {
	opacity: .4;
	text-decoration: line-through;
	cursor: default;
}

.lb-summary .reset_variations,
.lb-summary .reset_variations-wrap {
	display: inline-block;
	margin-top: var(--lb-s2);
	font-size: var(--lb-fs-control);
	color: var(--lb-violet-ink);
}

.lb-summary .woocommerce-variation-price { margin-bottom: var(--lb-s4); }

.lb-summary .woocommerce-variation-price .price {
	font-family: var(--lb-font-serif);
	font-size: 26px;
	font-weight: 300;
	color: var(--lb-ink);
}

/* ----------------------------------------------------------- Quote card -- */

/*
 * The quote card holds the quantity and the submit, and nothing else. On a
 * variable product WooCommerce nests those inside the variations form, so the
 * form and the variation wrapper are dissolved with display:contents - that
 * lifts the attribute swatches out to sit above the card, as the design has
 * them, without moving a single node in the DOM.
 */
.lb-summary form.cart.variations_form,
.lb-summary .single_variation_wrap {
	display: contents;
}

.lb-summary form.cart:not(.variations_form),
.lb-summary .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	margin: 0 0 30px;
	padding: 24px;
	border-radius: var(--lb-r-panel);
	background: var(--lb-surface);
	box-shadow: 0 1px 2px rgba(26, 22, 32, .05), var(--lb-sh-panel);
}

.lb-summary form.cart::after { content: none; }

/* The quantity block sits above the submit, separated by the card's own gap so
   the two controls never touch. */
.lb-quote__qty {
	display: block;
	width: 100%;
}

.lb-quote__label {
	display: block;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lb-mute);
	margin-bottom: 9px;
}

/*
 * The stepper is the parent theme's own markup: `.quantity-button-wrapper >
 * .quantity > input + .decrease + .increase`. It is restyled rather than
 * rebuilt so the parent's quantity-button script keeps working - it binds to
 * `.quantity .increase` / `.decrease` and reads `.siblings('.qty')`, which only
 * holds with that structure. The buttons come after the input in the DOM, so
 * flex order puts the minus back on the left without moving a node.
 */
.lb-quote__qty {
	display: block;
	width: 50%;
	min-width: 190px;
	max-width: 100%;
}

.lb-summary .quantity-button-wrapper {
	width: 100%;
	margin: 0;
}

.lb-scope .lb-summary .quantity {
	display: flex;
	align-items: center;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-r-pill);
	background: var(--lb-surface);
	overflow: hidden;
}

.lb-scope .lb-summary .quantity .decrease { order: 1; }
.lb-scope .lb-summary .quantity .qty      { order: 2; }
.lb-scope .lb-summary .quantity .increase { order: 3; }

.lb-scope .lb-summary .quantity .decrease,
.lb-scope .lb-summary .quantity .increase {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: auto;
	height: 100%;
	min-width: 0;
	padding: 0 17px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--lb-mute);
	font-family: var(--lb-font-sans);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--lb-dur) var(--lb-ease),
	            color var(--lb-dur) var(--lb-ease);
}

.lb-scope .lb-summary .quantity .decrease:hover,
.lb-scope .lb-summary .quantity .increase:hover {
	background: var(--lb-linen);
	color: var(--lb-ink);
}

.lb-scope .lb-summary .quantity input.qty {
	flex: 1;
	width: auto;
	min-width: 0;
	height: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-family: var(--lb-font-sans);
	font-size: 16px;
	color: var(--lb-ink);
	-moz-appearance: textfield;
}

.lb-scope .lb-summary .quantity input.qty::-webkit-outer-spin-button,
.lb-scope .lb-summary .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* A hidden quantity field has no stepper to show. */
.lb-summary .quantity-input-hidden,
.lb-summary .quantity-button-wrapper.quantity-input-hidden { display: none; }

/* The submit fills the row and is the one action on the card. A fixed height
   with centred content keeps it steady whatever the label says. */
.lb-scope .lb-summary form.cart button[type="submit"],
.lb-scope .lb-summary .single_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	min-height: 52px;
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: var(--lb-r-pill);
	background: var(--lb-violet);
	color: #fff;
	font-family: var(--lb-font-sans);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .06em;
	text-align: center;
	cursor: pointer;
	transition: background var(--lb-dur) var(--lb-ease),
	            box-shadow var(--lb-dur) var(--lb-ease),
	            transform var(--lb-dur) var(--lb-ease);
}

.lb-scope .lb-summary form.cart button[type="submit"]:hover,
.lb-scope .lb-summary .single_add_to_cart_button:hover {
	background: var(--lb-ink);
	box-shadow: var(--lb-sh-hover);
	transform: translateY(-2px);
}

.lb-scope .lb-summary .single_add_to_cart_button.disabled,
.lb-scope .lb-summary .single_add_to_cart_button:disabled {
	opacity: .45;
	transform: none;
	box-shadow: none;
}

.lb-quote__note {
	display: block;
	font-size: 12px;
	line-height: 1.5;
	color: var(--lb-mute);
}

/* When no rental dates are set, rentopian-sync removes the add-to-cart form and
   renders its own button. It carries the plugin's wording; only the shape is
   styled here - ink rather than violet, because choosing dates is the step
   before the primary action, not the primary action itself. */
.lb-scope .lb-summary button.rental-select-dates {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 18px 26px;
	border: 1px solid transparent;
	border-radius: var(--lb-r-pill);
	background: var(--lb-ink);
	color: var(--lb-paper);
	font-family: var(--lb-font-sans);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .06em;
	text-align: center;
	cursor: pointer;
	transition: background var(--lb-dur) var(--lb-ease),
	            transform var(--lb-dur) var(--lb-ease);
}

.lb-scope .lb-summary button.rental-select-dates:hover {
	background: var(--lb-ink-2);
	transform: translateY(-2px);
}

/* The plugin renders that button outside form.cart, so its own wrapper takes
   the card treatment instead. */
.lb-summary .rntp-button-wrap {
	display: block;
	margin: 0 0 30px;
	padding: 24px;
	border-radius: var(--lb-r-panel);
	background: var(--lb-surface);
	box-shadow: 0 1px 2px rgba(26, 22, 32, .05), var(--lb-sh-panel);
}

/* Product meta reads as quiet metadata. */
.lb-summary .product_meta {
	padding-top: var(--lb-s4);
	border-top: 1px solid var(--lb-line);
	font-size: var(--lb-fs-control);
	color: var(--lb-mute);
}

.lb-summary .product_meta > span { display: block; margin-bottom: var(--lb-s2); }

/* ------------------------------------------------------------ Accordion -- */

/* The tabs render in the summary column beneath the quote card. Rows carry
   their own spacing so the section needs no gap of its own. */
.lb-tabs { padding: 0; }

/* The row owns the padding, so the open body simply adds its top gap. */
.lb-tabs__row {
	padding: 20px 22px;
	border-radius: 20px;
	background: var(--lb-linen);
	margin: 0 0 .5rem;
	overflow: hidden;
}

.lb-tabs__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	list-style: none;
	font-family: var(--lb-font-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--lb-ink);
}

.lb-tabs__head::-webkit-details-marker { display: none; }

.lb-tabs__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: var(--lb-r-pill);
	background: var(--lb-surface);
	color: var(--lb-violet);
}

.lb-tabs__icon .lb-glyph { font-size: 14px; }

.lb-tabs__icon-minus { display: none; }
.lb-tabs__row[open] .lb-tabs__icon-plus { display: none; }
.lb-tabs__row[open] .lb-tabs__icon-minus { display: inline-flex; }

.lb-tabs__body {
	padding-top: 16px;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--lb-ink-2);
}

.lb-tabs__body > h2 { display: none; }
.lb-tabs__body > *:last-child { margin-bottom: 0; }

/* The attributes table reads as label-left, value-right rows. */
.lb-tabs__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.lb-tabs__body tr {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 5px 0;
}

.lb-tabs__body th,
.lb-tabs__body td {
	padding: 0;
	border: 0;
	text-align: left;
	font-weight: 400;
}

.lb-tabs__body th { color: var(--lb-mute); }
.lb-tabs__body td { text-align: right; color: var(--lb-ink-2); }
.lb-tabs__body td p { margin: 0; }

/* -------------------------------------------------------------- Related -- */

.lb-related {
	padding: 76px var(--lb-gutter);
	margin-top: var(--lb-s8);
}

.lb-related__inner {
	max-width: var(--lb-maxw);
	margin-inline: auto;
}

.lb-related__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 32px;
}

.lb-related__title {
	margin: 0 0 13px;
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1.06;
}

.lb-related__rule {
	display: block;
	width: 52px;
	height: 2px;
	background: var(--lb-sand);
}

.lb-scope .lb-related__all {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 13px 20px;
	border-color: #DDD5C9;
}

/* auto-fill, not auto-fit: a band holding one related product should keep that
   card at its own width rather than let it stretch across the whole row, and
   auto-fit collapses the empty tracks that stop it.

   This has to stay here, above the media queries. Further down the file it
   would be a later rule at the same specificity as the narrow-screen column
   settings and would quietly cancel them. */
.lb-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
	gap: 22px;
}

.lb-related__grid .lb-card__price { font-size: 17px; }
.lb-related__grid .lb-card__body { gap: 5px; }

/* ----------------------------------------------------------- Sticky bar -- */

.lb-stickybar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 55;
	background: rgba(251, 249, 246, .96);
	backdrop-filter: blur(10px);
	box-shadow: 0 -8px 24px -18px rgba(26, 22, 32, .5);
}

.lb-stickybar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lb-s4);
	padding: var(--lb-s3) var(--lb-gutter);
}

.lb-stickybar__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.lb-stickybar__name {
	font-size: var(--lb-fs-control);
	color: var(--lb-mute);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lb-stickybar__price { font-size: 20px; }
.lb-stickybar__button { flex-shrink: 0; }

@media (min-width: 700px) {
	.lb-stickybar { display: none; }
}

@media (max-width: 699px) {
	/* Clear the sticky bar so it never covers the footer's first row. */
	.lb-single { padding-bottom: 90px; }
}

/* ------------------------------------- Parent and plugin output in situ -- */

/*
 * The parent wraps the price in .entry-price-wrap and the rating in
 * .entry-rating-wrap. display:contents lets those wrappers stay in the markup
 * while their children join the price row directly, so price, unit and the
 * availability pill land on one baseline without any of it being re-rendered.
 */
.lb-priceline .entry-price-wrap,
.lb-priceline .entry-rating-wrap {
	display: contents;
}

.lb-summary .lb-priceline .entry-price-wrap > .price {
	margin: 0;
}

/* The "new" badge is a parent feature the design does not show. It stays, but
   reads as a quiet eyebrow rather than a shout. */
.lb-summary .entry-product-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-s2);
	margin-bottom: var(--lb-s3);
}

.lb-summary .entry-product-badges > * {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: var(--lb-r-pill);
	background: var(--lb-violet-mist);
	color: var(--lb-violet-ink);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.lb-summary .product-title-wrap { margin: 0; }

/*
 * The stock bar outside the price row carries the plugin's "fill out the rental
 * dates form" message. That is the reason a customer cannot add yet, so it is
 * shown as a notice rather than squeezed into the availability pill.
 */
.lb-summary .entry-product-stock {
	display: block;
	margin: 0 0 var(--lb-s5);
	padding: 14px 18px;
	border-radius: var(--lb-r-thumb);
	background: var(--lb-linen);
	color: var(--lb-ink-2);
	font-size: 13px;
	line-height: 1.5;
}

.lb-summary .entry-product-stock::before { content: none; }

.lb-summary .entry-product-stock .rentpro-progress { margin-top: var(--lb-s3); }

.lb-summary .entry-product-stock .progress-bar-wrap {
	height: 2px;
	border-radius: var(--lb-r-pill);
	background: #E6DFD4;
	overflow: hidden;
}

.lb-summary .entry-product-stock .progress-bar {
	display: block;
	height: 2px;
	border-radius: var(--lb-r-pill);
	background: var(--lb-sand);
}

/* Live viewer count is a parent marketing feature, not part of the design.
   It stays available but sits back as quiet metadata. */
.lb-summary .live-viewing-visitors {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 var(--lb-s4);
	font-size: 12px;
	color: var(--lb-mute);
}

.lb-summary .live-viewing-visitors .icon { color: var(--lb-sand); }
.lb-summary .live-viewing-visitors .text { display: inline; }

/* The Sets and Add-Ons configurators are plugin surfaces. They keep their own
   markup; the theme only gives them room and the card language around them. */
.lb-summary .rental-sets-modern,
.lb-summary .rental-add-ons-modern {
	margin: 0 0 var(--lb-s5);
}

/* ---------------------------------------------------------- Breakpoints -- */

/* Tablet: the columns hold until the content can no longer give each side
   330px, but the gutter between them tightens first. */
@media (max-width: 1023px) {
	.lb-single__layout { gap: 40px; }

	.lb-thumbs__button { width: 80px; height: 80px; }

	.lb-summary form.cart,
	.lb-summary .rntp-button-wrap { padding: 22px; }

	.lb-related__grid { grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 20px; }
}

@media (max-width: 899px) {
	/* One column: gallery first, then everything that describes it. */
	.lb-single__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-block: 18px 90px;
	}
}

@media (max-width: 767px) {
	.lb-gallery__well { border-radius: 24px; }

	.lb-thumbs__button { width: 72px; height: 72px; }

	/* Below this width the track is swiped rather than stepped. */
	.lb-thumbs__arrow { display: none; }
	.lb-thumbs { grid-template-columns: minmax(0, 1fr); }

	.lb-summary .lb-priceline .price { font-size: 28px; }

	/* The availability pill takes its own line rather than crowding the price. */
	.lb-summary .lb-priceline .stock { flex-basis: 100%; }

	.lb-summary .woocommerce-product-details__short-description { font-size: 16px; }

	/* Touch targets. */
	.lb-swatch-pill { padding: 13px 18px; min-height: 44px; }

	.lb-summary form.cart,
	.lb-summary .rntp-button-wrap { padding: 20px; }

	.lb-quote__row { gap: 14px; }
	.lb-quote__col { flex-basis: 100%; }

	.lb-scope .lb-summary .lb-qty { width: 100%; }
	.lb-scope .lb-qty__btn { padding: 14px 18px; }

	.lb-scope .lb-summary form.cart button[type="submit"],
	.lb-scope .lb-summary .single_add_to_cart_button,
	.lb-scope .lb-summary button.rental-select-dates { padding: 19px 26px; }

	.lb-tabs__row { padding: 18px; }
	.lb-tabs__head { font-size: 13.5px; }

	.lb-related { padding: 48px 20px; }
	.lb-related__grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
}

/* ------------------------------------------------- Related band, in situ -- */

/*
 * The related band runs the full page width. Its own 32px padding is what
 * insets the content, so it must NOT also carry width:100% - that adds the
 * padding on top of the full width and pushes the page into a horizontal
 * scroll.
 */
.lb-scope .entry-product-page-content > .lb-related,
.lb-scope .lb-single .lb-related {
	max-width: none;
	margin-inline: 0;
}

/* Related cards carry no chip row - the design shows series, name, price. */
.lb-related__grid .lb-card__meta {
	display: none;
}

.lb-related__grid .lb-card__name { font-size: 14.5px; line-height: 1.35; }

/* The parent adds its own section chrome to up-sell and related blocks; the
   child sections bring their own, so the duplicate padding is removed. */
.lb-scope .entry-product-section {
	margin: 0;
	padding: 0;
}

/* --------------------------------- Variation rows as the swatch plugin ---- */

/*
 * The attribute rows arrive from the swatches plugin as
 * `.row-isw-swatch > .label > label` plus a select, rather than the table
 * WooCommerce ships. Both shapes are styled to the same result: an uppercase
 * name with the chosen value beside it, then the pills beneath.
 */
.lb-summary .row-isw-swatch {
	display: block;
}

.lb-summary .row-isw-swatch .label {
	display: block;
	margin: 0 0 11px;
	padding: 0;
	width: auto;
}

.lb-summary .row-isw-swatch label,
.lb-summary .variations label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font-family: var(--lb-font-sans);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lb-mute);
}

.lb-variation__selected {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lb-ink);
}

/* Without JavaScript the select is the control, so it must stay visible. */
.no-js .lb-scope .lb-summary .isw-dropdown-select,
.no-js .lb-scope .lb-select-hidden {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
}

.lb-summary .lb-swatches { margin-top: 0; }

/* The reset link is a quiet secondary, not a button. */
.lb-summary .reset_variations-wrap:empty { display: none; }

/* --------------------------------------------- Plugin swatches, restyled -- */

/*
 * When the swatch plugin renders real colour dots or image tiles, that output
 * wins and the theme's text pills are not drawn at all - drawing both is what
 * produced each attribute twice. These rules only bring the plugin's swatches
 * into the design language.
 *
 * Hover moves the ring and nothing else: no fill, no lift, no scale.
 */
.lb-summary .isw-swatch {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0;
}

.lb-summary .isw-term {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--lb-r-pill);
	box-shadow: 0 0 0 1px #D8CFC1;
	transition: box-shadow var(--lb-dur) var(--lb-ease);
}

/* A colour or image swatch is the same choice control as a text pill, so it
   hovers the same way: the outline darkens and the ring comes up under it. The
   selected marker stays a solid ink ring - it has to stay readable against any
   swatch colour. */
.lb-summary .isw-term:hover {
	box-shadow: 0 0 0 1px var(--lb-ink), var(--lb-ring-hover);
}

.lb-summary .isw-term.isw-selected {
	box-shadow: 0 0 0 1px #D8CFC1, 0 0 0 3px var(--lb-ink);
}

.lb-summary .isw-term .term-shape {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: var(--lb-r-pill);
	overflow: hidden;
	background: var(--lb-well);
}

.lb-summary .isw-term .term-shape img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A swatch that is unavailable for the current combination. */
.lb-summary .isw-term.isw-disabled,
.lb-summary .isw-term:not(.isw-enabled) {
	opacity: .4;
	pointer-events: none;
}

/* The plugin prints the chosen term under the row; the label already carries
   it, so the duplicate is dropped. */
.lb-summary .selected-term-name { display: none; }

.lb-summary .reset_variations {
	font-size: var(--lb-fs-control);
	color: var(--lb-violet-ink);
	text-decoration: underline;
}

/* ------------------------------------------------- Stepper glyphs, once -- */

/*
 * The buttons ship empty and the sign is drawn here, so there is exactly one
 * minus and one plus however the parent or a plugin styles the control.
 */
.lb-scope .lb-summary .quantity .decrease::before { content: "−"; }
.lb-scope .lb-summary .quantity .increase::before { content: "+"; }

.lb-scope .lb-summary .quantity .decrease::before,
.lb-scope .lb-summary .quantity .increase::before {
	display: block;
	font-family: var(--lb-font-sans);
	font-size: 22px;
	line-height: 1;
}

/* The stepper never touches the button beneath it. */
.lb-scope .lb-summary .quantity { margin-bottom: .5rem; }

/*
 * The swatch tooltip is a hint.css pseudo-element that sits outside the swatch,
 * so nothing in its ancestry may clip. The rounded crop belongs to the image
 * well instead.
 */
.lb-summary .isw-term,
.lb-summary .isw-swatch,
.lb-summary .row-isw-swatch { overflow: visible; }

.lb-summary .isw-term .term-shape { overflow: hidden; }

/* The plugin writes the chosen term here as well; the attribute label already
   carries it, so this copy is the one that goes. */
.lb-scope .lb-summary .row-isw-swatch .selected-term-name { display: none; }

/* The hint tooltip is drawn above the swatch, so the hovered swatch has to sit
   above its neighbours or the next one in the row covers it. */
.lb-summary .isw-term { position: relative; }
.lb-summary .isw-term:hover { z-index: 2; }

/* ------------------------------------------- Variation dimensions block -- */

/*
 * The container is emitted empty as the first accordion row and filled from JS
 * once a variation is chosen, so the row hides itself until there is something
 * in it. `:has()` keeps that declarative - no observer needed.
 */
.lb-tabs__row--dimensions:has(#variation-dimensions-weight:empty) { display: none; }

#variation-dimensions-weight + br { display: none; }

.lb-tabs__body #variation-dimensions-weight table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 13.5px;
}

.lb-tabs__body #variation-dimensions-weight tr {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 5px 0;
}

.lb-tabs__body #variation-dimensions-weight th,
.lb-tabs__body #variation-dimensions-weight td {
	padding: 0;
	border: 0;
	text-align: left;
	font-weight: 400;
}

.lb-tabs__body #variation-dimensions-weight th { color: var(--lb-mute); }

.lb-tabs__body #variation-dimensions-weight td {
	text-align: right;
	color: var(--lb-ink-2);
}

/* Dimensions arrive as one line per axis inside the value cell. */
.lb-tabs__body #variation-dimensions-weight td div + div { margin-top: 2px; }

.lb-tabs__body #variation-dimensions-weight td strong {
	font-weight: 400;
	color: var(--lb-mute);
}

.lb-tabs__body #variation-dimensions-weight p { margin: 0; }

/* ------------------------------------------------------- Popup links ----- */

/*
 * "Ask a Question" and "Share" arrive from the parent as plain stacked links.
 * They are secondary actions, so they read as quiet outline pills sitting under
 * the quote card rather than competing with it.
 */
.lb-summary .product-popup-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-s2);
	margin: 0 0 var(--lb-s5);
	padding: 0;
	border: 0;
}

.lb-summary .product-popup-link {
	margin: 0;
	padding: 0;
	border: 0;
}

.lb-scope .lb-summary .product-popup-link .product-action {
	display: inline-flex;
	align-items: center;
	gap: var(--lb-s2);
	min-height: 40px;
	padding: 11px 18px;
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-r-pill);
	background: var(--lb-surface);
	color: var(--lb-ink-2);
	font-family: var(--lb-font-sans);
	font-size: var(--lb-fs-control);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: border-color var(--lb-dur) var(--lb-ease),
	            box-shadow var(--lb-dur) var(--lb-ease),
	            color var(--lb-dur) var(--lb-ease);
}

.lb-scope .lb-summary .product-popup-link .product-action:hover {
	border-color: var(--lb-ink);
	color: var(--lb-ink);
	box-shadow: var(--lb-ring-hover);
}

.lb-scope .lb-summary .product-popup-link .product-action:active {
	box-shadow: var(--lb-ring-active);
}

/*
 * The parent hangs an icon font on these and pins it with
 * `.product-popup-links a:before { position: absolute; left: 0 }`, which is
 * measured against its own `padding-left: 26px`. This is a flex pill with even
 * padding instead, so the pinned icon landed on top of the label. Putting it
 * back in flow lets the row's gap space it.
 */
.lb-summary .product-popup-link .product-action::before {
	position: static;
	transform: none;
	font-size: 14px;
	line-height: 1;
	color: var(--lb-mute);
}

.lb-summary .product-popup-link .product-action:hover::before {
	color: var(--lb-ink);
}

.lb-summary .product-popup-link .product-action i,
.lb-summary .product-popup-link .product-action svg {
	width: 14px;
	height: 14px;
	font-size: 14px;
	flex: none;
}

/* ---------------------------------------------------- Recently viewed ---- */

/* Same band as related products. The heading row has no trailing pill, so the
   rule sits directly under the title. */
.lb-recent .lb-related__head { margin-bottom: 32px; }

/* ------------------------------------------------ Product options select -- */

/*
 * The product-options dropdown is a full-width control, so the pill radius the
 * generic field styling gives it reads wrong beside the Sets and Add-Ons
 * cards. It is brought in line with those instead: the same small radius,
 * hairline border and painted chevron.
 *
 * The selector names the element because base.css carries
 * `.lb-scope select:not([class*="rntp-"])`, and the :not() argument makes that
 * one step more specific than a bare class. Its `background` shorthand was
 * winning and resetting background-image, which is why the chevron never
 * appeared.
 */
.lb-scope select.rental-product-options-select {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 11px 42px 11px 16px;
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-r-control);
	background-color: var(--lb-surface);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236E6678' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	appearance: none;
	color: var(--lb-ink);
	font-family: var(--lb-font-sans);
	font-size: 14px;
	line-height: 1.4;
	transition: border-color var(--lb-dur) var(--lb-ease),
	            box-shadow var(--lb-dur) var(--lb-ease);
}

.lb-scope select.rental-product-options-select:hover {
	border-color: var(--lb-ink);
	box-shadow: var(--lb-ring-hover);
}

.lb-scope select.rental-product-options-select:focus {
	border-color: var(--lb-ink);
}

.lb-scope select.rental-product-options-select::-ms-expand { display: none; }

/* ------------------------------------------- Sets and Add-Ons controls ---- */

/*
 * The Sets and Add-Ons cards ship their own design system. Rather than
 * re-styling their rules, the two custom properties those rules already read
 * are re-pointed to the child palette. Every plugin rule that says
 * var(--rntp-accent) or var(--rntp-accent-soft) then draws in the theme's
 * colours, and the plugin's own `box-shadow: 0 0 0 3px var(--rntp-accent-soft)`
 * becomes the same ring the pills and popup links use.
 *
 * Nothing here changes the plugin's markup, behaviour or its stylesheet, so
 * deactivating the child theme restores the plugin's own greys.
 */
.lb-scope .rental-sets-modern,
.lb-scope .rental-add-ons-modern {
	--rntp-accent: var(--lb-ink);
	--rntp-accent-soft: rgba(var(--lb-violet-rgb), .12);
}

/*
 * The plugin marks focus and the open panel but leaves hover to a border shift,
 * so the ring is added here. The selectors carry both card scopes because the
 * plugin's own hover rule is already four classes deep.
 */
.lb-scope .rental-sets-modern .rntp-cs-trigger:hover:not(:disabled),
.lb-scope .rental-add-ons-modern .rntp-cs-trigger:hover:not(:disabled),
.lb-scope .rental-sets-modern .rntp-section-select:hover:not(:disabled),
.lb-scope .rental-add-ons-modern .rntp-addon-select:hover:not(:disabled) {
	border-color: var(--lb-ink);
	box-shadow: var(--lb-ring-hover);
}

.lb-scope .rental-sets-modern .rntp-cs-trigger:active:not(:disabled),
.lb-scope .rental-add-ons-modern .rntp-cs-trigger:active:not(:disabled) {
	box-shadow: var(--lb-ring-active);
}