/* =========================================================================
   Healing Spa — VOL.2 fixes  ("CAMBIOS WEB HEALING VOL.2")
   PRESENTATION ONLY. Loaded last (after redesign.css + reserve-by-whatsapp.css).

   redesign.css repaints the shell with `html .et-db #et-boc .et-l ...` rules
   that carry an id, so a few selectors below mirror that prefix to out-rank
   them; !important alone is not enough against a higher-specificity rule.
   ========================================================================= */

/* ---- 1. Single product title: stop the mid-word break ------------------- */
/* Was rendering "MASAJE RELAX EXPERIENC / E" — too big for its column. */
html body .product_title,
html body .product_title.entry-title,
html .et-db #et-boc .et-l .product_title,
html body .et_pb_wc_title h1 {
	font-size: clamp(1.6rem, 2.4vw, 2.2rem) !important;
	line-height: 1.15 !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	hyphens: none !important;
	-webkit-hyphens: none !important;
}

/* ---- 2. Variation dropdown ("Duración") -------------------------------- */
/* The default table layout overlapped the label with the select. Stack them. */
html body .woocommerce div.product form.cart table.variations,
html body form.variations_form table.variations {
	display: block !important;
	width: 100% !important;
	border: 0 !important;
	margin: 0 0 1.2em !important;
	background: transparent !important;
}
html body form.variations_form table.variations tbody,
html body form.variations_form table.variations tr,
html body form.variations_form table.variations td {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
html body form.variations_form table.variations td.label {
	margin-bottom: .45em !important;
}
html body form.variations_form table.variations td.label label,
html .et-db #et-boc .et-l form.variations_form table.variations td.label label {
	color: #f6f2ea !important;
	font-family: var(--us-sans, 'Inter', sans-serif) !important;
	font-weight: 600 !important;
	font-size: .95rem !important;
	letter-spacing: .02em !important;
}

/* Black field, gold placeholder text, custom chevron. */
html body form.variations_form select,
html body .woocommerce div.product form.cart .variations select {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: .75em 2.4em .75em .9em !important;
	background-color: #14100b !important;
	color: var(--us-gold, #d4af37) !important;
	border: 1px solid var(--us-border, #4a3d29) !important;
	border-radius: 8px !important;
	font-family: var(--us-sans, 'Inter', sans-serif) !important;
	font-size: 1rem !important;
	line-height: 1.3 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right .85em center !important;
	background-size: 1.05em !important;
}
html body form.variations_form select:focus {
	outline: none !important;
	border-color: var(--us-gold, #d4af37) !important;
}
/* The native option list (rendered by the OS) — keep it dark too. */
html body form.variations_form select option {
	background-color: #14100b !important;
	color: #efe7db !important;
}
html body .woocommerce div.product form.cart .reset_variations {
	color: var(--us-muted, #bcae98) !important;
	font-size: .85rem !important;
}

/* ---- 3. "Reservar por WhatsApp" notice: ochre box, black text ----------- */
/* Was #fafafa with the site's cream text on top — practically unreadable. */
html body .urbanspa-whatsapp-reserva {
	background: #d6b981 !important;
	border: 1px solid #c2a26a !important;
}
html body .urbanspa-whatsapp-reserva,
html body .urbanspa-whatsapp-reserva p,
html body .urbanspa-whatsapp-reserva .urbanspa-whatsapp-reserva__text,
html .et-db #et-boc .et-l .urbanspa-whatsapp-reserva p,
html .et-db #et-boc .et-l .urbanspa-whatsapp-reserva span,
html .et-db #et-boc .et-l .urbanspa-whatsapp-reserva .urbanspa-whatsapp-reserva__text {
	color: #1c160e !important;
}

/* ---- 4. "Incluye:" line, next to the photo ------------------------------ */
html body p.hs-incluye,
html .et-db #et-boc .et-l p.hs-incluye {
	margin: 1em 0 0 !important;
	padding: .75em .9em !important;
	background: rgba(212,175,55,.10) !important;
	border-left: 3px solid var(--us-gold, #d4af37) !important;
	border-radius: 6px !important;
	color: #efe7db !important;
	font-size: .95rem !important;
	line-height: 1.5 !important;
}
html body p.hs-incluye strong,
html .et-db #et-boc .et-l p.hs-incluye strong {
	color: var(--us-gold, #d4af37) !important;
}

/* ---- 5. No hover zoom / pan on any image ------------------------------- */
/* The WC magnifier is off via PHP (wc-product-gallery-zoom); this kills the
   leftover transform-on-hover effects and any stray zoom canvas. */
html body .zoomImg { display: none !important; }
html body .woocommerce-product-gallery__image img,
html body .woocommerce-product-gallery img {
	cursor: default !important;
}
html body .et_shop_image:hover img,
html body li.product:hover img,
html body .et_pb_image:hover img,
html body .et_pb_image_wrap:hover img,
html body .elementor-widget-image:hover img,
html body .jet-listing-dynamic-image:hover img,
html body .woocommerce-product-gallery__image:hover img,
html body ul.products li.product:hover img {
	transform: none !important;
	scale: none !important;
}
html body .et_pb_image img,
html body .et_shop_image img,
html body .elementor-widget-image img,
html body ul.products li.product img,
html body .woocommerce-product-gallery img {
	transition: none !important;
}

/* ---- 6. Fixed header: readable while scrolling ------------------------- */
/* Was rgba(20,16,11,.92): content showed through and the menu washed out. */
html #main-header,
html .et-fixed-header#main-header,
html body .et_fixed_nav #page-container .et-fixed-header#main-header {
	background-color: #14100b !important;
	border-bottom: 1px solid var(--us-border, #4a3d29) !important;
}
html #top-menu li a,
html #et-secondary-nav li a,
html .et-fixed-header #top-menu li a {
	color: #f6f2ea !important;
	text-shadow: none !important;
}
html #top-menu li a:hover,
html #et-secondary-nav li a:hover,
html .et-fixed-header #top-menu li a:hover {
	color: var(--us-gold, #d4af37) !important;
}
html #top-menu li.current-menu-item > a,
html .et-fixed-header #top-menu li.current-menu-item > a {
	color: var(--us-gold, #d4af37) !important;
}

/* ---- 12. Contactar: contact row, schedule and square map --------------- */
/* The doc: bigger copy, in proportion with the 60px icons, and aligned — the
   phone column carried a stray `custom_margin:62px` that pushed it out of line
   (removed in the content itself). */
html body.page-id-382021 .et_pb_text p,
html body.page-id-382021 .et_pb_text a {
	font-size: 19px !important;
	line-height: 1.55 !important;
}
/* Keep the three info columns on one line, top-aligned with their icons. */
html body.page-id-382021 .et_pb_row .et_pb_column .et_pb_image {
	margin-bottom: 14px !important;
}
html body.page-id-382021 .et_pb_row_1 .et_pb_column {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

/* Schedule block. */
html body.page-id-382021 p.hs-horario {
	font-size: 21px !important;
	margin-bottom: .6em !important;
	color: var(--us-gold, #d4af37) !important;
}
html body.page-id-382021 p.hs-datos {
	font-size: 19px !important;
	line-height: 1.7 !important;
}

/* Square map, same rounded corners as the image it replaces (which 404'd). */
html body .hs-mapa {
	position: relative !important;
	width: 100% !important;
	max-width: 460px !important;
	margin: 0 0 0 auto !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 24px !important;
	overflow: hidden !important;
	border: 1px solid var(--us-border, #4a3d29) !important;
}
/* Complianz wraps the Google Maps iframe in .cmplz-placeholder-parent and shows
   a consent placeholder until marketing cookies are accepted (correct GDPR
   behaviour) — the wrapper has to fill the square too, or the ratio collapses. */
html body .hs-mapa iframe,
html body .hs-mapa .cmplz-placeholder-parent,
html body .hs-mapa .cmplz-placeholder-element,
html body .hs-mapa .cmplz-blocked-content-notice {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	border: 0 !important;
	display: block !important;
	margin: 0 !important;
}
html body .hs-mapa .cmplz-blocked-content-notice {
	position: absolute !important;
	inset: auto 0 0 0 !important;
	height: auto !important;
	z-index: 2 !important;
}
@media (max-width: 980px) {
	html body .hs-mapa { margin: 24px auto 0 !important; }
}

/* ---- 11. Instalaciones: zone icons in white ---------------------------- */
/* The doc asks for the "Zona de masajes" / "Zona Spa" icons in white. They are
   PNGs (Layer_.png / Layer_-1.png), so recolour them instead of swapping the
   asset: brightness(0) flattens to black, invert(1) flips it to pure white. */
html body .elementor-405010 .elementor-element-1a6bbc8 img,
html body .elementor-405010 .elementor-element-2a62d6f img {
	filter: brightness(0) invert(1) !important;
}

/* ---- 10. Top bar: WhatsApp icon + clickable phone ---------------------- */
/* The markup is injected by hs-vol2.php (Divi prints the phone as plain text
   inside a <span>, sanitised, so it can't be linked from the theme options). */
html body #top-header #et-info .hs-topbar-wa {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	vertical-align: middle !important;
	margin-right: 1.1em !important;
	color: #25d366 !important;
	line-height: 1 !important;
	transition: color .15s ease !important;
}
html body #top-header #et-info .hs-topbar-wa svg {
	width: 1.15em !important;
	height: 1.15em !important;
	fill: currentColor !important;
	display: block !important;
	flex: 0 0 auto !important;
}
/* The number next to the icon: same size/colour as the rest of the bar so it
   reads as one more contact item, with only the glyph staying WhatsApp green. */
html body #top-header #et-info .hs-topbar-wa .hs-topbar-wa__num {
	margin-left: .4em !important;
	color: var(--us-text, #efe7db) !important;
	font-size: inherit !important;
	white-space: nowrap !important;
}
html body #top-header #et-info .hs-topbar-wa:hover,
html body #top-header #et-info .hs-topbar-wa:focus {
	color: #1ebe57 !important;
}
html body #top-header #et-info .hs-topbar-wa:hover .hs-topbar-wa__num {
	color: var(--us-gold, #d4af37) !important;
}
/* Narrow phones: the bar already carries phone + email + Instagram, so let the
   items wrap instead of overflowing. */
@media (max-width: 480px) {
	html body #top-header #et-info {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: center !important;
		gap: .15em .6em !important;
	}
	html body #top-header #et-info .hs-topbar-wa { margin-right: 0 !important; }
}
/* The phone becomes a tel: link — keep it looking like the bar's own text. */
html body #top-header #et-info .hs-topbar-tel,
html body #top-header #et-info #et-info-phone a {
	color: inherit !important;
	text-decoration: none !important;
}
html body #top-header #et-info .hs-topbar-tel:hover {
	color: var(--us-gold, #d4af37) !important;
}

/* ---- 9. Kill the empty sidebar on shop pages --------------------------- */
/* hs-vol2.php swaps the body class to et_full_width_page; this backs it up in
   case Divi's own full-width rules don't reach every shop layout. The sidebar
   held a single empty block widget and just carved a dead column + divider
   line out of the right of every product page. */
html body.woocommerce-page #sidebar,
html body.single-product #sidebar,
html body.et_full_width_page #sidebar {
	display: none !important;
}
html body.woocommerce-page #left-area,
html body.single-product #left-area,
html body.et_full_width_page #left-area {
	width: 100% !important;
	max-width: 100% !important;
	padding-right: 0 !important;
	float: none !important;
	border-right: 0 !important;
}
/* Divi draws the divider on the content column, not the sidebar. */
html body.woocommerce-page #main-content .container:before,
html body.single-product #main-content .container:before {
	display: none !important;
}

/* ---- 8. /servicios/ legibility ----------------------------------------- */
/* The page was unreadable for two reasons, both "dark text on dark":
   (a) The listing card is an `.e-con`, and redesign.css forces
       `.e-con{background-color:transparent!important}` to kill the theme's
       cream panels. So the card's own #F8F6F0 never paints: the card is dark.
       Its heading (cream) and price (gold) get recoloured by redesign.css and
       survive, but the excerpt widget keeps its template `color:#000000` --
       nothing in redesign.css targets `.elementor-widget-theme-post-excerpt` --
       so the description rendered black on a dark page.
   (b) The Jet filters ship their own `color:#050505`.
   Fix: give the card a real dark surface (like every other card on the site)
   and light up the text that stayed dark. */

/* (a) Card surface. redesign.css blanks `.e-con` backgrounds with !important,
       so an id selector is needed to win. */
html body #card-servicios {
	background-color: var(--us-bg-3, #2d2519) !important;
	border: 1px solid var(--us-border, #4a3d29) !important;
	border-radius: var(--us-radius, 14px) !important;
	overflow: hidden !important;
}

/* The excerpt is the one that was invisible (template sets #000000). */
html body .jet-listing-grid__item .elementor-widget-theme-post-excerpt,
html body .jet-listing-grid__item .elementor-widget-theme-post-excerpt *,
html body #card-servicios .elementor-widget-theme-post-excerpt,
html body #card-servicios .elementor-widget-theme-post-excerpt * {
	color: var(--us-text, #efe7db) !important;
}

/* Belt and braces: nothing inside a card may render near-black on the dark
   surface (the template hardcodes #000/#040404/#1E1E1E in several widgets). */
html body .jet-listing-grid__item .jet-listing-dynamic-field,
html body .jet-listing-grid__item .jet-listing-dynamic-field * {
	color: var(--us-text, #efe7db) !important;
}
html body .jet-listing-grid__item .price,
html body .jet-listing-grid__item .price *,
html body #card-servicios .price,
html body #card-servicios .price * {
	color: var(--us-gold, #d4af37) !important;
}

/* (b) Filters: light text on the dark page. */
html body .jet-radio-list__button,
html body .jet-radio-list__item,
html body .jet-checkboxes-list__button,
html body .jet-checkboxes-list__item,
html body .jet-filter-label,
html body .jet-filters-pagination__item {
	color: var(--us-text, #efe7db) !important;
}
html body .jet-radio-list__item:hover .jet-radio-list__button,
html body .jet-checkboxes-list__item:hover .jet-checkboxes-list__button {
	color: var(--us-gold, #d4af37) !important;
}
/* Radio/checkbox decorator: visible ring + gold when picked. */
html body .jet-radio-list__decorator,
html body .jet-checkboxes-list__decorator {
	border: 1px solid var(--us-border, #4a3d29) !important;
	background: #14100b !important;
}
html body .jet-radio-list__input:checked + .jet-radio-list__button .jet-radio-list__decorator,
html body .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__decorator {
	border-color: var(--us-gold, #d4af37) !important;
}
html body .jet-radio-list__checked-icon svg,
html body .jet-checkboxes-list__checked-icon svg {
	fill: var(--us-gold, #d4af37) !important;
}

/* Price range slider: visible track, gold selected range, readable numbers. */
html body .jet-range__values,
html body .jet-range__values *,
html body .jet-range__inputs,
html body .jet-range__inputs *,
html body .jet-range__inputs input {
	color: var(--us-text, #efe7db) !important;
}
html body .jet-range__slider__track {
	background-color: var(--us-border, #4a3d29) !important;
}
html body .jet-range__slider__track__range {
	background-color: var(--us-gold, #d4af37) !important;
}
html body .jet-range__inputs input {
	background-color: #14100b !important;
	border: 1px solid var(--us-border, #4a3d29) !important;
	border-radius: 6px !important;
	padding: .4em .6em !important;
}

/* ---- 7. Related products: heading + product names ---------------------- */
/* Both were in the HTML but invisible: a bare <h2> inherits Divi's dark default
   (#333) and the reskin only recolours Divi-Builder and Elementor headings --
   nothing covers the plain WooCommerce loop. So the section title AND every
   product name rendered near-black on the dark page. The doc asks for a title
   ("TAMBIÉN TE PUEDE INTERESAR", set in hs-vol2.php) *and* for the names of the
   experiences to show. */

/* Section heading. The theme ships an inline `.product .related h2{font-size:26px
   !important}`, so size is repeated here to stay in control. */
html body .related.products > h2,
html body .up-sells > h2,
html body .cross-sells > h2,
html body #left-area .related.products > h2,
html body .et_pb_wc_related_products h2 {
	color: var(--us-cream, #f6f2ea) !important;
	font-family: var(--us-serif, 'Cormorant Garamond', serif) !important;
	font-size: 26px !important;
	font-weight: 500 !important;
	letter-spacing: .06em !important;
	text-align: center !important;
	margin: 0 0 1.2em !important;
	padding-bottom: 16px !important;
}

/* Product names in every WooCommerce loop (related, upsells, shop archives). */
html body ul.products li.product .woocommerce-loop-product__title,
html body ul.products li.product h2.woocommerce-loop-product__title,
html body ul.products li.product h3,
html body .related.products ul.products li.product .woocommerce-loop-product__title,
html body #left-area ul.products li.product .woocommerce-loop-product__title,
html body .et_pb_wc_related_products li.product .woocommerce-loop-product__title {
	display: block !important;
	visibility: visible !important;
	color: var(--us-cream, #f6f2ea) !important;
	font-family: var(--us-serif, 'Cormorant Garamond', serif) !important;
	font-size: 1.2rem !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	letter-spacing: .01em !important;
	margin: .7em 0 .35em !important;
	padding: 0 !important;
	text-align: center !important;
}
html body ul.products li.product a:hover .woocommerce-loop-product__title,
html body ul.products li.product .woocommerce-loop-product__title:hover {
	color: var(--us-gold, #d4af37) !important;
}
/* Price + button already read fine; just centre them under the name. */
html body .related.products ul.products li.product .price,
html body .related.products ul.products li.product .ver-producto-wrap {
	text-align: center !important;
}