/* ==========================================================================
   Safe & Cozy — product detail page

   The RV and store detail layouts: the gallery, the name block, the booking
   box, and the row of cards under them. Loaded only on a product page we
   draw, so none of it reaches the theme's own pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page scaffolding

   A builder column becomes a stack with even spacing, so a gallery and a
   booking box in one column sit apart without either carrying a margin.
   -------------------------------------------------------------------------- */

.sc-product .vc_row {
	margin-bottom: var(--sc-space-6);
}

.sc-product .vc_row:last-child {
	margin-bottom: 0;
}

.sc-product .wpb_wrapper,
.sc-product .sc-pcol {
	display: flex;
	flex-direction: column;
	gap: var(--sc-space-6);
	height: 100%;
}

/* Every card fills the height of its column, so a row of three ends level. */
.sc-pcard,
.sc-ptext,
.sc-plist,
.sc-phost,
.sc-pcal {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--sc-space-6);
	border: 1px solid var(--sc-line-soft);
	border-radius: var(--sc-radius-xl);
	background: var(--sc-surface);
}

.sc-ptext--plain,
.sc-plist--plain,
.sc-phost--plain,
.sc-pcal--plain {
	padding: 0;
	border: 0;
	background: none;
}

.sc-pcard__title {
	margin-bottom: var(--sc-space-4);
	color: var(--sc-title-color, var(--sc-green-900));
	font-family: var(--sc-font);
	font-size: var(--sc-title-size, var(--sc-fs-h4));
	font-weight: var(--sc-title-weight, 700);
	line-height: var(--sc-lh-snug);
}

/* What the builder shows where a product's own content will be. */
.sc-product-ph {
	padding: var(--sc-space-5);
	border: 1px dashed var(--sc-line);
	border-radius: var(--sc-radius-lg);
	background: var(--sc-cream);
	color: var(--sc-muted);
	font-size: var(--sc-fs-xs);
	text-align: center;
}

.sc-product-ph--media {
	padding-block: 72px;
}

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

.sc-pgallery__stage {
	position: relative;
	aspect-ratio: var(--sc-media-ratio, 4 / 3);
	overflow: hidden;
	border-radius: var(--sc-radius-xl);
	background: var(--sc-cream);
}

.sc-pgallery__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity var(--sc-dur) var(--sc-ease);
}

.sc-pgallery__slide.is-active {
	opacity: 1;
}

.sc-pgallery__slide img,
.sc-pgallery__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-pgallery__badge {
	position: absolute;
	top: var(--sc-space-4);
	left: var(--sc-space-4);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-green-900);
	color: var(--sc-on-dark);
	font-size: 12px;
	font-weight: 700;
}

.sc-pgallery__badge svg {
	width: 14px;
	height: 14px;
	color: var(--sc-gold-500);
}

.sc-pgallery__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: var(--sc-radius-pill);
	background: rgb(255 255 255 / 92%);
	box-shadow: 0 4px 14px rgb(20 40 30 / 18%);
	color: var(--sc-green-900);
	cursor: pointer;
	transform: translateY(-50%);
}

.sc-pgallery__nav svg {
	width: 18px;
	height: 18px;
}

.sc-pgallery__nav--prev {
	left: var(--sc-space-4);
}

.sc-pgallery__nav--prev svg {
	transform: rotate(180deg);
}

.sc-pgallery__nav--next {
	right: var(--sc-space-4);
}

.sc-pgallery__count,
.sc-pgallery__button {
	position: absolute;
	bottom: var(--sc-space-4);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 0;
	border-radius: var(--sc-radius-pill);
	font-size: 12px;
	font-weight: 600;
}

.sc-pgallery__count {
	left: var(--sc-space-4);
	background: rgb(16 28 22 / 72%);
	color: var(--sc-on-dark);
}

.sc-pgallery__button {
	right: var(--sc-space-4);
	background: rgb(255 255 255 / 94%);
	color: var(--sc-green-900);
	cursor: pointer;
}

.sc-pgallery__count svg,
.sc-pgallery__button svg {
	width: 15px;
	height: 15px;
}

/* --- Thumbnails ----------------------------------------------------------- */

.sc-pgallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: var(--sc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-pgallery__thumb {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--sc-radius-md);
	overflow: hidden;
	background: var(--sc-cream);
	cursor: pointer;
}

.sc-pgallery__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.sc-pgallery__thumb.is-active {
	border-color: var(--sc-green-900);
}

/* The floorplan, and the "+n" tile, carry a label over the photo. */
.sc-pgallery__plan .sc-pgallery__thumb img {
	object-fit: contain;
	background: var(--sc-surface);
}

.sc-pgallery__plan span {
	position: absolute;
	inset: auto 0 0;
	padding: 5px 4px;
	background: rgb(255 255 255 / 92%);
	color: var(--sc-green-900);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

/* --- Mosaic --------------------------------------------------------------- */

.sc-pgallery--mosaic {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
	gap: var(--sc-space-3);
}

.sc-pgallery--mosaic .sc-pgallery__aside {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: var(--sc-space-3);
}

.sc-pgallery__tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--sc-radius-lg);
	background: var(--sc-cream);
}

.sc-pgallery__more {
	position: absolute;
	right: var(--sc-space-3);
	bottom: var(--sc-space-3);
	padding: 6px 12px;
	border-radius: var(--sc-radius-pill);
	background: rgb(16 28 22 / 72%);
	color: var(--sc-on-dark);
	font-size: 12px;
	font-weight: 600;
}

/* One large photo with four beside it, as a listing page opens. */
.sc-pgallery--grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--sc-space-3);
}

.sc-pgallery--grid .sc-pgallery__aside {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--sc-space-3);
}

.sc-pgallery--grid .sc-pgallery__stage,
.sc-pgallery--mosaic .sc-pgallery__stage {
	height: 100%;
	aspect-ratio: auto;
	min-height: var(--sc-gallery-h, 420px);
}

.sc-pgallery--grid .sc-pgallery__tile {
	min-height: calc(var(--sc-gallery-h, 420px) / 2 - var(--sc-space-3) / 2);
}

/* Corners only on the outside, so the set reads as one picture. */
.sc-pgallery--grid .sc-pgallery__stage {
	border-radius: var(--sc-radius-xl) 0 0 var(--sc-radius-xl);
}

.sc-pgallery--grid .sc-pgallery__tile:nth-child(2) {
	border-radius: 0 var(--sc-radius-xl) 0 0;
}

.sc-pgallery--grid .sc-pgallery__tile:nth-child(4) {
	border-radius: 0 0 var(--sc-radius-xl) 0;
}

.sc-pgallery--grid .sc-pgallery__tile img {
	transition: transform 0.4s var(--sc-ease);
}

.sc-pgallery--grid .sc-pgallery__tile:hover img {
	transform: scale(1.04);
}

@media (max-width: 767px) {
	.sc-pgallery--mosaic,
	.sc-pgallery--grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-pgallery--mosaic .sc-pgallery__aside,
	.sc-pgallery--grid .sc-pgallery__aside {
		grid-template-rows: none;
		grid-template-columns: 1fr 1fr;
	}

	.sc-pgallery--grid .sc-pgallery__stage,
	.sc-pgallery--mosaic .sc-pgallery__stage {
		min-height: 0;
		aspect-ratio: var(--sc-media-ratio, 4 / 3);
		border-radius: var(--sc-radius-xl);
	}

	.sc-pgallery--grid .sc-pgallery__tile {
		min-height: 0;
		aspect-ratio: 1;
		border-radius: var(--sc-radius-lg) !important;
	}
}

/* --------------------------------------------------------------------------
   Name, rating and facts
   -------------------------------------------------------------------------- */

.sc-phead__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sc-space-3);
	justify-content: space-between;
}

.sc-phead__badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-gold-500);
	color: var(--sc-on-dark);
	font-size: 12px;
	font-weight: 700;
}

.sc-phead__cat {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-sm);
	color: var(--sc-body);
	font-size: 12px;
	font-weight: 600;
}

.sc-phead__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--sc-fs-xs);
	color: var(--sc-ink);
}

.sc-phead__rating strong {
	font-weight: 700;
}

.sc-phead__reviews {
	color: var(--sc-muted);
}

.sc-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--sc-line);
}

.sc-stars__star {
	display: inline-flex;
}

.sc-stars__star svg {
	width: 15px;
	height: 15px;
}

.sc-stars__star.is-full,
.sc-stars__star.is-half {
	color: var(--sc-gold-500);
}

/* Half a star: the gold is clipped down the middle. */
.sc-stars__star.is-half svg {
	clip-path: inset(0 50% 0 0);
}

.sc-page .sc-phead__title {
	margin-top: var(--sc-space-3);
	color: var(--sc-title-color, var(--sc-green-900));
	font-family: var(--sc-font);
	font-size: var(--sc-title-size, clamp(24px, 19px + 0.9vw, 30px));
	font-weight: var(--sc-title-weight, 800);
	line-height: 1.15;
}

.sc-phead__subtitle {
	margin-top: 6px;
	color: var(--sc-body);
	font-size: var(--sc-fs-xs);
}

.sc-phead__place {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--sc-space-3);
	color: var(--sc-body);
	font-size: var(--sc-fs-xs);
}

.sc-phead__place svg {
	width: 17px;
	height: 17px;
	flex: none;
	color: var(--sc-green-900);
}

.sc-phead__excerpt {
	margin-top: var(--sc-space-3);
	color: var(--sc-body);
	font-size: var(--sc-fs-xs);
	line-height: 1.6;
}

.sc-phead__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-5);
	margin: var(--sc-space-5) 0 0;
	padding: var(--sc-space-4) 0 0;
	border-top: 1px solid var(--sc-line-soft);
	list-style: none;
}

.sc-phead__facts li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sc-phead__facts li + li {
	padding-left: var(--sc-space-5);
	border-left: 1px solid var(--sc-line-soft);
}

.sc-phead__facts svg {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--sc-green-900);
}

.sc-phead__facts strong {
	display: block;
	color: var(--sc-ink);
	font-size: var(--sc-fs-xs);
	font-weight: 700;
	line-height: 1.2;
}

.sc-phead__facts small {
	color: var(--sc-muted);
	font-size: 12px;
}

/* --------------------------------------------------------------------------
   Booking box
   -------------------------------------------------------------------------- */

.sc-bookbox {
	padding: var(--sc-space-5);
	border: 1px solid var(--sc-line-soft);
	border-radius: var(--sc-radius-lg);
	background: var(--sc-cream);
}

/* The design draws the name, the facts and the price panel as one card, with
   the price panel inset inside it. A column holding both becomes that card,
   and the box inside loses the outline it would otherwise double up. */
.sc-product .sc-pcol:has(> .sc-phead):has(> .sc-pbook),
.sc-product .wpb_wrapper:has(> .sc-phead):has(> .sc-pbook) {
	gap: var(--sc-space-5);
	padding: var(--sc-space-6);
	border: 1px solid var(--sc-line-soft);
	border-radius: var(--sc-radius-xl);
	background: var(--sc-surface);
}

.sc-product .sc-pcol:has(> .sc-phead) > .sc-pbook .sc-bookbox,
.sc-product .wpb_wrapper:has(> .sc-phead) > .sc-pbook .sc-bookbox {
	border-color: transparent;
}

.sc-bookbox__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	color: var(--sc-green-900);
	font-size: clamp(24px, 20px + 0.8vw, 30px);
	font-weight: 800;
	line-height: 1.1;
}

.sc-bookbox__price .amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.sc-bookbox__unit {
	color: var(--sc-body);
	font-size: var(--sc-fs-xs);
	font-weight: 500;
}

.sc-bookbox__sub,
.sc-bookbox__min {
	margin-top: 4px;
	color: var(--sc-muted);
	font-size: 12px;
}

.sc-bookbox__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sc-space-3);
	margin-top: var(--sc-space-5);
}

.sc-bookbox__fields--places {
	margin-top: var(--sc-space-3);
}

.sc-bookbox__field {
	margin: 0;
}

/* The travellers box takes the full width under the two dates. */
.sc-bookbox__field:nth-child(3) {
	grid-column: 1 / -1;
}

.sc-bookbox__field label {
	display: block;
	margin-bottom: 5px;
	color: var(--sc-muted);
	font-size: 12px;
	font-weight: 600;
}

.sc-bookbox__control {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 var(--sc-space-3);
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-sm);
	background: var(--sc-surface);
}

.sc-bookbox__control svg {
	width: 17px;
	height: 17px;
	flex: none;
	color: var(--sc-green-900);
}

.sc-bookbox__control input,
.sc-bookbox__control select {
	width: 100%;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--sc-ink);
	font: inherit;
	font-size: var(--sc-fs-xs);
}

.sc-bookbox__control input:focus,
.sc-bookbox__control select:focus {
	outline: none;
}

.sc-bookbox__control:focus-within {
	border-color: var(--sc-green-700);
}

.sc-bookbox__extras {
	margin: var(--sc-space-4) 0 0;
	padding: 0;
	border: 0;
}

.sc-bookbox__extras legend {
	padding: 0;
	color: var(--sc-muted);
	font-size: 12px;
	font-weight: 600;
}

.sc-bookbox__extra {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	color: var(--sc-ink);
	font-size: 13px;
}

.sc-bookbox__extra-price {
	margin-left: auto;
	color: var(--sc-body);
	font-weight: 600;
}

.sc-bookbox__extra-price small {
	color: var(--sc-muted);
	font-weight: 400;
}

.sc-bookbox__quote:not(:empty) {
	margin-top: var(--sc-space-4);
}

/* Shown on the first click; until then the box is price and buttons only. */
.sc-bookbox__panel[hidden] {
	display: none;
}

.sc-bookbox__actions {
	display: grid;
	gap: var(--sc-space-3);
	margin-top: var(--sc-space-5);
}

.sc-page .sc-bookbox__submit,
.sc-page .sc-bookbox__second {
	width: 100%;
	justify-content: center;
	padding-block: 13px;
	font-size: var(--sc-fs-sm);
}

/* The theme paints every .button.alt yellow, with !important. */
.woocommerce .sc-page .sc-bookbox__submit.button.alt,
.sc-page .sc-bookbox__submit.button.alt {
	background: var(--sc-green-900) !important;
	color: var(--sc-on-dark) !important;
	border: 0 !important;
	border-radius: var(--sc-radius-sm) !important;
}

.woocommerce .sc-page .sc-bookbox--gold .sc-bookbox__submit.button.alt,
.sc-page .sc-bookbox--gold .sc-bookbox__submit.button.alt {
	background: var(--sc-gold-500) !important;
	color: var(--sc-on-dark) !important;
}

.sc-bookbox__second svg {
	width: 17px;
	height: 17px;
}

.sc-bookbox__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: var(--sc-space-4);
	color: var(--sc-body);
	font-size: 12px;
	text-align: center;
}

.sc-bookbox__note svg {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--sc-green-900);
}

.sc-bookbox__stock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--sc-space-4);
	color: var(--sc-ink);
	font-size: var(--sc-fs-xs);
	font-weight: 600;
}

.sc-bookbox__dot {
	width: 9px;
	height: 9px;
	border-radius: var(--sc-radius-pill);
	background: #2e8b57;
}

.sc-bookbox__stock.is-out .sc-bookbox__dot {
	background: var(--sc-muted);
}

.sc-bookbox__cart {
	margin-top: var(--sc-space-4);
}

/* --------------------------------------------------------------------------
   The calendar that opens at the fields

   The booking plugin draws it with jQuery UI, already knowing which days are
   taken and how short a stay may be. Only its looks are ours.
   -------------------------------------------------------------------------- */

.sc-product-page #ui-datepicker-div,
.sc-page ~ #ui-datepicker-div,
body.sc-product-page .ui-datepicker {
	width: auto;
	min-width: 300px;
	padding: var(--sc-space-4);
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-lg);
	background: var(--sc-surface);
	box-shadow: 0 14px 40px rgb(20 40 30 / 16%);
	font-family: var(--sc-font);
	font-size: 13px;
	z-index: 60 !important;
}

body.sc-product-page .ui-datepicker .ui-datepicker-header {
	position: relative;
	margin-bottom: var(--sc-space-3);
	border: 0;
	background: none;
}

body.sc-product-page .ui-datepicker .ui-datepicker-title {
	color: var(--sc-green-900);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

body.sc-product-page .ui-datepicker .ui-datepicker-prev,
body.sc-product-page .ui-datepicker .ui-datepicker-next {
	top: -2px;
	width: 30px;
	height: 30px;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-pill);
	background: var(--sc-surface);
	cursor: pointer;
}

body.sc-product-page .ui-datepicker th {
	padding: 4px 0;
	color: var(--sc-muted);
	font-size: 11px;
	font-weight: 600;
}

body.sc-product-page .ui-datepicker td {
	padding: 1px;
}

body.sc-product-page .ui-datepicker td a,
body.sc-product-page .ui-datepicker td span {
	display: grid;
	place-items: center;
	height: 34px;
	border: 0;
	border-radius: var(--sc-radius-sm);
	background: none;
	color: var(--sc-ink);
	text-align: center;
}

body.sc-product-page .ui-datepicker td a:hover {
	background: var(--sc-cream);
}

body.sc-product-page .ui-datepicker td.ui-datepicker-current-day a,
body.sc-product-page .ui-datepicker td a.ui-state-active {
	background: var(--sc-green-900);
	color: var(--sc-on-dark);
}

/* A day already booked, or inside the turnaround, is struck through. */
body.sc-product-page .ui-datepicker td.ui-state-disabled span,
body.sc-product-page .ui-datepicker td.ui-datepicker-unselectable span {
	color: var(--sc-line);
	text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   Description
   -------------------------------------------------------------------------- */

.sc-ptext__body {
	color: var(--sc-body);
	font-size: var(--sc-fs-xs);
	line-height: 1.65;
}

.sc-ptext__body p + p {
	margin-top: var(--sc-space-3);
}

.sc-ptext__body--clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--sc-clamp, 5);
	overflow: hidden;
}

.sc-ptext__body--clamped.is-open {
	display: block;
	-webkit-line-clamp: none;
}

.sc-ptext__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--sc-space-3);
	padding: 0;
	border: 0;
	background: none;
	color: var(--sc-green-900);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.sc-ptext__more svg {
	width: 14px;
	height: 14px;
	transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   Lists — one element, six shapes
   -------------------------------------------------------------------------- */

.sc-plist__body {
	display: flex;
	flex: 1 1 auto;
	gap: var(--sc-space-5);
}

.sc-plist__items {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: repeat(var(--sc-plist-cols, 2), minmax(0, 1fr));
	align-content: start;
	gap: var(--sc-space-4) var(--sc-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-plist__items li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.sc-plist__icon svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--sc-green-900);
}

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

.sc-plist__label {
	color: var(--sc-ink);
	font-size: var(--sc-fs-xs);
	line-height: 1.35;
}

.sc-plist__value {
	color: var(--sc-muted);
	font-size: 12.5px;
}

/* Ticked list — highlights. */
.sc-plist--ticks .sc-plist__items {
	gap: var(--sc-space-3);
}

/* Icon grid — amenities. */
.sc-plist--icons .sc-plist__items {
	gap: var(--sc-space-5) var(--sc-space-3);
}

.sc-plist--icons .sc-plist__items li {
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.sc-plist--icons .sc-plist__icon svg {
	width: 22px;
	height: 22px;
}

.sc-plist--icons .sc-plist__label {
	font-size: 12px;
	line-height: 1.3;
}

/* Label and value — the spec table. */
.sc-plist--specs .sc-plist__label {
	color: var(--sc-muted);
	font-size: 12px;
}

.sc-plist--specs .sc-plist__value {
	color: var(--sc-ink);
	font-size: 13px;
	font-weight: 600;
}

.sc-plist--specs .sc-plist__icon svg {
	width: 19px;
	height: 19px;
	color: var(--sc-green-900);
}

/* Numbered, beside the floorplan. */
.sc-plist--numbered .sc-plist__media {
	flex: 0 0 46%;
	margin: 0;
}

.sc-plist--numbered .sc-plist__media img {
	width: 100%;
	height: auto;
	border-radius: var(--sc-radius-md);
}

.sc-plist--numbered .sc-plist__items {
	gap: var(--sc-space-3);
}

.sc-plist__number {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-green-900);
	color: var(--sc-on-dark);
	font-size: 11px;
	font-weight: 700;
}

.sc-plist--numbered .sc-plist__label {
	font-size: 13px;
	font-weight: 600;
}

.sc-plist--numbered .sc-plist__value {
	font-size: 12px;
}

/* Icon rows with text — policies. */
.sc-plist--rows .sc-plist__items {
	gap: var(--sc-space-4);
}

.sc-plist--rows .sc-plist__label {
	color: var(--sc-ink);
	font-size: 13px;
	font-weight: 700;
}

.sc-plist--rows .sc-plist__value {
	color: var(--sc-body);
	font-size: 12.5px;
	line-height: 1.45;
}

/* Figures in boxes — the store's headline numbers. */
.sc-plist--tiles .sc-plist__items li {
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: var(--sc-space-4) var(--sc-space-3);
	border: 1px solid var(--sc-line-soft);
	border-radius: var(--sc-radius-md);
	background: var(--sc-cream);
	text-align: center;
}

.sc-plist--tiles .sc-plist__value {
	color: var(--sc-ink);
	font-size: var(--sc-fs-h4);
	font-weight: 800;
}

.sc-plist--tiles .sc-plist__label {
	color: var(--sc-muted);
	font-size: 11px;
}

.sc-plist__link {
	margin-top: var(--sc-space-4);
}

.sc-plist__link {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	color: var(--sc-green-900);
	font-size: 13px;
	font-weight: 700;
}

.sc-plist__link a,
.sc-plist__link > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
}

.sc-plist__link svg {
	width: 14px;
	height: 14px;
	flex: none;
}

@media (max-width: 767px) {
	.sc-plist__body {
		flex-direction: column;
	}

	.sc-plist--numbered .sc-plist__media {
		flex: none;
	}

	/* Wide enough that a line of text is readable; narrower than this and a
	   phone would be stacking two columns of three words. */
	.sc-plist__items {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
	}
}

/* --------------------------------------------------------------------------
   Host
   -------------------------------------------------------------------------- */

.sc-phost__body {
	display: flex;
	gap: var(--sc-space-4);
}

.sc-phost__photo {
	flex: 0 0 66px;
	margin: 0;
}

.sc-phost__photo img {
	width: 66px;
	height: 66px;
	border-radius: var(--sc-radius-pill);
	object-fit: cover;
}

.sc-phost__copy {
	min-width: 0;
}

.sc-phost__badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 6px;
	padding: 4px 10px;
	border-radius: var(--sc-radius-pill);
	background: color-mix(in srgb, var(--sc-gold-500) 16%, #fff);
	color: var(--sc-gold-600);
	font-size: 11px;
	font-weight: 700;
}

.sc-phost__badge svg {
	width: 13px;
	height: 13px;
}

.sc-page .sc-phost__name {
	color: var(--sc-green-900);
	font-size: var(--sc-fs-sm);
	font-weight: 700;
}

.sc-phost__since {
	color: var(--sc-muted);
	font-size: 12px;
}

.sc-phost__rating {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--sc-ink);
}

.sc-phost__rating svg {
	width: 14px;
	height: 14px;
	color: var(--sc-gold-500);
}

.sc-phost__rating span {
	color: var(--sc-muted);
}

.sc-phost__text {
	margin-top: var(--sc-space-3);
	color: var(--sc-body);
	font-size: 12.5px;
	line-height: 1.5;
}

.sc-phost__meta {
	display: grid;
	gap: 6px;
	margin: var(--sc-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.sc-phost__meta li {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--sc-muted);
	font-size: 12px;
}

.sc-phost__meta svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.sc-page .sc-phost__button {
	width: 100%;
	justify-content: center;
	margin-top: auto;
	padding-block: 11px;
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   Availability
   -------------------------------------------------------------------------- */

.sc-pcal__text {
	margin-top: -6px;
	margin-bottom: var(--sc-space-4);
	color: var(--sc-muted);
	font-size: 12.5px;
}

.sc-pcal__months {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sc-space-5);
}

.sc-pcal__name {
	margin-bottom: var(--sc-space-3);
	color: var(--sc-ink);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.sc-pcal__grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.sc-pcal__grid th {
	padding-bottom: 6px;
	color: var(--sc-muted);
	font-size: 11px;
	font-weight: 600;
}

.sc-pcal__grid th abbr {
	text-decoration: none;
	border: 0;
}

.sc-pcal__grid td {
	padding: 2px;
	text-align: center;
}

.sc-pcal__grid td span {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	max-width: 32px;
	margin-inline: auto;
	border-radius: var(--sc-radius-sm);
	color: var(--sc-ink);
	font-size: 12px;
}

.sc-pcal__grid td.is-booked span {
	background: var(--sc-green-900);
	color: var(--sc-on-dark);
}

.sc-pcal__grid td.is-past span {
	color: var(--sc-line);
}

.sc-pcal__grid td.is-today span {
	box-shadow: inset 0 0 0 1px var(--sc-gold-500);
}

.sc-pcal__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-4);
	justify-content: center;
	margin: var(--sc-space-4) 0 0;
	padding: 0;
	list-style: none;
	color: var(--sc-muted);
	font-size: 12px;
}

.sc-pcal__legend li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.sc-pcal__swatch {
	width: 10px;
	height: 10px;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-line);
}

.sc-pcal__swatch.is-booked {
	background: var(--sc-green-900);
}

.sc-page .sc-pcal__button {
	width: 100%;
	justify-content: center;
	margin-top: var(--sc-space-4);
	padding-block: 11px;
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   WooCommerce blocks dropped back in
   -------------------------------------------------------------------------- */

.sc-pwoo {
	margin-block: var(--sc-space-4);
}

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

   The theme prints its own title band above the content on a product page,
   which repeats the name the layout is about to show. On a page we draw, the
   design's slim trail takes its place.
   -------------------------------------------------------------------------- */

.sc-product-page .header-title-breadcrumb {
	display: none;
}

.sc-pcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sc-space-4);
	justify-content: space-between;

	/* The theme paints every <nav> dark (styles-headers.css, `nav`), and a
	   breadcrumb is a nav. */
	padding: 0;
	border: 0;
	background: none;
}

.sc-pcrumbs__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--sc-muted);
	font-size: var(--sc-fs-xs);
}

.sc-pcrumbs__list li {
	display: flex;
	align-items: center;
	gap: var(--sc-space-2);
}

.sc-pcrumbs__list a,
.sc-pcrumbs__list span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sc-muted);
}

.sc-pcrumbs__list a:hover {
	color: var(--sc-green-900);
}

.sc-pcrumbs__list [aria-current="page"] {
	color: var(--sc-ink);
	font-weight: 600;
}

.sc-pcrumbs__list svg {
	width: 15px;
	height: 15px;
}

.sc-pcrumbs__sep svg {
	width: 13px;
	height: 13px;
	opacity: 0.55;
}

.sc-pcrumbs__actions {
	display: flex;
	align-items: center;
	gap: var(--sc-space-5);
}

.sc-pcrumbs__action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sc-green-900);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.sc-pcrumbs__action svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 575px) {
	.sc-pcrumbs__actions {
		width: 100%;
		justify-content: flex-start;
	}
}

/* --------------------------------------------------------------------------
   The page around our layout

   The theme opens a product page with 80px of air above it and closes with
   the same (.high-padding, styles.css). The design opens close to the header,
   so a product page we draw trims it — and only that page.
   -------------------------------------------------------------------------- */

.sc-product-page .high-padding {
	padding-top: var(--sc-space-6);
	padding-bottom: var(--sc-space-10);
}

/* Wider than the theme's 1170, closer to the proportions of the design.
   Set --sc-product-width to taste, or remove it to follow the theme. */
@media (min-width: 1300px) {
	.sc-product-page .container.blog-posts {
		max-width: var(--sc-product-width, 1170px);
	}
}

/* An uploaded picture standing in for an icon. */
.sc-icon-image {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.sc-plist--icons .sc-icon-image {
	width: 26px;
	height: 26px;
}

/* --------------------------------------------------------------------------
   The photo keeps up with a taller column beside it

   Open the booking dates and the right-hand column grows well past the photo,
   which would otherwise sit stranded at the top of a long white gap. Two
   things make this work: the builder clips every row, which would pin the
   photo in place, and a column that does not stretch gives it nowhere to
   travel — so the row holding a sticky gallery opens up and its columns are
   made the height of the taller one.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.sc-product .sc-pgallery--sticky {
		position: sticky;
		top: var(--sc-book-top, 96px);
	}

	.sc-product .vc_row:has(.sc-pgallery--sticky) {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		overflow: visible;
	}

	.sc-product .vc_row:has(.sc-pgallery--sticky) > .wpb_column,
	.sc-product .vc_row:has(.sc-pgallery--sticky) .vc_column-inner,
	.sc-product .vc_row:has(.sc-pgallery--sticky) .wpb_wrapper,
	.sc-product .vc_row:has(.sc-pgallery--sticky) .sc-pcols,
	.sc-product .vc_row:has(.sc-pgallery--sticky) .sc-pcol {
		overflow: visible;
	}

	.sc-product .vc_row:has(.sc-pgallery--sticky) > .wpb_column,
	.sc-product .vc_row:has(.sc-pgallery--sticky) .vc_column-inner {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
	}

	/* The column holding the photo stops stretching it, so sticky has room. */
	.sc-product .wpb_wrapper:has(> .sc-pgallery--sticky),
	.sc-product .sc-pcol:has(> .sc-pgallery--sticky) {
		align-items: stretch;
		height: auto;
	}

	.sc-product .sc-pgallery--sticky {
		flex: 0 0 auto;
	}
}

/* ==========================================================================
   Store product page

   The summary column, the tab bar WooCommerce prints, and what customers
   said. The gallery, the name block and the cards are shared with the RV
   page above.
   ========================================================================== */

/* --- Price, on sale ------------------------------------------------------- */

.sc-bookbox--store .sc-bookbox__price {
	flex-wrap: wrap;
	gap: var(--sc-space-3);
}

.sc-bookbox--store .sc-bookbox__price del {
	color: var(--sc-muted);
	font-size: 0.6em;
	font-weight: 600;
	text-decoration: line-through;
}

.sc-bookbox--store .sc-bookbox__price ins {
	background: none;
	color: inherit;
	text-decoration: none;
}

.sc-bookbox__save {
	align-self: center;
	padding: 5px 12px;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-gold-500);
	color: var(--sc-on-dark);
	font-size: 12px;
	font-weight: 700;
}

.sc-bookbox__ships {
	margin-left: 6px;
	color: var(--sc-muted);
	font-weight: 400;
}

/* --- Quantity and add to cart --------------------------------------------- */

.sc-bookbox__cart form.cart {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: var(--sc-space-3);
	margin: 0;
}

.sc-bookbox__cart .quantity {
	display: flex;
	align-items: stretch;
	flex: 0 0 auto;
	overflow: hidden;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-sm);
	background: var(--sc-surface);
}

.sc-bookbox__cart .quantity .qty {
	width: 52px;
	min-height: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sc-ink);
	font-size: var(--sc-fs-sm);
	font-weight: 600;
	text-align: center;
	appearance: textfield;
}

.sc-bookbox__cart .quantity .qty::-webkit-outer-spin-button,
.sc-bookbox__cart .quantity .qty::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
}

.sc-qty__step {
	width: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sc-green-900);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.sc-qty__step:hover {
	background: var(--sc-cream);
}

/* The theme paints every .button.alt yellow, with !important. */
.woocommerce .sc-page .sc-bookbox__cart .single_add_to_cart_button,
.sc-page .sc-bookbox__cart .single_add_to_cart_button {
	flex: 1 1 200px;
	min-height: 48px;
	padding: 13px 26px !important;
	border: 0 !important;
	border-radius: var(--sc-radius-sm) !important;
	background: var(--sc-green-900) !important;
	color: var(--sc-on-dark) !important;
	font-size: var(--sc-fs-sm) !important;
	font-weight: 700 !important;
}

.woocommerce .sc-page .sc-bookbox__cart .single_add_to_cart_button:hover,
.sc-page .sc-bookbox__cart .single_add_to_cart_button:hover {
	background: var(--sc-green-700) !important;
}

/* --- The figures beside the price ---------------------------------------- */

.sc-plist--tiles .sc-plist__items {
	align-items: stretch;
	gap: var(--sc-space-3);
}

.sc-plist--tiles .sc-plist__items li {
	justify-content: flex-start;
	height: 100%;
	padding: var(--sc-space-4) 10px;
}

.sc-plist--tiles .sc-plist__icon svg {
	width: 20px;
	height: 20px;
	color: var(--sc-green-900);
}

.sc-plist--tiles .sc-plist__value {
	font-size: var(--sc-fs-sm);
	line-height: 1.2;
}

.sc-plist--tiles .sc-plist__label {
	font-size: 10.5px;
	line-height: 1.3;
}

/* --- The reassurances under the cart -------------------------------------- */

.sc-plist--trust .sc-plist__items {
	gap: var(--sc-space-4) var(--sc-space-5);
}

.sc-plist--trust .sc-plist__label {
	font-size: 12.5px;
	font-weight: 700;
}

.sc-plist--trust .sc-plist__value {
	font-size: 11.5px;
}

.sc-plist--trust .sc-plist__icon svg {
	width: 20px;
	height: 20px;
}

/* --------------------------------------------------------------------------
   The tab bar

   WooCommerce's own list, drawn as the design draws it. The theme paints the
   tabs yellow with !important, so these say so back.
   -------------------------------------------------------------------------- */

.sc-pwoo--tabs .woocommerce-tabs {
	padding: 0;
	border: 1px solid var(--sc-line-soft);
	border-radius: var(--sc-radius-xl);
	background: var(--sc-surface);
	overflow: hidden;
}

.sc-page .sc-pwoo--tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-2);
	margin: 0;
	padding: var(--sc-space-3) var(--sc-space-5) 0;
	border-bottom: 1px solid var(--sc-line-soft);
	list-style: none;
}

.sc-page .sc-pwoo--tabs ul.tabs::before,
.sc-page .sc-pwoo--tabs ul.tabs::after {
	display: none;
}

/* WooCommerce core overlaps its tabs by 5px and rounds them; the design
   lays them out in a plain row, so each of those is said back here. */
.sc-page .sc-pwoo--tabs ul.tabs li,
.woocommerce .sc-page .sc-pwoo--tabs ul.tabs li,
.woocommerce div.product .sc-pwoo--tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.sc-page .sc-pwoo--tabs ul.tabs li::before,
.sc-page .sc-pwoo--tabs ul.tabs li::after {
	display: none !important;
}

/* Core gives the link `padding: .5em 0`, which runs the labels together. */
.sc-page .sc-pwoo--tabs ul.tabs li a,
.woocommerce div.product .sc-pwoo--tabs ul.tabs li a {
	display: block;
	padding: var(--sc-space-3) var(--sc-space-4) !important;
	border-bottom: 2px solid transparent;
	color: var(--sc-body);
	font-size: var(--sc-fs-xs);
	font-weight: 600;
	text-decoration: none;
}

.sc-page .sc-pwoo--tabs ul.tabs li a:hover {
	color: var(--sc-green-900);
}

.sc-page .sc-pwoo--tabs ul.tabs li.active a,
.woocommerce .sc-page .sc-pwoo--tabs ul.tabs li.active a,
.woocommerce div.product .sc-pwoo--tabs ul.tabs li.active a {
	border-bottom-color: var(--sc-green-900);
	color: var(--sc-green-900);
	font-weight: 700;
}

.sc-pwoo--tabs .panel {
	margin: 0;
	padding: var(--sc-space-6) var(--sc-space-5);
}

.sc-page .sc-pwoo--tabs .panel h2,
.sc-page .sc-pwoo--tabs .panel > h2 {
	margin-bottom: var(--sc-space-4);
	color: var(--sc-green-900);
	font-size: var(--sc-fs-h3);
	font-weight: 700;
}

.sc-pwoo--tabs .panel p {
	color: var(--sc-body);
	font-size: var(--sc-fs-xs);
	line-height: 1.65;
}

.sc-pwoo--tabs .panel p + p {
	margin-top: var(--sc-space-3);
}

/* --------------------------------------------------------------------------
   What customers said
   -------------------------------------------------------------------------- */

.sc-previews__body {
	display: grid;
	grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr);
	gap: var(--sc-space-5) var(--sc-space-6);
	align-items: start;
}

/* The quotes run the full width under the score, so three fit side by side
   however narrow the column holding them is. */
.sc-previews__quotes {
	grid-column: 1 / -1;
}

.sc-previews__average {
	color: var(--sc-green-900);
	font-size: clamp(34px, 28px + 1.2vw, 44px);
	font-weight: 800;
	line-height: 1;
}

.sc-previews__score .sc-stars {
	margin-top: var(--sc-space-2);
}

.sc-previews__count {
	margin-top: var(--sc-space-2);
	color: var(--sc-muted);
	font-size: 12px;
}

.sc-previews__bars {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-previews__bars li {
	display: grid;
	grid-template-columns: 14px minmax(0, 1fr) 38px;
	align-items: center;
	gap: var(--sc-space-3);
	color: var(--sc-muted);
	font-size: 12px;
}

.sc-previews__track {
	height: 7px;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-line-soft);
	overflow: hidden;
}

.sc-previews__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--sc-gold-500);
}

.sc-previews__percent {
	text-align: right;
}

.sc-previews__quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--sc-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-previews__quote {
	padding: var(--sc-space-4);
	border: 1px solid var(--sc-line-soft);
	border-radius: var(--sc-radius-lg);
	background: var(--sc-surface);
}

.sc-previews__quote-top {
	display: flex;
	align-items: center;
	gap: var(--sc-space-2);
	justify-content: space-between;
}

.sc-previews__when {
	color: var(--sc-muted);
	font-size: 11px;
}

.sc-previews__text {
	margin-top: var(--sc-space-3);
	color: var(--sc-body);
	font-size: 12.5px;
	line-height: 1.5;
}

.sc-previews__who {
	display: flex;
	align-items: center;
	gap: var(--sc-space-2);
	margin-top: var(--sc-space-3);
}

.sc-previews__who img,
.sc-previews__who .avatar {
	display: inline-block;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-cream);
}

.sc-previews__who strong {
	display: block;
	color: var(--sc-ink);
	font-size: 12px;
}

.sc-previews__who small {
	color: var(--sc-muted);
	font-size: 11px;
}

.sc-previews__link {
	margin-top: var(--sc-space-4);
	text-align: right;
}

.sc-previews__link a {
	color: var(--sc-green-900);
	font-size: 13px;
	font-weight: 700;
}

@media (max-width: 991px) {
	.sc-previews__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The invitation card's link reads as a button, not as text on a photo. */
.sc-ppromo .sc-card--cover .sc-card__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-top: var(--sc-space-3);
	padding: 9px 18px;
	border-radius: var(--sc-radius-sm);
	background: var(--sc-gold-500);
	color: var(--sc-on-dark);
	font-size: 13px;
	font-weight: 700;
	text-shadow: none;
}

.sc-ppromo .sc-card--cover .sc-card__title a {
	text-decoration: none;
	box-shadow: none;
}

.sc-ppromo .sc-card--cover .sc-card__body {
	gap: var(--sc-space-2);
}

/* --------------------------------------------------------------------------
   The Overview tab, and the name's second line
   -------------------------------------------------------------------------- */

.sc-poverview__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--sc-space-6);
	margin-top: var(--sc-space-6);
	padding-top: var(--sc-space-6);
	border-top: 1px solid var(--sc-line-soft);
}

.sc-poverview__text + .sc-poverview__columns {
	margin-top: var(--sc-space-5);
}

.sc-page .sc-poverview__columns .sc-pcard__title {
	font-size: var(--sc-fs-h4);
}

.sc-page .sc-phead__subtitle--strong {
	margin-top: 2px;
	color: var(--sc-title-color, var(--sc-green-900));
	font-family: var(--sc-font);
	font-size: var(--sc-title-size, clamp(22px, 17px + 0.9vw, 28px));
	font-weight: var(--sc-title-weight, 800);
	line-height: 1.2;
}

.sc-phead__review {
	display: inline-block;
	margin-top: var(--sc-space-2);
	color: var(--sc-green-900);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: underline;
}

.sc-phead__review:hover {
	color: var(--sc-green-700);
}

/* --------------------------------------------------------------------------
   Tabs on a phone

   The headings sit beside each panel at every width; only a narrow screen
   shows them, and there the tab bar steps aside.
   -------------------------------------------------------------------------- */

.sc-ptabs__head {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: var(--sc-space-3);
	padding: var(--sc-space-4) var(--sc-space-5);
	border: 0;
	border-top: 1px solid var(--sc-line-soft);
	background: none;
	color: var(--sc-green-900);
	font-family: var(--sc-font);
	font-size: var(--sc-fs-xs);
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.sc-ptabs.is-accordion .sc-ptabs__head {
	display: flex;
}

/* A plus that becomes a minus, drawn rather than fetched. */
.sc-ptabs__head::after {
	content: "";
	width: 11px;
	height: 11px;
	flex: none;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--sc-dur) var(--sc-ease);
}

.sc-ptabs__head[aria-expanded="true"]::after {
	transform: rotate(-135deg) translate(-3px, -3px);
}

.sc-ptabs.is-accordion ul.tabs {
	display: none !important;
}

.sc-ptabs.is-accordion .panel.is-closed,
.sc-ptabs.is-accordion .wc-tab.is-closed {
	display: none !important;
}

.sc-ptabs.is-accordion .panel {
	padding-top: 0;
}

/* Between phone and desktop the bar still fits, as long as it may scroll. */
@media (min-width: 768px) and (max-width: 991px) {
	.sc-page .sc-pwoo--tabs ul.tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.sc-page .sc-pwoo--tabs ul.tabs::-webkit-scrollbar {
		display: none;
	}

	.sc-page .sc-pwoo--tabs ul.tabs li {
		flex: 0 0 auto;
	}
}