/**
 * Silom-style commerce skin (Chiang Mai Spa).
 *
 * Scope: restyles the WooCommerce / Elementor commerce surface (promociones,
 * VIP cards, Tratamientos hub, category listings, single product, cart,
 * checkout, thank-you) to match silomspa.com using our own content.
 *
 * Rule: styling only. No markup that changes Booknetic / gift-voucher / VIP /
 * checkout logic. Everything is scoped by body / page classes so it never
 * leaks onto unrelated pages.
 */

:root {
	--silom-brown: #504037;
	--silom-brown-dark: #3d3029;
	--silom-cream: #f6efdd;
	--silom-cream-2: #f6ede1;
	--silom-gold: #c8b783;
	--silom-gold-dark: #a8965f;
	--silom-text: #504037;
	--silom-muted: #7a6c60;
}

/* Reservas / contact page (kept in Elementor for the Booknetic form): silom redesign. */
body.page-id-35 #generalCont { background: var(--silom-cream); }
body.page-id-35 .elementor h1,
body.page-id-35 .elementor h2,
body.page-id-35 .elementor h3,
body.page-id-35 .cmcn-location-content__title,
body.page-id-35 .cmcn-location-content__title .inner-tit { color: var(--silom-brown) !important; }

/* Contact info boxes -> silom cards. */
body.page-id-35 .penci-info-box,
body.page-id-35 .elementor-widget-penci-info-box .penci-infobox {
	background: #fff;
	border: 1px solid rgba(80,64,55,.12);
	border-radius: 16px;
	padding: 26px 24px;
	box-shadow: 0 18px 44px -30px rgba(80,64,55,.5);
	height: 100%;
}
body.page-id-35 .penci-info-box .infobox-icon,
body.page-id-35 .penci-info-box i,
body.page-id-35 .penci-infobox-icon i { color: var(--silom-gold) !important; }
body.page-id-35 .penci-info-box a,
body.page-id-35 .penci-infobox a { color: var(--silom-brown); }
body.page-id-35 .penci-info-box a:hover { color: var(--silom-gold-dark); }

/* Booking panel: lift it onto a clean card with breathing room. */
body.page-id-35 .elementor-widget-booknetic,
body.page-id-35 #bookneticElementorContainer {
	background: #fff;
	border-radius: 18px;
	padding: clamp(16px, 2.5vw, 30px);
	box-shadow: 0 22px 54px -34px rgba(80,64,55,.5);
	margin-top: 18px;
}
/* General vertical rhythm so sections aren't cramped. */
body.page-id-35 .elementor-section,
body.page-id-35 .e-con { padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(20px, 3vw, 40px); }

/* Force the whole reservas page to the cream canvas (under the map and every
   section), so there is no yellow band anywhere. White cards keep their own bg. */
body.page-id-35 .elementor-section,
body.page-id-35 .elementor-top-section,
body.page-id-35 .elementor-inner-section,
body.page-id-35 .elementor-column-wrap,
body.page-id-35 .elementor-widget-wrap,
body.page-id-35 .e-con,
body.page-id-35 .e-con-inner,
body.page-id-35 .elementor-background-overlay,
body.page-id-35 .elementor-element-129f20d {
	background-image: none !important;
	background-color: transparent !important;
}

/* Brand eyebrow ("Chiang Mai"): Pinyon Script — beats Elementor Dancing Script on reservas. */
.cmcn-location-content__subtitle,
.cmcn-location-content__subtitle.font-heading.font-display,
.penci-heading-subtitle.cmcn-location-content__subtitle,
.elementor-widget-cmcn_location_content .cmcn-location-content__subtitle,
.elementor-35 .elementor-element .cmcn-location-content__subtitle {
	font-family: 'Pinyon Script', cursive !important;
	color: #c8b783 !important;
	font-style: normal !important;
	font-weight: 400 !important;
	font-size: clamp(32px, 4.5vw, 46px) !important;
	line-height: 1.1 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* Reservas contact icons + social icons: orange -> brown/gold. */
body.page-id-35 .penci-ibox-icon,
body.page-id-35 .penci-ibox-icon--icon,
body.page-id-35 .elementor-social-icon { background-color: var(--silom-brown) !important; }
body.page-id-35 .penci-ibox-icon i,
body.page-id-35 .elementor-social-icon i,
body.page-id-35 .elementor-social-icon svg { color: var(--silom-cream) !important; fill: var(--silom-cream) !important; }
body.page-id-35 .elementor-social-icon:hover { background-color: var(--silom-gold) !important; }

/* =====================================================================
   Booknetic booking panel -> silom theme (replaces orange #d94924).
   High-specificity (#booknetic_theme_1) so it beats theme_1.css !important.
   Applies wherever the panel renders, so booking is on-brand everywhere.
   ===================================================================== */
#booknetic_theme_1 .booknetic_btn_primary,
#booknetic_theme_1 .booknetic_next_step_btn,
#booknetic_theme_1 .booknetic_confirm_booking_btn,
#booknetic_theme_1 .booknetic_try_again_btn,
.booknetic_appointment .booknetic_btn_primary,
.booknetic_appointment .booknetic_confirm_booking_btn {
	background-color: var(--silom-brown) !important;
	border-color: var(--silom-brown) !important;
	color: #f6efdd !important;
}
#booknetic_theme_1 .booknetic_btn_primary:hover,
#booknetic_theme_1 .booknetic_next_step_btn:hover,
#booknetic_theme_1 .booknetic_confirm_booking_btn:hover,
#booknetic_theme_1 .booknetic_try_again_btn:hover {
	background-color: var(--silom-gold) !important;
	border-color: var(--silom-gold) !important;
	color: #3d3029 !important;
}
#booknetic_theme_1 .booknetic_active_step .booknetic_badge { background-color: var(--silom-brown) !important; color: #fff !important; }
#booknetic_theme_1 .booknetic_active_step .booknetic_step_title { color: var(--silom-brown) !important; }
#booknetic_theme_1 .booknetic_service_category { color: var(--silom-brown) !important; border-color: var(--silom-brown) !important; }
#booknetic_theme_1 .booknetic_category_accordion .booknetic_service_category span { background: var(--silom-brown) !important; }
#booknetic_theme_1 .booknetic_service_card_selected,
#booknetic_theme_1 .booknetic_card_selected,
#booknetic_theme_1 .booknetic_service_extra_card_selected { border-color: var(--silom-gold) !important; }
#booknetic_theme_1 .booknetic_calendar_selected_day > div,
#booknetic_theme_1 .booknetic_selected_time { background: var(--silom-brown) !important; color: #fff !important; }
#booknetic_theme_1 .booknetic_calendar_days > div > span > i[a] { background: var(--silom-gold) !important; }
#booknetic_theme_1 .booknetic_package_card_service_el > span:first-child { color: var(--silom-brown) !important; }
#booknetic_theme_1 .booknetic_package_card_service_el > span:last-child { background: var(--silom-brown) !important; }
/* Generic catch for any remaining brand-orange usages in the panel. */
#booknetic_theme_1 [style*="217, 73, 36"],
#booknetic_theme_1 [style*="#d94924"] { background-color: var(--silom-brown) !important; }

/* Original circles dock (treatwell fan) - rendered as-is, kept above the footer. */
.cm-dock-restore { position: relative; z-index: 70; }
/* Nudge the outer items (Regalar / Llamar) inward so they sit under the arch.
   The items are absolutely positioned, so use translateX (visual only) to avoid
   disturbing the layout / overlapping neighbours. */
.cm-dock-restore .thai-nav-bar .nav-item:first-child { transform: translateX(12px) !important; margin: 0 !important; }
.cm-dock-restore .thai-nav-bar .nav-item:last-child { transform: translateX(-12px) !important; margin: 0 !important; }
@media (max-width: 600px) {
	/* Ease the inward push so the outer items don't crowd the inner ones. */
	.cm-dock-restore .thai-nav-bar .nav-item:first-child { transform: translateX(8px) !important; }
	.cm-dock-restore .thai-nav-bar .nav-item:last-child { transform: translateX(-8px) !important; }
	/* Shrink the labels so they stop merging and each item keeps clear spacing. */
	.cm-dock-restore { --label-size: 8px; --label-gap: 4px; }
	.cm-dock-restore .nav-label { font-size: 8px !important; letter-spacing: 0 !important; line-height: 1.1 !important; white-space: nowrap; }
}

/* The old floating WhatsApp/Pide-cita bubbles are replaced by the dock. */
#whatsappContactButton { display: none !important; }

/* Reserve room at the very bottom so the fixed dock never covers footer logos. */
footer .bg-white { padding-bottom: 116px; }
@media (max-width: 600px) { footer .bg-white { padding-bottom: 96px; } }

/* Remove the social SHARE bar sitewide (requested). */
.post-share,
.pcnew-share,
.penci-social-share,
.tags-share-box,
.penci-shares,
.penci-review-share {
	display: none !important;
}

/* ===========================================================================
   PHASE 1 - Promociones (bono regalo)  [body.page-id-3473]
   Real widget markup: .bkntc-gift-voucher-* (verified in the DOM).
   =========================================================================== */

/* Cream page canvas to match the rest of the silom inner pages. */
body.page-id-3473 .elementor-3473 {
	background: var(--silom-cream);
}

/* Hide the legacy VIP-cards promo HTML block (belt-and-braces; it is already
   hidden inline, but keep it removed even if that inline style is cleared). */
body.page-id-3473 .cm-vip-section {
	display: none !important;
}

/* Page title -> silom serif feel. */
body.page-id-3473 .cmcn-location-content__title,
body.page-id-3473 .cmcn-location-content__title .inner-tit {
	color: var(--silom-brown) !important;
}

/* Scroll anchor target for product-page "Comprar bono regalo" deep-links. */
#gift-voucher,
body.page-id-3473 .elementor-widget-booknetic_gift_voucher {
	scroll-margin-top: 120px;
}

/* ---- Gift voucher widget: turn it into a clean silom card ---- */
body.page-id-3473 .bkntc-gift-voucher-section {
	background: #fff;
	border: 1px solid rgba(80, 64, 55, 0.12);
	border-radius: 20px;
	padding: clamp(22px, 4vw, 46px);
	box-shadow: 0 24px 60px -34px rgba(80, 64, 55, 0.5);
	max-width: 1100px;
	margin: 0 auto;
}

body.page-id-3473 .bkntc-gift-voucher-inner {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}

@media (max-width: 860px) {
	body.page-id-3473 .bkntc-gift-voucher-inner {
		grid-template-columns: 1fr;
	}
}

body.page-id-3473 .bkntc-gift-voucher-heading {
	color: var(--silom-brown);
	font-size: clamp(1.6rem, 3.2vw, 2.3rem);
	line-height: 1.15;
	margin: 0 0 16px;
}

body.page-id-3473 .bkntc-gift-voucher-text {
	color: var(--silom-muted);
	font-size: 1rem;
	line-height: 1.7;
}

body.page-id-3473 .bkntc-gift-voucher-label {
	display: block;
	color: var(--silom-brown);
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	font-size: .85rem;
	margin-bottom: 6px;
}

body.page-id-3473 .bkntc-gift-voucher-hint {
	color: var(--silom-muted);
	font-size: .85rem;
	line-height: 1.55;
	margin: 0 0 14px;
}

/* Scrollable service list. */
body.page-id-3473 .bkntc-gift-voucher-checkboxes {
	max-height: 320px;
	overflow-y: auto;
	padding: 4px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body.page-id-3473 .bkntc-gift-voucher-checkboxes::-webkit-scrollbar {
	width: 8px;
}
body.page-id-3473 .bkntc-gift-voucher-checkboxes::-webkit-scrollbar-thumb {
	background: var(--silom-gold);
	border-radius: 999px;
}

/* Each service option as a selectable pill row. */
body.page-id-3473 .bkntc-gift-voucher-checkbox-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	margin: 0;
	background: var(--silom-cream);
	border: 1px solid rgba(80, 64, 55, 0.14);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

body.page-id-3473 .bkntc-gift-voucher-checkbox-wrap:hover {
	border-color: var(--silom-gold);
	background: #fff;
	box-shadow: 0 10px 22px -16px rgba(80, 64, 55, 0.6);
}

body.page-id-3473 .bkntc-gift-voucher-checkbox {
	accent-color: var(--silom-brown);
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin: 0;
}

body.page-id-3473 .bkntc-gift-voucher-checkbox-label {
	color: var(--silom-text);
	font-weight: 500;
	line-height: 1.3;
}

body.page-id-3473 .bkntc-gift-voucher-checkbox-price {
	color: var(--silom-gold-dark);
	font-weight: 600;
}

/* Live total. */
body.page-id-3473 .bkntc-gift-voucher-price {
	margin: 16px 0 0;
	color: var(--silom-brown);
	font-size: 1.35rem;
	font-weight: 700;
}

body.page-id-3473 .bkntc-gift-voucher-actions {
	margin-top: 20px;
}

/* Submit -> silom primary pill. */
body.page-id-3473 .bkntc-gift-voucher-submit {
	background: var(--silom-brown);
	border: 1px solid var(--silom-brown);
	color: var(--silom-cream);
	border-radius: 999px;
	padding: 15px 38px;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

body.page-id-3473 .bkntc-gift-voucher-submit:hover {
	background: var(--silom-gold);
	border-color: var(--silom-gold);
	color: #fff;
}

body.page-id-3473 .bkntc-gift-voucher-message {
	display: inline-block;
	margin-top: 12px;
	color: var(--silom-brown);
	font-weight: 500;
}

/* ===========================================================================
   PHASE 2 - Tratamientos hub (shop) + category listings
   =========================================================================== */

/* ---- Hub category tiles (silom-tratamientos.php) ---- */
.silom-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 2.6vw, 34px);
}

.silom-cat-grid--eight { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .silom-cat-grid--eight { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .silom-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .silom-cat-grid, .silom-cat-grid--eight { grid-template-columns: 1fr; } }

.silom-cat-card__media--placeholder,
.silom-treatment-card__placeholder {
	background: linear-gradient(145deg, #3d3029 0%, #504037 55%, #6a5748 100%);
}

.silom-treatment-card__placeholder { transition: transform .5s ease; }
.silom-treatment-card:hover .silom-treatment-card__placeholder { transform: scale(1.05); }

/* layout.css underlines generic links; shop cards must not look like hyperlinks */
.silom-cat-card,
.silom-cat-card *,
.silom-prod-card__media,
.silom-prod-card__title a,
.silom-relcard__media,
.silom-relcard__title a,
.silom-pdp2-gift,
.silom-pdp2-gift * {
	text-decoration: none !important;
}

.silom-cat-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 20px 48px -30px rgba(80, 64, 55, 0.55);
	border: 1px solid rgba(80, 64, 55, 0.08);
	transition: transform .25s ease, box-shadow .25s ease;
}

.silom-cat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 56px -28px rgba(80, 64, 55, 0.6);
}

.silom-cat-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--silom-cream);
}

.silom-cat-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.silom-cat-card:hover .silom-cat-card__media img { transform: scale(1.05); }

.silom-cat-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px 26px;
	text-align: center;
}

.silom-cat-card__title {
	color: var(--silom-brown);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: .01em;
}

.silom-cat-card__desc {
	color: var(--silom-muted);
	font-size: .95rem;
	line-height: 1.6;
}

.silom-cat-card__cta {
	margin-top: 6px;
	align-self: center;
	display: inline-block;
	padding: 11px 26px;
	border-radius: 999px;
	background: var(--silom-brown);
	color: var(--silom-cream);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: .78rem;
	font-weight: 600;
	transition: background .2s ease, color .2s ease;
}

.silom-cat-card:hover .silom-cat-card__cta { background: var(--silom-gold); color: #fff; }

/* ---- Category product cards (silom-categoria.php) ---- */
.silom-prod-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 2.4vw, 32px);
}

@media (max-width: 900px) { .silom-prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .silom-prod-grid { grid-template-columns: 1fr; } }

.silom-prod-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 44px -30px rgba(80, 64, 55, 0.5);
	border: 1px solid rgba(80, 64, 55, 0.08);
	transition: transform .25s ease, box-shadow .25s ease;
}

.silom-prod-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 52px -28px rgba(80, 64, 55, 0.58);
}

.silom-prod-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--silom-cream);
}

.silom-prod-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.silom-prod-card:hover .silom-prod-card__media img { transform: scale(1.05); }

.silom-prod-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 22px;
	flex: 1 1 auto;
}

.silom-prod-card__title,
.silom-prod-card__title.font-heading.font-display {
	font-family: 'Pinyon Script', cursive !important;
	font-size: clamp(22px, 3vw, 32px) !important;
	line-height: clamp(25px, 3vw, 38px) !important;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
}

.silom-prod-card__title a {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: var(--silom-brown);
	text-decoration: none;
}

.silom-prod-card__title a:hover { color: var(--silom-gold-dark); }

.silom-prod-card__desc {
	color: var(--silom-muted);
	font-size: .92rem;
	line-height: 1.6;
	margin: 0;
}

.silom-prod-card__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 8px;
}

.silom-prod-card__price {
	color: var(--silom-brown);
	font-weight: 700;
	font-size: 1.1rem;
}

.silom-prod-card__price del { color: var(--silom-muted); font-weight: 400; margin-right: 6px; }
.silom-prod-card__price ins { text-decoration: none; }

.silom-prod-card__btn {
	flex: 0 0 auto;
	padding: 10px 22px !important;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .78rem;
}

/* ===========================================================================
   PHASE 1B - Promociones full redesign (templates/silom-promociones.php)
   =========================================================================== */

.silom-promo { padding-top: 0; }

.silom-promo-eyebrow {
	display: block;
	font-family: 'Pinyon Script', cursive;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1;
	color: var(--silom-gold-dark);
}

.silom-promo-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	min-height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.silom-promo-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(61,48,41,.55) 0%, rgba(61,48,41,.72) 100%);
}

.silom-promo-hero__inner { position: relative; z-index: 2; padding: 40px 20px; }

.silom-promo-hero .silom-promo-eyebrow { color: #f3dca8; }

.silom-promo-hero__title {
	margin: 6px 0 0;
	color: #fff;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 600;
	letter-spacing: .02em;
}

.silom-promo-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 64px);
}

@media (max-width: 800px) { .silom-promo-cols { grid-template-columns: 1fr; gap: 32px; } }

.silom-promo-h2 {
	color: var(--silom-brown);
	font-size: clamp(1.45rem, 3vw, 1.9rem);
	margin: 0 0 14px;
}

.silom-promo-col p {
	color: var(--silom-muted);
	line-height: 1.75;
	margin: 0 0 14px;
}

.silom-promo-col p strong { color: var(--silom-brown); }

.silom-promo-cta { display: inline-block; margin-top: 8px; }

.silom-promo-figure {
	max-width: 560px;
	margin: 0 auto;
	padding: 0 20px;
}

.silom-promo-figure img {
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 26px 60px -32px rgba(80, 64, 55, 0.6);
}

.silom-promo-gift {
	padding: clamp(40px, 6vw, 80px) 0;
}

.silom-promo-gift__head {
	text-align: center;
	margin-bottom: 30px;
}

.silom-promo-gift__head .silom-page-title { margin-top: 4px; }

/* List with gold check markers (Cómo funciona / Condiciones). */
.silom-promo-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.silom-promo-list li {
	position: relative;
	padding: 0 0 12px 30px;
	color: var(--silom-muted);
	line-height: 1.6;
}

.silom-promo-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--silom-gold);
	box-shadow: inset 0 0 0 3px var(--silom-cream);
}

/* ===========================================================================
   PHASE 3 - Single product (templates/silom-single-product.php)
   =========================================================================== */

.silom-pdp-breadcrumb {
	font-size: .85rem;
	color: var(--silom-muted);
	margin-bottom: 26px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.silom-pdp-breadcrumb a { color: var(--silom-muted); text-decoration: none; }
.silom-pdp-breadcrumb a:hover { color: var(--silom-gold-dark); }
.silom-pdp-breadcrumb .current { color: var(--silom-brown); font-weight: 600; }

.silom-pdp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
@media (max-width: 860px) { .silom-pdp-grid { grid-template-columns: 1fr; } }

.silom-pdp-media__main {
	width: 100%;
	height: auto;
	border-radius: 20px;
	box-shadow: 0 26px 60px -32px rgba(80, 64, 55, 0.6);
	object-fit: cover;
}

.silom-pdp-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.silom-pdp-thumb {
	width: 74px;
	height: 74px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	background: var(--silom-cream);
	transition: border-color .2s ease;
}
.silom-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.silom-pdp-thumb:hover { border-color: var(--silom-gold); }

.silom-pdp-title {
	color: var(--silom-brown);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.1;
	margin: 0 0 18px;
}

.silom-pdp-shortdesc { color: var(--silom-brown); font-size: 1.05rem; line-height: 1.7; margin-bottom: 14px; }
.silom-pdp-shortdesc p { margin: 0 0 10px; }
.silom-pdp-desc { color: var(--silom-muted); line-height: 1.75; margin-bottom: 24px; }
.silom-pdp-desc p { margin: 0 0 12px; }

/* Booking block (treatments) */
.silom-booking {
	background: #fff;
	border: 1px solid rgba(80, 64, 55, 0.12);
	border-radius: 18px;
	padding: clamp(20px, 3vw, 30px);
	box-shadow: 0 20px 50px -32px rgba(80, 64, 55, 0.5);
}
.silom-booking__label {
	display: block;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .78rem;
	font-weight: 700;
	color: var(--silom-brown);
	margin-bottom: 10px;
}
.silom-booking__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.silom-booking__chip {
	padding: 10px 20px;
	border-radius: 999px;
	border: 1px solid rgba(80, 64, 55, 0.25);
	background: var(--silom-cream);
	color: var(--silom-brown);
	font-weight: 500;
	cursor: pointer;
	transition: all .2s ease;
}
.silom-booking__chip:hover { border-color: var(--silom-gold); }
.silom-booking__chip.is-active {
	background: var(--silom-brown);
	border-color: var(--silom-brown);
	color: var(--silom-cream);
}
.silom-booking__price {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--silom-brown);
	margin-bottom: 18px;
}
.silom-booking__price del { color: var(--silom-muted); font-weight: 400; font-size: 1.2rem; margin-right: 8px; }
.silom-booking__price ins { text-decoration: none; }
.silom-booking__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.silom-booking__reservar { padding-left: 2.4rem !important; padding-right: 2.4rem !important; }
.silom-booking__gift.button-ghost,
.silom-booking__gift.button-ghost:hover { white-space: nowrap; }
.silom-booking__note { margin: 16px 0 0; font-size: .85rem; color: var(--silom-muted); line-height: 1.5; }

/* VIP buy block on product page */
.silom-pdp-buy { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.silom-pdp-price { font-size: 1.8rem; font-weight: 700; color: var(--silom-brown); }
.silom-pdp-btn { padding-left: 2.4rem !important; padding-right: 2.4rem !important; }

/* Related */
.silom-pdp-related { margin-top: clamp(48px, 7vw, 90px); }

/* Ven a conocernos band */
.silom-pdp-visit {
	margin-top: clamp(40px, 6vw, 80px);
	background: var(--silom-brown);
	color: var(--silom-cream);
	text-align: center;
	padding: clamp(40px, 6vw, 70px) 20px;
}
.silom-pdp-visit__title { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 0 0 12px; }
.silom-pdp-visit__hours { color: #e9ddc6; line-height: 1.7; margin: 0 0 22px; }

/* ===========================================================================
   PHASE 3v2 - Full-background single product (silom-single-product.php)
   =========================================================================== */

body.silom-pdp-page { background: #2c211b; }

.silom-pdp2-hero {
	position: relative;
	min-height: 100vh;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
}
.silom-pdp2-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(36,27,21,.32) 0%, rgba(36,27,21,.74) 58%, rgba(36,27,21,.92) 100%);
}
.silom-pdp2-hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 9.5rem; padding-bottom: 4.5rem; }
@media (max-width: 1023px) { .silom-pdp2-hero__inner { padding-top: 7rem; } }

.silom-pdp2-panel { max-width: 560px; margin-left: auto; color: #f6efdd; }
@media (max-width: 1023px) { .silom-pdp2-panel { margin-left: 0; } }
.silom-pdp2-breadcrumb { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #d9c9a8; margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.silom-pdp2-breadcrumb a { color: #d9c9a8; text-decoration: none; }
.silom-pdp2-breadcrumb a:hover { color: #fff; }
/* Hero product title: Pinyon Script, larger than featured cards but not all-caps Freebooter scale. */
.silom-pdp2-title,
body.silom-pdp-page h1.silom-pdp2-title {
	font-family: 'Pinyon Script', cursive !important;
	font-size: clamp(36px, 5vw, 64px) !important;
	line-height: clamp(40px, 5.5vw, 68px) !important;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: #fff;
	margin: 0 0 18px;
}
.silom-pdp2-desc { color: #ece2d0; line-height: 1.75; font-size: 1.02rem; margin-bottom: 22px; }
.silom-pdp2-desc p { margin: 0 0 10px; }
.silom-pdp2-price { font-size: 1.9rem; font-weight: 700; color: #fff; margin-bottom: 18px; }
.silom-pdp2-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Dark booking variant (over the hero). */
.silom-booking--dark { background: rgba(20,14,11,.72); border-color: rgba(246,239,221,.18); box-shadow: none; }
.silom-booking--dark .silom-booking__label { color: #e8d9b8; }
.silom-booking--dark .silom-booking__chip { background: rgba(246,239,221,.1); border-color: rgba(246,239,221,.35); color: #f6efdd; }
.silom-booking--dark .silom-booking__chip:hover { border-color: var(--silom-gold); }
.silom-booking--dark .silom-booking__chip.is-active { background: var(--silom-gold); border-color: var(--silom-gold); color: #3d3029; }
.silom-booking--dark .silom-booking__price,
.silom-booking--dark .silom-booking__price *,
.silom-booking--dark .silom-booking__price .woocommerce-Price-amount,
.silom-pdp2-price,
.silom-pdp2-price * { color: #f1dca6 !important; }

/* Printable gift-regalo box. */
.silom-pdp2-gift { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 13px 18px; border-radius: 14px; background: rgba(246,239,221,.08); border: 1px solid rgba(246,239,221,.25); text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.silom-pdp2-gift:hover { background: rgba(246,239,221,.16); border-color: var(--silom-gold); }
.silom-pdp2-gift__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(200,183,131,.30), rgba(200,183,131,.10) 70%); border: 1px solid rgba(200,183,131,.55); }
.silom-pdp2-gift__icon img { width: 100px; height: 100px; object-fit: contain; }
.silom-pdp2-gift__text { display: flex; flex-direction: column; }
.silom-pdp2-gift__text strong { color: #fff; font-size: 1rem; }
.silom-pdp2-gift__text small { color: #d9c9a8; font-size: .82rem; }

/* Related products (dark band, silom-style cards). */
.silom-pdp2-related { background: #3d3029; padding: clamp(50px, 7vw, 92px) 0; }
.silom-relhead { text-align: center; margin-bottom: 36px; }
.silom-relhead__icon { display: inline-block; margin: 0 auto 10px; width: 110px; height: 110px; object-fit: contain; }
.silom-relhead__title { color: #f6efdd; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; font-weight: 500; }
.silom-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); max-width: 1080px; margin: 0 auto; }
@media (max-width: 860px) { .silom-rel-grid { grid-template-columns: 1fr; max-width: 420px; } }
.silom-relcard { position: relative; background: var(--silom-cream); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); }
.silom-relcard__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.silom-relcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.silom-relcard:hover .silom-relcard__media img { transform: scale(1.05); }
.silom-relcard__notch { display: flex; align-items: center; justify-content: center; margin: -48px auto 0; position: relative; z-index: 2; width: 104px; height: 104px; border-radius: 50%; background: var(--silom-cream); border: 2px solid var(--silom-gold); box-shadow: 0 8px 18px -8px rgba(0,0,0,.45); }
.silom-relcard__notch img { width: 78px; height: 78px; object-fit: contain; }
.silom-relcard__body { padding: 8px 22px 24px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.silom-relcard__title,
.silom-relcard__title.font-heading.font-display {
	font-family: 'Pinyon Script', cursive !important;
	font-size: clamp(22px, 3vw, 32px) !important;
	line-height: clamp(25px, 3vw, 38px) !important;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
}
.silom-relcard__title a {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: #8a3a57;
	text-decoration: none;
}
.silom-relcard__title a:hover { color: #6f2c44; }
.silom-relcard__desc { color: var(--silom-muted); font-size: .92rem; line-height: 1.6; margin: 0; }
.silom-relcard__price { color: var(--silom-brown); font-weight: 700; font-size: 1.05rem; }
.silom-relcard__btn { align-self: center; margin-top: 6px; padding: 10px 26px !important; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; }

/* Same band colour as .silom-pdp2-related; card border sits flush on the footer below. */
.silom-visit2 { background: #3d3029; padding: clamp(36px, 4vw, 56px) 0 0; }
.silom-visit2__card {
	position: relative;
	margin-top: 40px;
	border-radius: 12px 12px 0 0;
	border-bottom: 10px solid #8a3a57;
	overflow: visible;
	padding: clamp(40px, 5vw, 66px) clamp(22px, 4vw, 60px);
}
.silom-visit2__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
}
.silom-visit2__bg::after { content: ""; position: absolute; inset: 0; background: rgba(61,48,41,.58); }
.silom-visit2__icon {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	z-index: 3;
	width: 62px;
	height: 80px;
	object-fit: contain;
}
.silom-visit2__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.silom-visit2__title { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; max-width: 240px; }
.silom-visit2__hours { text-align: center; }
.silom-visit2__hours-label { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--silom-gold); margin-bottom: 8px; }
.silom-visit2__hours p { color: #ece2d0; line-height: 1.7; margin: 0; }
.silom-visit2__btn { flex: 0 0 auto; text-transform: uppercase; }
@media (max-width: 760px) {
	.silom-visit2__inner { flex-direction: column; text-align: center; }
	.silom-visit2__title { max-width: none; }
}

/* ===========================================================================
   PHASE 4 - Tarjetas VIP (hub + individual cards)
   =========================================================================== */

.silom-vip-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(22px, 4vw, 48px);
	max-width: 920px;
	margin: 0 auto;
}
@media (max-width: 700px) { .silom-vip-grid { grid-template-columns: 1fr; } }

.silom-vip-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 24px 56px -32px rgba(80, 64, 55, 0.55);
	border: 1px solid rgba(80, 64, 55, 0.08);
	transition: transform .25s ease, box-shadow .25s ease;
}
.silom-vip-card:hover { transform: translateY(-5px); box-shadow: 0 32px 64px -30px rgba(80, 64, 55, 0.6); }
.silom-vip-card--oro { box-shadow: 0 24px 56px -30px rgba(168, 150, 95, 0.6); }

.silom-vip-card__media { display: block; overflow: hidden; background: var(--silom-cream); }
.silom-vip-card__media img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.silom-vip-card:hover .silom-vip-card__media img { transform: scale(1.04); }

.silom-vip-card__body { padding: 24px 26px 28px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.silom-vip-card__title { color: var(--silom-brown); font-size: 1.5rem; font-weight: 600; margin: 0; }
.silom-vip-card__perk { color: var(--silom-muted); line-height: 1.6; margin: 0; }
.silom-vip-card__price { color: var(--silom-brown); font-weight: 700; font-size: 1.3rem; }
.silom-vip-card__btn { align-self: center; margin-top: 6px; padding: 11px 30px !important; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }

/* ===========================================================================
   PHASE 5 - Cart, Checkout (WooCommerce Blocks) + Thank-you (classic)
   CSS-only theming: never hide functional elements, never touch block logic.
   =========================================================================== */

body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-order-received {
	background: var(--silom-cream);
}

/* Give the block content room under the solid header and center it. */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding: clamp(24px, 4vw, 48px) 20px clamp(40px, 6vw, 80px);
}

/* Headings -> silom brown. */
body.woocommerce-cart h1, body.woocommerce-cart h2, body.woocommerce-cart h3,
body.woocommerce-checkout h1, body.woocommerce-checkout h2, body.woocommerce-checkout h3,
body.woocommerce-order-received h1, body.woocommerce-order-received h2,
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title,
.wc-block-components-title {
	color: var(--silom-brown) !important;
}

/* Order summary / totals card. */
.wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-cart__totals-title + * {
	background: #fff;
	border: 1px solid rgba(80, 64, 55, 0.12);
	border-radius: 16px;
	box-shadow: 0 18px 44px -30px rgba(80, 64, 55, 0.5);
}
.wc-block-components-sidebar { padding: 20px; }

/* Inputs. */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-address-form input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	border-radius: 10px !important;
	border-color: rgba(80, 64, 55, 0.25) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus {
	border-color: var(--silom-gold) !important;
	box-shadow: 0 0 0 1px var(--silom-gold) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-checkout-step__title-text { color: var(--silom-brown); }

/* Buttons: proceed to checkout, place order, etc. -> silom brown pill. */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-container a,
.woocommerce #place_order,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button {
	background: var(--silom-brown) !important;
	border: 1px solid var(--silom-brown) !important;
	color: var(--silom-cream) !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	letter-spacing: .03em;
	transition: background .2s ease, color .2s ease, border-color .2s ease !important;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-container a:hover,
.woocommerce #place_order:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover {
	background: var(--silom-gold) !important;
	border-color: var(--silom-gold) !important;
	color: #fff !important;
}

/* Links + totals emphasis. */
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount,
.woocommerce-Price-amount { color: var(--silom-brown); }
body.woocommerce-cart a:not(.button):not(.wc-block-components-button),
body.woocommerce-checkout a:not(.button):not(.wc-block-components-button) { color: var(--silom-gold-dark); }

/* Cart line item titles. */
.wc-block-cart-item__product-name a,
.wc-block-components-product-name { color: var(--silom-brown) !important; }

/* ---- Thank-you / order received (classic template) ---- */
body.woocommerce-order-received .woocommerce {
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 48px) 20px clamp(40px, 6vw, 80px);
}
body.woocommerce-order-received .woocommerce-order > p:first-child,
.woocommerce-thankyou-order-received {
	background: #fff;
	border: 1px solid rgba(80, 64, 55, 0.12);
	border-left: 5px solid var(--silom-gold);
	border-radius: 14px;
	padding: 22px 26px;
	color: var(--silom-brown);
	font-size: 1.15rem;
	font-weight: 600;
	box-shadow: 0 18px 44px -30px rgba(80, 64, 55, 0.5);
}
.woocommerce ul.order_overview,
.woocommerce .woocommerce-order-overview {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding: 0;
	margin: 24px 0;
}
.woocommerce .woocommerce-order-overview li {
	background: #fff;
	border: 1px solid rgba(80, 64, 55, 0.12);
	border-radius: 12px;
	padding: 14px 18px;
	color: var(--silom-muted);
	text-transform: uppercase;
	font-size: .72rem;
	letter-spacing: .04em;
}
.woocommerce .woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	color: var(--silom-brown);
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 0;
}
.woocommerce table.shop_table {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(80, 64, 55, 0.12);
	background: #fff;
}
.woocommerce table.shop_table th { color: var(--silom-brown); }

/* =====================================================================
   CLASSIC cart + checkout theming (high specificity so it beats the
   parent theme's green/tan defaults). Scoped to the cart/checkout body.
   ===================================================================== */

/* Every WooCommerce button on cart/checkout -> silom brown pill (kills the green). */
body.woocommerce-cart .woocommerce a.button,
body.woocommerce-cart .woocommerce button.button,
body.woocommerce-cart .woocommerce input.button,
body.woocommerce-cart .woocommerce a.checkout-button,
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-checkout .woocommerce a.button,
body.woocommerce-checkout .woocommerce button.button,
body.woocommerce-checkout .woocommerce input.button,
body.woocommerce-checkout .woocommerce #place_order,
body.woocommerce-cart a.checkout-button.button.alt,
body.woocommerce-cart .woocommerce a.button.alt,
body.woocommerce-checkout .woocommerce button.button.alt {
	background-color: var(--silom-brown) !important;
	background-image: none !important;
	border-color: var(--silom-brown) !important;
	color: #f6efdd !important;
	border-radius: 999px !important;
	text-transform: uppercase;
	letter-spacing: .03em;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
body.woocommerce-cart .woocommerce a.button:hover,
body.woocommerce-cart .woocommerce button.button:hover,
body.woocommerce-cart .woocommerce input.button:hover,
body.woocommerce-cart .woocommerce a.checkout-button:hover,
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-checkout .woocommerce a.button:hover,
body.woocommerce-checkout .woocommerce button.button:hover,
body.woocommerce-checkout .woocommerce input.button:hover,
body.woocommerce-checkout .woocommerce #place_order:hover,
body.woocommerce-cart a.checkout-button.button.alt:hover {
	background-color: var(--silom-gold) !important;
	border-color: var(--silom-gold) !important;
	color: #3d3029 !important;
}

/* Cart + order-review tables. */
body.woocommerce-cart .woocommerce table.shop_table,
body.woocommerce-checkout .woocommerce table.shop_table {
	background: #fff !important;
	border: 1px solid rgba(80,64,55,.14) !important;
	border-radius: 14px !important;
	overflow: hidden;
}
body.woocommerce-cart .woocommerce table.shop_table thead th,
body.woocommerce-cart .woocommerce table.shop_table th,
body.woocommerce-checkout .woocommerce table.shop_table thead th {
	background: var(--silom-brown) !important;
	color: #f6efdd !important;
	border-color: rgba(80,64,55,.14) !important;
}
body.woocommerce-cart .woocommerce table.shop_table td,
body.woocommerce-checkout .woocommerce table.shop_table td {
	background: #fff !important;
	color: var(--silom-text) !important;
	border-top-color: rgba(80,64,55,.10) !important;
}

/* Totals box. */
body.woocommerce-cart .cart_totals h2,
body.woocommerce-checkout #order_review_heading,
body.woocommerce .cart_totals h2 { color: var(--silom-brown) !important; }
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .cart-collaterals .cart_totals {
	background: #fff !important;
	border: 1px solid rgba(80,64,55,.14) !important;
	border-radius: 16px !important;
	padding: 22px !important;
	box-shadow: 0 18px 44px -30px rgba(80,64,55,.5);
}
body.woocommerce-cart .cart_totals table,
body.woocommerce-cart .cart_totals table td,
body.woocommerce-cart .cart_totals table th {
	background: transparent !important;
	border: 0 !important;
	color: var(--silom-text) !important;
}
body.woocommerce-cart .cart_totals .order-total .amount,
body.woocommerce-cart .cart_totals .woocommerce-Price-amount { color: var(--silom-brown) !important; font-weight: 700; }

/* Coupon + quantity + remove. */
body.woocommerce-cart .woocommerce .coupon input.input-text,
body.woocommerce-cart .woocommerce .quantity input.qty,
body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select {
	border: 1px solid rgba(80,64,55,.25) !important;
	border-radius: 10px !important;
}
body.woocommerce-cart .woocommerce a.remove {
	color: var(--silom-brown) !important;
}
body.woocommerce-cart .woocommerce a.remove:hover {
	background: var(--silom-brown) !important;
	color: #fff !important;
}