/* =========================================================
   SKI SCHOOL — BOOKABLE SERVICE PRODUCT TEMPLATE

   Scope: single-product pages of the "clases-reservables"
   category only (enqueue guard in ski-school-booking-ui.php),
   and every selector is additionally anchored to
   body.single-product plus a .ski-product-* / .ski-pc-*
   semantic class. Two independent locks.

   Dresses the Divi Theme Builder template "Producto —
   Servicio Reservable" (real Divi sections / rows / columns /
   Woo modules). The CONTROLS inside the configurator are
   styled in booking-ui.css; the copy in the value section
   comes from each product's own WooCommerce long description.

   Page order: header → hero → value → booking steps →
   configurator → FAQ → support → footer. The configurator is
   deliberately not the first thing on the page.

   Visual language, metrics and components are the approved
   ones from the Home2 / Clases de esquí pages, restated here
   because those files are page-id scoped and cannot be reused
   from a product template. Tokens come from the Divi global
   colour / design variables with literal fallbacks.

   Breakpoints follow the project rule: <=980 / >=981.
   ========================================================= */

body.single-product {
	--ski-deep:  var(--gcid-secondary-color, #214A5E);
	--ski-blue:  var(--gcid-primary-color, #26ADE2);
	--ski-ink:   var(--gcid-heading-color, #0F2430);
	--ski-snow:  #FFFFFF;
	--ski-ice:   var(--gcid-9806f6e3-daa3-4d8b-9846-2bf013d9f564, #E8F1F5);
	--ski-line:  rgba(33, 74, 94, 0.16);
	--ski-muted: rgba(15, 36, 48, 0.72);

	--ski-tech:  var(--gvid-b5547a12-68b7-4dee-9a11-c6f6c6f0d32b, Orbitron), system-ui, sans-serif;

	/* Aligned to the project's Content Max Width variable (1240px). */
	--ski-edge:        max(48px, calc((100vw - 1240px) / 2));
	--ski-space:       clamp(64px, 6vw, 96px);
	--ski-space-dense: clamp(52px, 4.8vw, 76px);

	/* One place to change how far below the viewport top a sticky
	   element and an in-page anchor come to rest. The site header is
	   NOT fixed, so this is breathing room rather than a header
	   clearance; the admin-bar rule below adds the real bar height
	   only when the bar is actually in the DOM, so nothing is
	   hardcoded to a logged-in guess. */
	--ski-sticky-top: 32px;
}

body.single-product.admin-bar {
	--ski-sticky-top: 64px;
}


/* =========================================================
   1. BAND RHYTHM
   ========================================================= */

body.single-product .ski-band {
	position: relative;
	padding: var(--ski-space) var(--ski-edge) !important;
}

body.single-product .ski-band--dense {
	padding: var(--ski-space-dense) var(--ski-edge) !important;
}

body.single-product .ski-band > .et_pb_row,
body.single-product .ski-product-hero > .et_pb_row {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.single-product .ski-band > .ski-section-head {
	margin-bottom: clamp(20px, 2vw, 32px) !important;
}

body.single-product .ski-section-head > .et_pb_column {
	width: 100% !important;
	max-width: 720px !important;
	margin: 0 !important;
	background-image: none !important;
}


/* =========================================================
   2. SHARED TYPE
   ========================================================= */

body.single-product .ski-eyebrow {
	margin: 0 0 14px !important;
}

body.single-product .ski-eyebrow .et_pb_text_inner {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--ski-blue);
}

body.single-product .ski-eyebrow .et_pb_text_inner::before {
	content: "";
	flex: 0 0 auto;
	width: 32px;
	height: 2px;
	background: currentColor;
}

body.single-product .ski-eyebrow p {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--ski-tech);
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase;
	color: var(--ski-blue) !important;
}

body.single-product .ski-display-h2,
body.single-product .ski-display-h2 .et_pb_heading_container {
	margin: 0 !important;
	text-align: left !important;
}

body.single-product .ski-display-h2 .et_pb_module_header {
	margin: 0 !important;
	padding: 0 !important;
	max-width: 17ch;
	font-size: clamp(1.875rem, 1.1rem + 1.9vw, 2.9rem) !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.03em !important;
	color: var(--ski-deep) !important;
	text-align: left !important;
	text-wrap: balance;
}

body.single-product .ski-display-h2--sm .et_pb_module_header {
	max-width: 16ch;
	font-size: clamp(1.75rem, 1.1rem + 1.5vw, 2.5rem) !important;
}


/* =========================================================
   3. PRODUCT HERO

   Compact and product-scaled, NOT a landing-page hero: copy
   left, one authentic photograph right, and a single primary
   action that takes the customer down to the configurator.
   No form here.
   ========================================================= */

body.single-product .ski-product-hero {
	padding:
		clamp(40px, 4vw, 64px)
		var(--ski-edge)
		clamp(48px, 4.6vw, 72px) !important;
	background-color: var(--ski-snow) !important;
}

body.single-product .ski-product-hero__grid {
	display: grid !important;
	grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
	column-gap: clamp(36px, 4vw, 72px);
	align-items: center;
}

body.single-product .ski-product-hero__grid > .et_pb_column {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	min-width: 0;
	background-image: none !important;
}

body.single-product .ski-product-eyebrow {
	margin: 0 0 16px !important;
}

body.single-product .ski-product-title {
	margin: 0 0 18px !important;
}

body.single-product .ski-product-title h1 {
	margin: 0 !important;
	padding: 0 !important;
	font-size: clamp(2.125rem, 1.3rem + 2.1vw, 3.25rem) !important;
	font-weight: 800 !important;
	line-height: 1.04 !important;
	letter-spacing: -0.03em !important;
	color: var(--ski-deep) !important;
	text-wrap: balance;
}

body.single-product .ski-product-hero__lead {
	margin: 0 0 28px !important;
}

body.single-product .ski-product-hero__lead p {
	margin: 0;
	padding: 0;
	max-width: 48ch;
	font-size: 18px;
	line-height: 1.6;
	color: var(--ski-muted);
}

body.single-product .ski-product-hero__cta {
	margin: 0 !important;
}

body.single-product .ski-product-hero__cta .et_pb_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
}

/* A hairline trust line, not a second Trust Strip section: the three
   approved reassurance items on one rule under the action. */
body.single-product .ski-product-hero__trust {
	margin: 26px 0 0 !important;
	padding: 18px 0 0 !important;
	border-top: 1px solid var(--ski-line);
}

body.single-product .ski-product-hero__trust ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 26px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

body.single-product .ski-product-hero__trust li {
	position: relative;
	margin: 0;
	padding: 0 0 0 18px;
	font-family: var(--ski-tech);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--ski-deep);
}

body.single-product .ski-product-hero__trust li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border: solid var(--ski-blue);
	border-width: 1.5px 1.5px 0 0;
	transform: rotate(45deg);
}

/* --- Hero media ---------------------------------------------------
   One intentional crop so the right half never becomes a letterbox
   strip or a tall empty area, and a height band that keeps the whole
   hero in the ~500-620px range on desktop. */

/* The figure is only a clipping shell — the proportion is declared on
   the gallery below. No background colour: the image always fills the
   frame, so there is never leftover area, and if anything ever failed to
   fill it there would be no tinted box left to show through. */
body.single-product .ski-product-media__figure {
	margin: 0 !important;
	overflow: hidden;
	border-radius: var(--gvid-b1ca321e-a7f9-435b-92bf-2d3cb4d123e5, 16px);
	background: none;
	line-height: 0;
}

/* THE FRAME.

   It lives on .woocommerce-product-gallery, not on the inner wrapper,
   because WooCommerce's gallery slider is active on this theme
   (wc-product-gallery-slider) and at runtime flexslider rewrites
   everything below this element: it injects a .flex-viewport with an
   INLINE PIXEL HEIGHT computed from the source photograph, turns
   __wrapper into a track with an inline width and a translate3d, and
   gives each slide an inline width. That inline height is exactly why
   the frame used to change size from product to product and why the
   photograph sat off-centre. This element is the last one flexslider
   leaves alone, so the proportion is declared here and everything
   underneath is forced to fill it. */
body.single-product .ski-product-media__figure .woocommerce-product-gallery {
	position: relative;
	margin: 0 !important;
	float: none !important;
	width: 100% !important;
	max-width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--gvid-b1ca321e-a7f9-435b-92bf-2d3cb4d123e5, 16px);
	/* Visible even if the gallery script never runs — WooCommerce ships
	   this element at opacity:0 inline and fades it in with JS. */
	opacity: 1 !important;
	line-height: 0;
}

/* ONE frame for every bookable service.

   The frame owns the proportion, not the photograph: the wrapper holds a
   fixed 4:3 box at every width and the image fills it with object-fit:
   cover. That is what makes Clase de esqui, Snowboard, Ski Kids and Full
   Day present identically even though their source files are 600x338,
   900x600 and 900x1600. Source images are never resized or re-cropped on
   disk. Because the image always fills the box there is no leftover area
   to show, which is also why the frame carries no background colour. */
/* Everything under the frame fills it absolutely. !important is required
   and is used deliberately: flexslider writes width/height/transform as
   INLINE styles, which no ordinary rule can beat. .flex-viewport only
   exists once the script has run; listing it here covers both the
   server-rendered and the initialised state. */
body.single-product .ski-product-media__figure .flex-viewport,
body.single-product .ski-product-media__figure .woocommerce-product-gallery__wrapper,
body.single-product .ski-product-media__figure .woocommerce-product-gallery__image,
body.single-product .ski-product-media__figure .woocommerce-product-gallery__image > a {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	transform: none !important;
	line-height: 0;
}

body.single-product .ski-product-media__figure img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	margin: 0 !important;
	object-fit: cover;
	/* The default that must work for any future product without help. */
	object-position: center center;
}

/* A single-image gallery has nothing to navigate, and the zoom/lightbox
   affordances are noise in a booking flow. */
body.single-product .ski-product-media__figure .flex-control-nav,
body.single-product .ski-product-media__figure .flex-direction-nav,
body.single-product .ski-product-media__figure .woocommerce-product-gallery__trigger,
body.single-product .ski-product-media__figure .zoomImg {
	display: none !important;
}

/* PER-PRODUCT CROP OVERRIDES
   Only when a subject would genuinely be cut badly. One line each, keyed
   to the WooCommerce body class so it cannot affect anything else:

     body.postid-1513 .ski-product-media__figure img { object-position: center top; }

   None are in use: center center is correct for every current product. */

/* Zoom / lightbox triggers are noise in a booking flow. */
body.single-product .ski-product-media__figure .woocommerce-product-gallery__trigger {
	display: none !important;
}


/* =========================================================
   4. VALUE / PERSONALISATION  (product-specific slot)

   Everything below is styling for markup that lives in each
   product's own WooCommerce long description. No copy, no
   product name and no figure is stated here — only the visual
   system — so a second bookable service styles itself the
   moment its description is written.
   ========================================================= */

/* Concise introduction to the configurator, not an editorial section:
   the dense band tier on both sides, so the form starts sooner. */
body.single-product .ski-product-value {
	background-color: var(--ski-snow) !important;
	padding:
		clamp(44px, 4vw, 60px)
		var(--ski-edge)
		clamp(36px, 3.4vw, 52px) !important;
}

body.single-product .ski-product-content__body {
	margin: 0 !important;
}

/* A product whose long description is still empty must not leave a
   tall blank band. The slot collapses when Divi renders no
   description module, and reappears by itself once the description is
   written. Progressive: where :has() is unsupported the section just
   stays empty, as before. */
body.single-product .ski-product-value:not(:has(.ski-product-content__body)) {
	display: none;
}

body.single-product .ski-pc + .ski-pc {
	margin-top: clamp(24px, 2.4vw, 34px);
}

body.single-product .ski-pc__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px !important;
	padding: 0;
	font-family: var(--ski-tech);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ski-blue);
}

body.single-product .ski-pc__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 32px;
	height: 2px;
	background: currentColor;
}

body.single-product .ski-pc__h2 {
	margin: 0 !important;
	padding: 0 !important;
	max-width: 17ch;
	font-size: clamp(1.75rem, 1.1rem + 1.5vw, 2.5rem) !important;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--ski-deep);
	text-wrap: balance;
}

body.single-product .ski-pc__lead {
	margin: 16px 0 0 !important;
	padding: 0;
	max-width: 58ch;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ski-muted);
}

/* --- Three indexed benefit items ---------------------------------- */
/* Same technical grammar as the booking steps: one continuous hairline
   carrying three items, each opening with a short Ski School Blue tick
   and an Orbitron index. Reused, not reinvented. No cards. */

body.single-product .ski-pc-benefits__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(32px, 3.2vw, 64px);
	row-gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ski-pc-benefit;
}

body.single-product .ski-pc-benefits__list::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--ski-line);
	pointer-events: none;
}

body.single-product .ski-pc-benefit {
	position: relative;
	margin: 0;
	padding: 26px 0 0;
	counter-increment: ski-pc-benefit;
	list-style: none;
}

body.single-product .ski-pc-benefit::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 56px;
	height: 3px;
	background: var(--ski-blue);
}

body.single-product .ski-pc-benefit__title::before {
	content: counter(ski-pc-benefit, decimal-leading-zero);
	display: block;
	margin: 0 0 6px;
	font-family: var(--ski-tech);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	color: var(--ski-blue);
	font-variant-numeric: tabular-nums;
}

body.single-product .ski-pc-benefit__title {
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 20px !important;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--ski-deep);
}

body.single-product .ski-pc-benefit__copy {
	margin: 0 !important;
	padding: 0;
	max-width: 40ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ski-muted);
}


/* --- Editorial experience block ------------------------------------ */
/* The one moment of desire on the page, between "how it adapts to me"
   and the form. Controlled asymmetry: the photograph takes the smaller
   half so the copy leads. Still product content — image, copy and the
   three micro-benefits all live in the product's own long description,
   so another service writes its own without touching this file. */

body.single-product .ski-pc-exp {
	display: grid;
	grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
	column-gap: clamp(32px, 3.6vw, 64px);
	align-items: center;
	margin-top: clamp(40px, 4vw, 64px) !important;
	padding-top: clamp(36px, 3.6vw, 56px);
	border-top: 1px solid var(--ski-line);
}

body.single-product .ski-pc-exp__media {
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--gvid-b1ca321e-a7f9-435b-92bf-2d3cb4d123e5, 16px);
	line-height: 0;
}

/* wpautop appends a <br> after an image inside a figure; it is inert at
   line-height 0 but there is no reason to carry it. */
body.single-product .ski-pc-exp__media br {
	display: none;
}

/* A frame, like the hero's — the photograph never dictates the height. */
body.single-product .ski-pc-exp__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
}

body.single-product .ski-pc-exp__body {
	min-width: 0;
}

body.single-product .ski-pc-exp__body .ski-pc__h2 {
	max-width: 18ch;
}

body.single-product .ski-pc-exp__body .ski-pc__lead {
	max-width: 52ch;
}

/* Three micro-benefits on one hairline — the same technical grammar as
   the indexed items above, not a second card grid. */
body.single-product .ski-pc-exp__points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(16px, 1.8vw, 28px);
	margin: clamp(24px, 2.4vw, 34px) 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--ski-line);
	list-style: none;
}

body.single-product .ski-pc-exp__points li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-product .ski-pc-exp__points img {
	flex: 0 0 auto;
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
}

body.single-product .ski-pc-exp__points span {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ski-deep);
	text-wrap: balance;
}


/* =========================================================
   6. CONFIGURATOR SECTION — the conversion moment

   The form gets the wider half. The left column is a short
   context note with its OWN natural height — it is not a
   panel stretched to match the form, which is what produced
   the tall empty rectangle in the previous build.
   ========================================================= */

body.single-product .ski-product-configurator {
	background-color: var(--ski-snow) !important;
	/* Tu clase and the configurator are both on Snow and the Ice booking-
	   steps band that used to separate them is gone, so one hairline does
	   that job instead of a tonal change. */
	border-top: 1px solid var(--ski-line);
	padding-top: clamp(44px, 4vw, 64px) !important;
	/* The site header is not fixed, so this is just breathing room for
	   the #configurador anchor jump from the hero CTA. */
	scroll-margin-top: var(--ski-sticky-top);
	scroll-behavior: auto;
}

body.single-product .ski-product-configurator__lead {
	margin: 16px 0 0 !important;
}

body.single-product .ski-product-configurator__lead p {
	margin: 0;
	padding: 0;
	max-width: 58ch;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ski-muted);
}

body.single-product .ski-product-config__grid {
	display: grid !important;
	grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
	column-gap: clamp(32px, 3.4vw, 56px);
	/* start, never stretch: each column keeps its own height. */
	align-items: start !important;
}

body.single-product .ski-product-config__grid > .et_pb_column {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	min-width: 0;
	background-image: none !important;
}

/* --- Left context column ------------------------------------------ */
/* Natural height. Sticky is a desktop convenience, never a
   dependency: if it is unsupported the note simply scrolls away.
   position:sticky only — no ScrollTrigger, no pinning — and its
   containing block is this row, so it cannot leave the configurator
   section. */

/* THE STICKY PANEL — stated as "static by default, sticky only from
   981px up", never as "sticky by default, undone below 980".

   The inverted form matters: with the old shape, any ordering, nesting
   or media-block accident anywhere later in this file could leave the
   panel static on desktop, and that failure is silent. As a min-width
   rule there is nothing to undo, so it cannot be lost that way.

   The panel is a grid item of .ski-product-config__grid, so it sticks
   inside that row: it can never escape the configurator section and it
   releases naturally when the row ends. align-self:start and
   height:fit-content are both load-bearing — a stretched grid item is
   as tall as the row and therefore has no room to travel. */
body.single-product .ski-product-aside {
	position: static;
	top: auto;
}

@media (min-width: 981px) {
	body.single-product .ski-product-config__grid > .et_pb_column.ski-product-aside {
		position: -webkit-sticky !important;
		position: sticky !important;
		top: var(--ski-sticky-top);
		align-self: start !important;
		height: -moz-fit-content;
		height: fit-content;
		/* Above the form's own stacking, below the header. */
		z-index: 1;
	}
}

body.single-product .ski-product-aside__box {
	margin: 0 !important;
	padding: clamp(22px, 2.2vw, 30px) !important;
	background: var(--ski-ice);
	border-radius: var(--gvid-1a7de837-bdb9-4740-aea3-b222bbda122d, 14px);
}

body.single-product .ski-product-aside__box dl {
	margin: 0;
	padding: 0;
}

/* Two items, no heading: the panel supports the form, it does not
   announce itself. The first item needs no rule above it. */
body.single-product .ski-product-aside__box dt:first-of-type {
	padding-top: 0;
	border-top: 0;
}

body.single-product .ski-product-aside__box dt {
	margin: 0 0 4px;
	padding: 14px 0 0;
	border-top: 1px solid var(--ski-line);
	font-family: var(--ski-tech);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--ski-blue);
}

body.single-product .ski-product-aside__box dd {
	margin: 0 0 16px;
	padding: 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--ski-muted);
}

body.single-product .ski-product-aside__box dd:last-of-type {
	margin-bottom: 0;
}

body.single-product .ski-product-aside__help {
	margin: 18px 0 0 !important;
	padding: 14px 0 0;
	border-top: 1px solid var(--ski-line);
	font-size: 15px;
	line-height: 1.5;
}

body.single-product .ski-product-aside__help a {
	font-weight: 700;
	color: var(--ski-blue);
	text-decoration: none;
}

body.single-product .ski-product-aside__help a:hover,
body.single-product .ski-product-aside__help a:focus-visible {
	text-decoration: underline;
}

/* --- Right configurator column ------------------------------------ */

body.single-product .ski-product-config {
	box-sizing: border-box;
	padding: clamp(24px, 2.4vw, 32px) !important;
	background: #F7FAFB !important;
	border: 1px solid var(--ski-line);
	border-radius: var(--gvid-b1ca321e-a7f9-435b-92bf-2d3cb4d123e5, 16px);
}

body.single-product .ski-product-form,
body.single-product .ski-product-form .cart,
body.single-product .ski-product-notice {
	margin: 0 !important;
}

/* WooCommerce notices (add-to-cart errors and confirmations) must sit
   at the top of the working surface, not below the fold. */
body.single-product .ski-product-notice .woocommerce-error,
body.single-product .ski-product-notice .woocommerce-message,
body.single-product .ski-product-notice .woocommerce-info {
	margin: 0 0 18px !important;
	font-size: 15px;
	line-height: 1.5;
}


/* =========================================================
   7. FAQ — approved hairline accordion

   Divi accordion on Ice, title left / questions right, the
   same component the approved internal pages use.
   ========================================================= */

body.single-product .ski-product-faq {
	background-color: var(--ski-ice) !important;
}

body.single-product .ski-faq__split {
	display: grid !important;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	column-gap: clamp(40px, 4.5vw, 88px);
	align-items: start;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	background-image: none !important;
}

body.single-product .ski-faq__split > .et_pb_heading,
body.single-product .ski-faq__split > .et_pb_accordion {
	margin: 0 !important;
}

body.single-product .ski-product-faq .et_pb_toggle {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--ski-line) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

body.single-product .ski-product-faq .et_pb_toggle:first-child {
	border-top: 1px solid var(--ski-line) !important;
}

body.single-product .ski-product-faq .et_pb_toggle_title {
	position: relative;
	margin: 0 !important;
	padding: 18px 56px 18px 0 !important;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem) !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--ski-deep) !important;
	cursor: pointer;
}

/* Plus turning into minus — a shape change, not only a colour change. */
body.single-product .ski-product-faq .et_pb_toggle_title::before {
	content: "" !important;
	position: absolute;
	top: 50% !important;
	right: 4px !important;
	left: auto !important;
	width: 16px;
	height: 16px;
	margin-top: -8px !important;
	font-size: 0 !important;
	background:
		linear-gradient(var(--ski-blue), var(--ski-blue)) center / 16px 2px no-repeat,
		linear-gradient(var(--ski-blue), var(--ski-blue)) center / 2px 16px no-repeat;
	transition: background-size 0.25s ease;
}

body.single-product .ski-product-faq .et_pb_toggle_open .et_pb_toggle_title::before {
	display: block !important;
	background:
		linear-gradient(var(--ski-blue), var(--ski-blue)) center / 16px 2px no-repeat,
		linear-gradient(var(--ski-blue), var(--ski-blue)) center / 2px 0 no-repeat;
}

@media (hover: hover) and (pointer: fine) {
	body.single-product .ski-product-faq .et_pb_toggle_title:hover {
		color: var(--ski-blue) !important;
	}
}

body.single-product .ski-product-faq .et_pb_toggle_title:focus-visible {
	outline: 3px solid var(--ski-blue);
	outline-offset: 3px;
}

body.single-product .ski-product-faq .et_pb_toggle_content {
	padding: 0 56px 22px 0 !important;
	max-width: 68ch;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--ski-muted);
}

body.single-product .ski-product-faq .et_pb_toggle_content p {
	margin: 0;
	padding: 0;
}


/* =========================================================
   8. SUPPORT CTA

   Deliberately NOT a second booking CTA — the configurator
   above owns the conversion. One slim band, one secondary
   action.
   ========================================================= */

body.single-product .ski-product-support {
	background-color: var(--ski-snow) !important;
}

/* Single column: the action sits directly under the copy it belongs to.
   A two-column split pushed "Contactar" to the far edge of a 1240px band,
   which read as a floating button rather than a reply to the question. */
body.single-product .ski-product-support__bar > .et_pb_column {
	display: block !important;
	width: 100% !important;
	max-width: 640px !important;
	margin: 0 !important;
	background-image: none !important;
}

body.single-product .ski-product-support__bar .ski-eyebrow {
	grid-column: 1;
	grid-row: 1;
	margin: 0 0 8px !important;
}

body.single-product .ski-product-support__title {
	grid-column: 1;
	grid-row: 2;
	margin: 0 !important;
}

body.single-product .ski-product-support__copy {
	grid-column: 1;
	grid-row: 3;
	margin: 12px 0 0 !important;
}

body.single-product .ski-product-support__copy p {
	margin: 0;
	padding: 0;
	max-width: 56ch;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--ski-muted);
}

body.single-product .ski-product-support__cta {
	margin: 22px 0 0 !important;
	text-align: left;
}

body.single-product .ski-product-support__cta .et_pb_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	white-space: nowrap;
}


/* =========================================================
   9. <= 980px

   Recomposed, not shrunk. Source order already gives the
   required mobile sequence: hero → value → steps →
   configurator intro → context → form → total → CTA → FAQ →
   support → footer. The product photograph appears once, in
   the hero, and is not repeated beside the form.
   ========================================================= */

@media (max-width: 980px) {
	body.single-product {
		--ski-edge: 40px;
		--ski-space: 64px;
		--ski-space-dense: 56px;
		--ski-sticky-top: 24px;
	}

	body.single-product .ski-product-hero {
		padding: 32px var(--ski-edge) 48px !important;
	}

	body.single-product .ski-product-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	/* Image first on mobile — the product before the pitch. */
	body.single-product .ski-product-hero__media {
		order: -1;
	}

	body.single-product .ski-product-hero__cta .et_pb_button,
	body.single-product .ski-product-support__cta .et_pb_button {
		width: 100%;
	}





	body.single-product .ski-pc-benefits__list {
		grid-template-columns: minmax(0, 1fr);
	}

	body.single-product .ski-pc-benefits__list::after {
		display: none;
	}

	body.single-product .ski-pc-benefit {
		padding: 22px 0;
		border-top: 1px solid var(--ski-line);
	}

	body.single-product .ski-pc-benefit:last-child {
		padding-bottom: 0;
	}

	body.single-product .ski-pc-benefit__copy {
		max-width: 60ch;
	}

	body.single-product .ski-product-config__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	/* Sticky is declared only from 981px up, so there is nothing to undo
	   here; these are belt-and-braces in case a stray rule ever sets it. */
	body.single-product .ski-product-aside {
		position: static;
		top: auto;
		align-self: auto;
		height: auto;
		z-index: auto;
	}

	body.single-product .ski-faq__split {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	body.single-product .ski-product-faq .et_pb_toggle_title {
		padding: 20px 44px 20px 0 !important;
	}

	body.single-product .ski-product-faq .et_pb_toggle_content {
		padding: 0 0 20px !important;
	}

	body.single-product .ski-pc-exp {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 26px;
	}

	/* Photograph first, then the copy it sets up. */
	body.single-product .ski-pc-exp__media {
		order: -1;
	}

	body.single-product .ski-pc-exp__media img {
		aspect-ratio: 16 / 10;
	}

	body.single-product .ski-pc-exp__points {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 14px;
	}
}

@media (max-width: 620px) {
	body.single-product {
		--ski-edge: 24px;
		--ski-space: 56px;
		--ski-space-dense: 48px;
	}

	body.single-product .ski-product-hero {
		padding: 24px var(--ski-edge) 44px !important;
	}

	body.single-product .ski-product-config {
		padding: 18px !important;
	}

	body.single-product .ski-product-aside__box {
		padding: 20px !important;
	}

	body.single-product .ski-product-hero__trust ul {
		gap: 8px 18px;
	}
}


/* =========================================================
   10. FAIL-SAFES

   Nothing on a booking page may depend on JavaScript to
   become visible, and nothing may push the page sideways.
   ========================================================= */

body.single-product .ski-product-title,
body.single-product .ski-product-hero__lead,
body.single-product .ski-product-hero__cta,
body.single-product .ski-product-hero__trust,
body.single-product .ski-product-media__figure,
body.single-product .ski-product-config,
body.single-product .ski-product-aside,
body.single-product .ski-product-form,
body.single-product .ski-product-content__body,
body.single-product .ski-product-faq .et_pb_accordion,
body.single-product .ski-product-support__bar {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* Horizontal containment lives ONLY on the hero shell, which holds no
   sticky element.

   It must never be applied to .ski-band: per CSS Overflow 3, when one
   axis is `clip` and the other is `visible`, the visible axis computes
   to `auto`. So `overflow-x: clip` silently turned every band — the
   configurator included — into a scroll container, and a position:sticky
   descendant then sticks to THAT scrollport instead of the viewport.
   The section is exactly as tall as its content, so there was nothing to
   scroll and the panel never stuck. That is the whole bug.

   Overflow is not needed for containment here anyway: every grid on the
   page uses minmax(0, …) tracks, which is what actually prevents a wide
   child from pushing the page sideways. */
body.single-product .ski-product-shell {
	max-width: 100%;
	overflow-x: clip;
}

body.single-product .ski-band {
	max-width: 100%;
}

/* The sticky chain must stay a plain, non-scrolling, non-transformed
   ancestry all the way up from the panel. Any overflow value other than
   visible creates a scrollport; any transform/filter/perspective creates
   a containing block. Either one silently disables sticky, and both are
   easy to reintroduce by accident. */
body.single-product .ski-product-configurator,
body.single-product .ski-product-config__grid,
body.single-product .ski-product-aside {
	overflow: visible;
	transform: none;
	filter: none;
	perspective: none;
}

@media (prefers-reduced-motion: reduce) {
	body.single-product .ski-product-faq .et_pb_toggle_title::before {
		transition: none;
	}
}