/*
Theme Name: Lotus Spa
Theme URI: https://lotusspa.se
Author: Lotus Spa
Description: Lightweight custom theme for Lotus Spa, Nora.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Private
Text Domain: lotus-spa
*/

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
	--bg-deep:      #0e080c;
	--bg-base:      #1a1014;
	--bg-section:   #1e1018;
	--bg-card:      #221218;
	--bg-lift:      #2a1820;
	--border:       #2e1e28;
	--border-mid:   rgba(255,255,255,0.07);

	--text-head:    #f0e8e0;
	--text-body:    #e8e0d8;
	--text-muted:   #c8bdb5;
	--text-dim:     #8a7a72;

	--magenta:      #e10087;
	--magenta-h:    #ff40b0;
	--purple:       #500878;
	--purple-h:     #7a18a8;

	--font-head:    'Marcellus', Georgia, serif;
	--font-body:    'Source Sans 3', Arial, sans-serif;

	--max-width:    1100px;
	--radius:       2px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
	background: var(--bg-base);
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	font-weight: 300;
}

img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }

/* ============================================================
   HEADINGS — Marcellus throughout
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-head);
	font-weight: 400;
	font-style: normal; /* Marcellus has no italic, browser won't fake it */
	color: var(--text-head);
	line-height: 1.2;
}

/* ============================================================
   FADE-IN ON SCROLL
   ============================================================ */
.fade-in {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 2rem;
}

.divider-accent {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--magenta), var(--purple), transparent);
}

.eyebrow {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--magenta);
	font-family: var(--font-body);
	font-weight: 400;
	display: block;
	margin-bottom: 0.6rem;
}

.section { padding: 4rem 0; }

.section-header {
	text-align: center;
	margin-bottom: 3rem;
}

.section-header h2 {
	font-size: 28px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
	display: inline-block;
	background: var(--magenta);
	color: #fff;
	border: none;
	padding: 13px 32px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 600;
	transition: background 0.2s;
}
.btn-primary:hover { background: var(--magenta-h); color:#fff; }

.btn-outline {
	display: inline-block;
	background: transparent;
	color: var(--text-head);
	border: 1px solid var(--border-mid);
	padding: 12px 30px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 400;
	transition: all 0.2s;
}
.btn-outline:hover { border-color: var(--magenta); color: var(--magenta); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header {
	background: var(--bg-deep);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.logo-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.logo-wrap img,
.logo-wrap .custom-logo-link img,
.logo-wrap .custom-logo {
	height: 36px !important;
	width: auto !important;
	max-width: none !important;
}

.logo-wrap span {
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-family: var(--font-head);
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.main-nav a {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-dim);
	font-family: var(--font-body);
	font-weight: 400;
	transition: color 0.2s;
}
.main-nav a:hover { color: var(--text-body); }

.main-nav .btn-book {
	background: var(--magenta);
	color: #fff;
	padding: 8px 20px;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-family: var(--font-body);
	font-weight: 600;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s;
}
.main-nav .btn-book:hover { background: var(--magenta-h); }

.nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 4px;
}
.nav-toggle span {
	display: block;
	width: 24px;
	height: 1px;
	background: var(--text-body);
	transition: all 0.3s;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 520px;
}

.hero-left {
	padding: 5rem 3rem 4rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--bg-base);
}

.hero-left h1 {
	font-size: 40px;
	line-height: 1.15;
	margin-bottom: 1.2rem;
}

.hero-left p {
	font-size: 16px;
	color: var(--text-dim);
	line-height: 1.8;
	max-width: 380px;
	margin-bottom: 2.5rem;
	font-family: var(--font-body);
	font-weight: 300;
}

.hero-right {
	position: relative;
	overflow: hidden;
	background: var(--bg-lift);
	min-height: 400px;
}

.hero-right img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

.hero-svg-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.lotus-path {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 600;
	stroke-dashoffset: 600;
}
.lp1 { stroke: var(--magenta);  stroke-width:1.4; animation: ldraw 2.4s ease forwards 0.4s; }
.lp2 { stroke: var(--purple);   stroke-width:1.0; animation: ldraw 2.2s ease forwards 0.8s; }
.lp3 { stroke: var(--magenta);  stroke-width:1.0; animation: ldraw 2.0s ease forwards 1.1s; }
.lp4 { stroke: var(--purple);   stroke-width:0.8; animation: ldraw 1.8s ease forwards 1.4s; }
.lp5 { stroke: var(--magenta);  stroke-width:0.8; animation: ldraw 1.8s ease forwards 1.7s; }
.lp6 { stroke: var(--purple);   stroke-width:0.7; animation: ldraw 1.6s ease forwards 2.0s; }
.lp7 { stroke: var(--magenta);  stroke-width:0.7; opacity:0.5; animation: ldraw 1.4s ease forwards 2.4s; }

@keyframes ldraw { to { stroke-dashoffset: 0; } }

/* ============================================================
   TREATMENTS GRID
   ============================================================ */
.treatments-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: var(--border);
}

.treatment-card {
	background: var(--bg-card);
	padding: 2rem 1.5rem;
}

.treatment-card img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	margin-bottom: 1.2rem;
	filter: brightness(0.85);
}

.treatment-card h3 {
	font-size: 17px;
	margin-bottom: 0.5rem;
}

.treatment-card p {
	font-size: 14px;
	color: var(--text-dim);
	line-height: 1.7;
	margin-bottom: 1rem;
	font-weight: 300;
}

.treatment-price {
	font-size: 13px;
	color: var(--magenta);
	letter-spacing: 0.06em;
	margin-bottom: 1rem;
}

.treatment-link {
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border-mid);
	padding-bottom: 2px;
	transition: all 0.2s;
}
.treatment-link:hover { color: var(--magenta); border-color: var(--magenta); }

/* ============================================================
   PHOTO STRIP
   ============================================================ */
.photo-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
}
.photo-strip img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	filter: brightness(0.85);
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-section {
	background: var(--bg-section);
	padding: 4rem 0;
}

.reviews-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	max-width: 820px;
	margin: 0 auto;
}

.review-card {
	background: var(--bg-card);
	padding: 1.5rem;
	border-left: 2px solid var(--purple);
}

.review-card p {
	font-size: 14px;
	font-style: italic;
	color: var(--text-muted);
	line-height: 1.8;
	margin-bottom: 0.75rem;
	font-weight: 300;
}

.review-author {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-dim);
}

/* ============================================================
   HOURS + CONTACT
   ============================================================ */
.info-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--bg-base);
}

.info-col { padding: 3.5rem 2.5rem; }
.info-col:first-child { border-right: 1px solid var(--border); }

.info-col-title {
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--magenta);
	margin-bottom: 1.5rem;
	font-weight: 400;
}

.hours-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
	font-size: 14px;
	font-weight: 300;
}
.hours-row:last-child { border-bottom: none; }
.hours-row .day  { color: var(--text-dim); }
.hours-row .time { color: var(--text-body); }
.hours-row.today .day,
.hours-row.today .time { color: var(--magenta); font-style: italic; }

.contact-row {
	padding: 7px 0;
	font-size: 14px;
	color: var(--text-dim);
	font-weight: 300;
}
.contact-row a { color: var(--text-body); transition: color 0.2s; }
.contact-row a:hover { color: var(--magenta); }

/* ============================================================
   PAGE HERO (behandlingssidor)
   ============================================================ */
.page-hero {
	position: relative;
	width: 100%;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6rem 2rem 5rem;
	overflow: hidden;
	border-bottom: 1px solid var(--border);
}

.page-hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: brightness(1);
	z-index: 0;
}

.page-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(105,105,105,0.3) 0%, rgb(26,16,20) 100%);
	z-index: 1;
}

.page-hero .eyebrow,
.page-hero h1,
.page-hero p {
	position: relative;
	z-index: 2;
}

.page-hero h1 {
	font-size: 42px;
	color: #fff;
	margin-bottom: 0.6rem;
	text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.page-hero p {
	font-size: 14px;
	color: rgba(255,255,255,0.7);
	font-weight: 300;
	letter-spacing: 0.08em;
}

/* ============================================================
   TREATMENT PAGE CONTENT
   ============================================================ */
.treatment-page {
	max-width: 820px;
	margin: 0 auto;
	padding: 3rem 2rem;
}

.treatment-page h2 {
	font-size: 22px;
	margin: 2rem 0 0.8rem;
}

.treatment-page p {
	font-size: 15px;
	color: var(--text-muted);
	line-height: 1.9;
	margin-bottom: 1rem;
	font-weight: 300;
}

.treatment-page img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	filter: brightness(0.85);
	margin: 1.5rem 0;
}

.price-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2px;
	background: var(--border);
	margin: 2.5rem 0;
}

.price-card {
	background: var(--bg-card);
	padding: 1.5rem;
}

.price-card-amount {
	font-size: 28px;
	font-family: var(--font-head);
	color: var(--magenta);
	margin-bottom: 0.3rem;
}

.price-card-amount span {
	font-size: 14px;
	color: var(--text-dim);
	font-family: var(--font-body);
	font-weight: 300;
}

.price-card h3 {
	font-size: 15px;
	margin-bottom: 0.5rem;
}

.price-card p {
	font-size: 13px;
	color: var(--text-dim);
	line-height: 1.6;
	margin-bottom: 1.2rem;
	font-weight: 300;
}

.cta-band {
	background: var(--bg-lift);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 2.5rem;
	text-align: center;
}

.cta-band p {
	font-size: 15px;
	color: var(--text-dim);
	margin-bottom: 1.2rem;
	font-weight: 300;
}

/* ============================================================
   ACCORDION (FAQ)
   ============================================================ */
.accordion { border-top: 1px solid var(--border); }
.accordion-item { border-bottom: 1px solid var(--border); }

.accordion-trigger {
	width: 100%;
	background: none;
	border: none;
	padding: 1.2rem 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	text-align: left;
	color: var(--text-head);
	font-size: 16px;
	font-family: var(--font-head);
	font-weight: 400;
	gap: 1rem;
}
.accordion-trigger:hover { color: var(--magenta); }

.accordion-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	position: relative;
}
.accordion-icon::before,
.accordion-icon::after {
	content: '';
	position: absolute;
	background: var(--magenta);
	transition: transform 0.3s, opacity 0.3s;
}
.accordion-icon::before { width:12px; height:1px; top:50%; left:50%; transform:translate(-50%,-50%); }
.accordion-icon::after  { width:1px; height:12px; top:50%; left:50%; transform:translate(-50%,-50%); }
.accordion-item.open .accordion-icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity:0; }

.accordion-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.accordion-body-inner {
	padding: 0 0 1.5rem;
	font-size: 15px;
	color: var(--text-muted);
	line-height: 1.9;
	font-weight: 300;
}

/* ============================================================
   GENERIC PAGE
   ============================================================ */
.page-content {
	max-width: 780px;
	margin: 0 auto;
	padding: 3rem 2rem;
}

.page-content h2 { font-size: 22px; margin: 2rem 0 0.8rem; }

.page-content p {
	font-size: 15px;
	color: var(--text-muted);
	line-height: 1.9;
	margin-bottom: 1.2rem;
	font-weight: 300;
}

/* ============================================================
   BOOKING PAGE
   ============================================================ */
.booking-wrap {
	max-width: 860px;
	margin: 0 auto;
	padding: 4rem 2rem;
}

.booking-wrap .lead {
	font-size: 15px;
	color: var(--text-dim);
	margin-bottom: 3rem;
	font-weight: 300;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	background: var(--bg-deep);
	border-top: 1px solid var(--border);
	color: var(--text-dim);
	padding: 1.5rem 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	letter-spacing: 0.06em;
	font-weight: 300;
}

.footer-logo {
	color: var(--text-muted);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: 12px;
	font-family: var(--font-head);
}

.site-footer a { color: var(--text-dim); transition: color 0.2s; }
.site-footer a:hover { color: var(--magenta); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
	.hero { grid-template-columns: 1fr; }
	.hero-right { min-height: 260px; order: -1; }
	.hero-left { padding: 2.5rem 1.5rem; }
	.hero-left h1 { font-size: 28px; }

	.treatments-grid { grid-template-columns: 1fr; }

	.photo-strip { grid-template-columns: 1fr 1fr; }
	.photo-strip img { height: 140px; }

	.reviews-grid { grid-template-columns: 1fr; }

	.info-section { grid-template-columns: 1fr; }
	.info-col:first-child { border-right: none; border-bottom: 1px solid var(--border); }

	.price-cards { grid-template-columns: 1fr; }

	.main-nav {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		position: absolute;
		top: 100%;
		left: 0; right: 0;
		background: var(--bg-deep);
		border-bottom: 1px solid var(--border);
		padding: 1.5rem 2rem;
		gap: 1.2rem;
	}
	.main-nav.open { display: flex; }
	.nav-toggle { display: flex; }

	.site-footer { flex-direction: column; gap: 0.5rem; text-align: center; }

	.other-treatments-grid { grid-template-columns: 1fr; }
	.other-treatment-item.center-solo { grid-column: auto; }
}

/* ============================================================
   OTHER TREATMENTS
   ============================================================ */
.other-treatments {
	background: var(--bg-section);
	border-top: 1px solid var(--border);
	padding: 3.5rem 2rem;
}

.other-treatments-title {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--magenta);
	font-family: var(--font-body);
	font-weight: 400;
	text-align: center;
	display: block;
	margin-bottom: 2rem;
}

.other-treatments-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: var(--border);
	max-width: var(--max-width);
	margin: 0 auto;
}

.other-treatment-item {
	background: var(--bg-card);
	padding: 1.4rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	transition: background 0.2s;
}
.other-treatment-item:hover { background: var(--bg-lift); }

.ot-icon {
	width: 32px;
	height: 32px;
	color: var(--purple);
	margin-bottom: 0.2rem;
}

.other-treatment-item h4 {
	font-size: 14px;
	color: var(--text-head);
	line-height: 1.3;
}

.other-treatment-item p {
	font-size: 12px;
	color: var(--text-dim);
	line-height: 1.5;
	flex: 1;
	font-weight: 300;
}

.other-treatment-item a {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--magenta);
	border-bottom: 1px solid var(--purple);
	padding-bottom: 1px;
	align-self: flex-start;
	transition: border-color 0.2s;
	margin-top: auto;
	font-weight: 400;
}
.other-treatment-item a:hover { border-color: var(--magenta); }

.other-treatment-item.center-solo { grid-column: 2; }

/* ============================================================
   GOOGLE REVIEWS
   ============================================================ */
.review-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.review-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.review-avatar--placeholder {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--purple);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-head);
	font-size: 15px;
	flex-shrink: 0;
}

.review-author {
	display: block;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-weight: 400;
}

.review-date {
	display: block;
	font-size: 11px;
	color: var(--text-dim);
	margin-top: 2px;
}

.review-stars {
	margin-bottom: 0.6rem;
	line-height: 1;
}

.review-star {
	color: var(--magenta);
	font-size: 13px;
}

.review-star--empty {
	color: var(--border);
}

.review-source {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-dim);
	margin-top: 0.75rem;
	font-family: var(--font-body);
	transition: color 0.2s;
}

.review-source:hover { color: var(--magenta); }

/* ============================================================
   OVERFLOW FIX — prevent horizontal scroll on mobile
   ============================================================ */
html, body {
	overflow-x: hidden;
	width: 100%;
}

.hero {
	width: 100%;
	max-width: 100%;
}

.treatments-grid,
.photo-strip,
.info-section,
.other-treatments-grid {
	width: 100%;
	max-width: 100%;
}

@media (max-width: 768px) {
	.other-treatments-grid { grid-template-columns: 1fr !important; }
	.other-treatment-item.center-solo { grid-column: auto !important; }

	.container {
		padding: 0 1.2rem;
		width: 100%;
	}

	.hero-left,
	.hero-right {
		width: 100%;
		max-width: 100%;
	}

	.price-cards {
		width: 100%;
	}
}

/* ============================================================
   BOOKING PAGE (page-book.php)
   ============================================================ */
.book-wrap {
	max-width: 860px;
	margin: 0 auto;
	padding: 3rem 2rem 4rem;
}

.book-info-bar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: var(--border);
	margin-bottom: 2rem;
}

.book-info-item {
	background: var(--bg-card);
	padding: 1.4rem 1.2rem;
	font-size: 13px;
	color: var(--text-muted);
	font-weight: 300;
	line-height: 1.7;
}

.book-info-item a { color: var(--magenta); }

.epassi-logo {
	height: 28px;
	width: auto;
	margin-bottom: 0.7rem;
	filter: brightness(1.1);
}

.book-payment-methods {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: var(--text-muted);
	font-weight: 300;
}

.book-no-card {
	color: var(--magenta);
	font-weight: 400;
	margin-top: 4px;
}

.book-warning {
	background: var(--bg-lift);
	border-left: 2px solid var(--gold, #b8955a);
	border-left-color: #b8955a;
	padding: 0.9rem 1.2rem;
	font-size: 13px;
	color: var(--text-muted);
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 2rem;
	font-weight: 300;
	line-height: 1.6;
}

.book-warning svg {
	flex-shrink: 0;
	color: #b8955a;
	margin-top: 2px;
}

.book-form-wrap {
	background: var(--bg-card);
	border: 1px solid var(--border);
	padding: 2rem 1.5rem;
	margin-bottom: 3rem;
}

.book-section {
	margin-bottom: 2.5rem;
}

.book-section-title {
	font-family: var(--font-head);
	font-size: 18px;
	color: var(--text-head);
	margin-bottom: 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--border);
}

.book-section-title span {
	font-family: var(--font-body);
	font-size: 11px;
	color: var(--text-dim);
	font-weight: 300;
	letter-spacing: 0.1em;
	margin-left: 0.8rem;
}

.price-row {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid var(--border);
	font-size: 13px;
	font-weight: 300;
	color: var(--text-muted);
}

.price-row:last-child { border-bottom: none; }
.price-row span:last-child { color: var(--magenta); font-weight: 400; }
.price-row em { color: var(--text-dim); font-style: normal; font-size: 11px; }

.book-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	background: var(--border);
}

.book-card {
	background: var(--bg-card);
	padding: 1.5rem;
}

.book-card-title {
	font-family: var(--font-head);
	font-size: 15px;
	color: var(--text-head);
	margin-bottom: 1rem;
}

.book-card p {
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.7;
	font-weight: 300;
	margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
	.book-info-bar { grid-template-columns: 1fr; }
	.book-cards { grid-template-columns: 1fr; }
	.book-wrap { padding: 2rem 1.2rem 3rem; }
}

/* ============================================================
   GUTENBERG PRICE TABLE (bokningssidan)
   ============================================================ */
.page-content .wp-block-table.price-table,
.booking-wrap .wp-block-table.price-table {
	margin: 0 0 2rem;
}

.page-content .price-table table,
.booking-wrap .price-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-body);
}

.page-content .price-table td,
.booking-wrap .price-table td {
	padding: 7px 0;
	font-size: 13px;
	font-weight: 300;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}

.page-content .price-table td:last-child,
.booking-wrap .price-table td:last-child {
	text-align: right;
	color: var(--magenta);
	font-weight: 400;
	white-space: nowrap;
	padding-left: 1rem;
}

.page-content .price-table tr:last-child td,
.booking-wrap .price-table tr:last-child td {
	border-bottom: none;
}

.page-content h3,
.booking-wrap h3 {
	font-size: 16px;
	color: var(--text-head);
	margin: 2rem 0 0.5rem;
	font-family: var(--font-head);
	font-weight: 400;
}

.page-content h2,
.booking-wrap h2 {
	font-size: 22px;
	color: var(--text-head);
	margin: 2.5rem 0 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
	font-family: var(--font-head);
}

.page-content .wp-block-separator,
.booking-wrap .wp-block-separator {
	border: none;
	border-top: 1px solid var(--border);
	margin: 2rem 0;
}

.page-content .wp-block-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-bottom: 1.5rem;
}

.book-warning {
	background: var(--bg-lift);
	border-left: 2px solid #b8955a;
	padding: 0.9rem 1.2rem;
	font-size: 13px;
	color: var(--text-muted);
	margin: 1.5rem 0;
	font-weight: 300;
	line-height: 1.6;
}

@media (max-width: 768px) {
	.page-content .wp-block-columns {
		grid-template-columns: 1fr;
		gap: 0;
	}
}