/*
 * Freedom Shop on this site: the colour under a cart line, and the
 * storefront's fit to the site's own header.
 */

/* A cart line's colour, under its name (see freedom_shop_cart_item_colour_html()). */
.freedom-shop-cart-colour { margin: 0.25rem 0 0; font-size: 0.8125rem; color: #6b7280; }

/* The chosen colourway's picture as a cart line's thumbnail: a render of the
   wing on white, so it is contained rather than cropped. */
img.colour-thumb { object-fit: contain !important; background: #fff; }

/* This site's theme hides the shop's sort control and result count, and makes
   every link in a product card a block, all !important. Inside the storefront
   they go back to whatever Freedom's rules, or the browser's, say. */
.freedom-shop-scope:not(#freedom-shop-scope) :is(a, p, form) { display: revert !important; }

/* The site's header is fixed over the top of the page, where Freedom's sits
   in a band of its own. The scope keeps that band's room, as Freedom's <body>
   does, and the product hero takes it back to run under the header, as there.
   The room is this site's header's height — 64px, or as tall as it is with a
   sale's banner on it, which assets/js/site.js measures — not Freedom's 90px,
   which left a strip of page between the header and the shop's band. */
.freedom-shop-scope:not(#freedom-shop-scope) {
	--header-h: 64px;
	padding-top: var(--header-h) !important;
}

/* Over the shop, and over a gear cut-out shown whole on white, there is no
   photograph behind the header: its white nav sits on Freedom's granite bar,
   as Freedom's own header does there. */
body.freedom-shop-storefront--archive #site-header,
body.freedom-shop-storefront--framed #site-header { background: #0a2029; }

/* A product card's price sits tight under its "From". */
.freedom-shop-scope:not(#freedom-shop-scope) .product-card__price { line-height: 1.1 !important; }

/* "From", on a product sold in options, on its own line above the price. */
.freedom-shop-scope:not(#freedom-shop-scope) .product-card__price .product-card__from {
	display: block !important;
	margin: 0 0 0.1rem !important;
	line-height: 1.2 !important;
}

/* Gear ordered in from its maker (see inc/lead-time.php): in stock here, or
   how long it takes, under the add-to-cart, over the hero's photograph like
   its excerpt — a tick for the one, a clock for the other. */
.freedom-shop-scope:not(#freedom-shop-scope) .freedom-lead-time {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.5rem !important;
	max-width: 52ch !important;
	margin: 1rem 0 0 !important;
	font-size: 0.875rem !important;
	line-height: 1.45 !important;
	color: rgb(255 255 255 / 90%) !important;
	text-shadow: 0 2px 20px rgb(10 32 41 / 50%) !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .freedom-lead-time__icon {
	display: inline-flex !important;
	flex: none !important;
	margin-top: 0.1rem !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .freedom-lead-time.is-on-shelf .freedom-lead-time__icon--clock,
.freedom-shop-scope:not(#freedom-shop-scope) .freedom-lead-time:not(.is-on-shelf) .freedom-lead-time__icon--check {
	display: none !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .freedom-lead-time.is-on-shelf {
	font-weight: 600 !important;
}

/* And under a line in the mini-cart and on the thank-you page. */
.freedom-shop-cart-lead-time { margin: 0.25rem 0 0; font-size: 0.8125rem; color: #6b7280; }

/* The site's own products' campaign tags ("2026 Winter Special") beside the
   Sale flag, over the hero's photograph (see templates/single-product.php). */
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__flags {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.5rem !important;
	align-self: flex-start !important;
	margin-bottom: 0.9rem !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__flags .product-hero__flag {
	margin-bottom: 0 !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__flag--campaign {
	background: rgb(255 255 255 / 16%) !important;
	border: 1px solid rgb(255 255 255 / 32%) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* The site's own products' fields in the add-to-cart — the tandem flight's
   date and booking details, a voucher's recipient — on a row of their own
   above the quantity and the button, laid out as a form: each label over its
   field, two to a row where there is room, in the hero's glass. */
/* A product sold in options keeps its fields with its button, under the
   options rather than beside them. */
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions .single_variation_wrap:has(.cttp-booking-date, .wccpf-fields-container, .woo-vou-fields-wrapper-variation) {
	flex: 1 0 100% !important;
	width: 100% !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions :is(.cttp-booking-date, .wccpf-fields-container, .woo-vou-fields-wrapper-variation, .woo-vou-preview-pdf-wrap) {
	flex: 1 0 100% !important;
	width: 100% !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions :is(.wcff-fields-group, .woo-vou-recipient-fields tbody) {
	width: 100% !important;
	max-width: 42rem !important;
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)) !important;
	gap: 0.85rem 1rem !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions :is(.wccpf_fields_table, .wccpf_fields_table tbody, .wccpf_fields_table tr, .wccpf_fields_table td, .woo-vou-recipient-fields, .woo-vou-recipient-fields tr, .woo-vou-recipient-fields td) {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions .woo-vou-recipient-fields tr:has(textarea) {
	grid-column: 1 / -1 !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions :is(.cttp-booking-date__label, .wccpf_label label, .woo-vou-recipient-fields td.label label) {
	display: block !important;
	margin: 0 0 0.45rem !important;
	font-size: 0.78rem !important;
	font-weight: var(--fw-semibold) !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: rgb(255 255 255 / 75%) !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions :is(.cttp-booking-date__label abbr, .wccpf_label label span, .woo-vou-gift-field-required) {
	text-decoration: none !important;
	color: inherit !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions :is(.cttp-booking-date__input, input.wccpf-field, .woo-vou-recipient-details) {
	display: block !important;
	width: 100% !important;
	height: var(--header-ctl-h) !important;
	padding-block: 0 !important;
	padding-right: 1rem !important;
	border: 1px solid rgb(255 255 255 / 32%) !important;
	border-radius: 0.75rem !important;
	background: rgb(255 255 255 / 14%) !important;
	box-sizing: border-box !important;
	font-family: var(--font-body) !important;
	font-size: 1rem !important;
	color: var(--text-on-dark) !important;
	color-scheme: dark;
}
/* Not the phone number's left: the country picker sets that itself, inline,
   to clear the flag it puts there. */
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions :is(.cttp-booking-date__input, input.wccpf-field:not(.iti__tel-input), .woo-vou-recipient-details) {
	padding-left: 1rem !important;
}
/* The date on its own, as wide as one of the fields below it. */
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions .cttp-booking-date__input {
	max-width: 20.5rem !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions textarea.woo-vou-recipient-details {
	height: auto !important;
	min-height: 5.5rem !important;
	padding-block: 0.75rem !important;
	resize: vertical !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions :is(.cttp-booking-date__input, input.wccpf-field, .woo-vou-recipient-details)::placeholder {
	color: rgb(255 255 255 / 55%) !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions :is(.cttp-booking-date__input, input.wccpf-field, .woo-vou-recipient-details):focus {
	outline: 2px solid rgb(255 255 255 / 70%) !important;
	outline-offset: 1px !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions .iti {
	display: block !important;
	width: 100% !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions .iti__selected-dial-code {
	color: var(--text-on-dark) !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions :is(.cttp-booking-date__note, .cttp-booking-date__outside) {
	display: block !important;
	margin-top: 0.4rem !important;
	font-size: 0.82rem !important;
	color: rgb(255 255 255 / 75%) !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions .cttp-booking-date__outside.is-hidden {
	display: none !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions .wccpf-validation-message {
	margin-top: 0.3rem !important;
	font-size: 0.8rem !important;
	color: #fca5a5 !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions a.woo_vou_preview_pdf {
	font-size: 0.9rem !important;
	color: var(--text-on-dark) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__actions .woo-vou-preview-loader {
	display: none !important;
}
.freedom-shop-scope:not(#freedom-shop-scope) .cttp-booking-window {
	margin: 0 0 1rem !important;
	font-size: 0.95rem !important;
	color: rgb(255 255 255 / 85%) !important;
}

/* A long name ("Tandem Paragliding Flight") on a phone: Freedom's 40px
   floor puts "PARAGLIDING" wider than the screen, which pushed the whole
   hero off its right edge. The floor gives way to the screen's width. */
.freedom-shop-scope:not(#freedom-shop-scope) .product-hero__title {
	font-size: clamp(min(40px, 9vw), 6vw, 84px) !important;
	overflow-wrap: break-word !important;
}