/* Sofia Sparla theme.
   Numbers come from the design mockup: desktop measured at 1024 and 1280, phone from the 390px reference screens.
   Mobile first: base = phone, 768 = tablet, 1024 = desktop. */

:root {
	--ink: #3b2b26;
	--ink-2: #4a3a34;
	--muted: #6b5b55;
	--muted-2: #8b7d78;
	--sep: #d8d2cf;
	--line: #e4eef3;
	--line-2: #eef4f7;
	--line-3: #dcebf2;
	--soft: #f4fafd;
	--blue: #12aee3;
	--blue-ink: #0f9dd6;
	--ok-bg: #e4f0e7;
	--ok: #2f5a3d;
	--ok-2: #3f6b4d;
	--wait-bg: #fdf0dc;
	--wait: #8a4b18;
	--full-bg: #efe9e6;
	--full: #5a4a44;
	--gold: #f5b301;
	--footer-bg: #3b2b26;
	--footer-ink: #d5c8c3;
	--pad: 5vw;
	--max: 1240px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font-family: Lato, system-ui, sans-serif; font-size: 16px; line-height: normal; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-ink); text-decoration: none; }
a:hover { color: var(--ink); }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
[hidden] { display: none !important; } /* the hidden attribute must beat display:flex/grid on cards and panels */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 8px 14px; background: #fff; color: var(--ink); font-weight: 700; }
.skip-link:focus { left: 12px; }
.container { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border: 2px solid var(--blue); border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 900; line-height: normal; text-align: center; cursor: pointer; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-ink); border-color: var(--blue-ink); color: #fff; }
.btn--outline { background: #fff; color: var(--blue-ink); }
.btn--outline:hover { background: var(--soft); color: var(--blue-ink); }
.btn--block { display: flex; width: 100%; }

/* Two-way pill switch: agenda tabs and workshop location filter */
.switch { display: flex; gap: 11px; }
.switch__btn { flex: 1; padding: 11px 16px; font-size: 15.5px; background: #fff; color: var(--blue-ink); }
.switch__btn:hover { color: var(--blue-ink); background: var(--soft); }
.switch__btn[aria-selected="true"], .switch__btn[aria-pressed="true"] { background: var(--blue); color: #fff; }
.label-long { display: none; }

/* Top of site: top bar + header + 2px rule */
.site-top { position: relative; border-bottom: 3px solid var(--line-2); }
.topbar { display: none; }
.site-header { display: flex; align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 10px; }
.site-logo img { width: 115px; }
.header-cta { margin-left: auto; padding: 7px 14px; border: 0; font-size: 14px; }
.header-cta__long { display: none; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: currentColor; }
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.site-header.is-open .nav-toggle__bars { background: transparent; }
.site-header.is-open .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.site-header.is-open .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

.main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; padding: 6px var(--pad) 18px; background: #fff; border-bottom: 2px solid var(--line-2); }
.site-header.is-open .main-nav { display: block; }
.main-nav__list { list-style: none; margin: 0; padding: 0; }
.main-nav__list a { display: block; padding: 12px 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.main-nav__list .current-menu-item > a, .main-nav__list .current-menu-ancestor > a, .main-nav__list .current-page-ancestor > a { color: var(--blue-ink); }
.main-nav__lang { display: flex; gap: 14px; padding-top: 12px; font-size: 15px; color: var(--muted-2); }
.main-nav__lang .sep, .topbar .sep { color: var(--sep); }
.main-nav__lang a, .topbar__lang a { color: var(--muted-2); }
.main-nav__lang a:not(.is-current), .topbar__lang a:not(.is-current) { color: var(--blue-ink); font-weight: 700; }

/* Page scaffolding */
.page-wrap { padding-top: 28px; padding-bottom: 48px; }
.page-title { font-size: clamp(30px, 3.6vw, 44px); font-weight: 900; line-height: normal; }
.page-intro { margin-top: 10px; max-width: 840px; font-size: 17.5px; line-height: 28px; color: var(--ink-2); }
.page-intro p + p { margin-top: 10px; }
/* Text pages written in the editor (privacy statement, parking, newsletter pages): headings, lists and links. */
.page-intro h2, .page-intro h3 { margin-top: 30px; font-weight: 900; line-height: 1.3; color: var(--ink); }
.page-intro h2 { font-size: 24px; }
.page-intro h3 { font-size: 20px; }
.page-intro h2 + p, .page-intro h3 + p, .page-intro h2 + ul, .page-intro h3 + ul { margin-top: 8px; }
.page-intro ul, .page-intro ol { margin: 10px 0 0; padding-left: 22px; }
.page-intro li + li { margin-top: 6px; }
.page-intro a { text-decoration: underline; }
.page-intro strong { color: var(--ink); }
.page-intro figure, .page-intro .wp-block-image { margin: 20px 0 0; }
.page-intro img { border-radius: 14px; }
.page-intro p:empty { display: none; }

/* Band: highlighted call to action at the bottom of a page */
.band { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 26px; padding: 26px; border-radius: 18px; background: var(--soft); }
.band--tight { padding: 24px; }
.band__title { font-size: 21px; font-weight: 900; }
.band__text { margin-top: 6px; color: var(--ink-2); }
.band .btn { padding: 11px 24px; }
.band .btn--outline { background: transparent; }

/* Agenda */
.agenda-tabs { margin-top: 24px; }
.agenda-month { margin-top: 24px; }
.agenda-month + .agenda-month { margin-top: 26px; }
.agenda-month__title { padding-bottom: 8px; border-bottom: 2px solid var(--line); font-size: 22px; font-weight: 900; }
.date-list { display: grid; gap: 14px; margin-top: 14px; padding: 0; list-style: none; }
.date-card { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: start; padding: 16px; border: 2px solid var(--line); border-radius: 16px; background: #fff; }
.date-box { display: flex; flex-direction: column; align-items: center; width: 74px; padding: 10px 8px; border-radius: 12px; background: var(--soft); text-align: center; }
.date-box__dow { font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.date-box__day { font-size: 26px; font-weight: 900; line-height: 1.1; }
.date-box__mon { font-size: 13px; font-weight: 700; color: var(--muted-2); }
.date-card__title { font-size: 20px; font-weight: 900; }
.date-card__meta { margin-top: 2px; font-size: 15.5px; color: var(--ink-2); }
.date-card__status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.badge { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 900; }
.badge--confirmed { background: var(--ok-bg); color: var(--ok); }
.badge--full { background: var(--full-bg); color: var(--full); }
.badge--open, .badge--almost { background: var(--wait-bg); color: var(--wait); }
.date-card__note { font-size: 15px; font-weight: 700; }
.date-card--confirmed .date-card__note { color: var(--ok-2); }
.date-card--full .date-card__note { color: var(--muted); }
.date-card--open .date-card__note, .date-card--almost .date-card__note { color: var(--wait); }
.date-card__cta { grid-column: 1 / -1; }
.date-card__cta .btn { width: 100%; }
.agenda-empty { margin-top: 24px; color: var(--muted); }

/* About page, as the mockup: text next to a large photo, then a band with three photos. */
.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 34px; align-items: start; padding-top: 36px; padding-bottom: 40px; }
.about__text { display: flex; flex-direction: column; gap: 16px; }
.about__body { display: flex; flex-direction: column; gap: 16px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.about__body p:first-child { font-size: 18px; }
.about__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.about__actions .btn { padding: 11px 22px; font-size: 15.5px; }
.about__photo { width: 100%; height: clamp(240px, 32vw, 420px); object-fit: cover; border-radius: 18px; }
.about-gallery { background: var(--soft); }
.about-gallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; padding-top: 36px; padding-bottom: 36px; }
.about-gallery__img { width: 100%; height: 200px; object-fit: cover; border-radius: 14px; }

/* Blog: overview with tabs, one highlighted post and cards. Numbers from the blog mockup. */
.recipes-tabs { flex-wrap: wrap; margin-top: 22px; }
.recipes-tabs .switch__btn { flex: 0 0 auto; }
.recipes-tabs .switch__btn[aria-current="page"] { background: var(--blue); color: #fff; }
.recipes-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: 24px; border: 2px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; color: var(--ink); }
.recipes-featured__img { width: 100%; height: clamp(240px, 26vw, 330px); object-fit: cover; }
.recipes-featured__body { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 32px 34px; }
.recipes-featured__label { font-size: 13px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-ink); }
.recipes-featured__title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; line-height: 1.2; }
.recipes-featured__text { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.recipes-featured__meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14.5px; font-weight: 700; color: var(--muted); }
.recipes-featured__more { font-size: 16px; font-weight: 900; color: var(--blue-ink); }
.recipes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; margin-top: 24px; }
.recipe-card { display: flex; flex-direction: column; border: 2px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; color: var(--ink); }
.recipe-card__img { width: 100%; height: 180px; object-fit: cover; }
.recipe-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.recipe-card__eyebrow { font-size: 13.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.recipe-card__title { font-size: 21px; font-weight: 900; color: var(--blue-ink); }
.recipe-card__text { flex: 1; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.recipe-card__meta { font-size: 14.5px; font-weight: 700; color: var(--muted); }
.recipes-more { margin-top: 30px; }
.recipes-more a { display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; border: 2px solid var(--blue); border-radius: 999px; font-size: 15.5px; font-weight: 900; }

/* One post: the head is the same for the three kinds, the body differs. */
.post { max-width: 940px; padding-top: 28px; padding-bottom: 48px; }
.post--techniek { max-width: 840px; }
.post--uit-de-studio, .post--plain { max-width: 780px; }
.post__head { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.post__eyebrow { font-size: 13px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.post__title { font-size: clamp(30px, 4vw, 46px); font-weight: 900; line-height: 1.15; }
.post__intro { max-width: 40em; font-size: 18.5px; line-height: 1.6; color: var(--ink-2); }
.post__photo { width: 100%; height: clamp(220px, 30vw, 380px); margin-top: 22px; object-fit: cover; border-radius: 18px; }
.post__body { display: flex; flex-direction: column; gap: 20px; max-width: 38em; margin-top: 22px; font-size: 17.5px; line-height: 1.75; color: var(--ink-2); }
.post__body p + p { margin-top: 0; }
.post__heading { font-size: 26px; font-weight: 900; color: var(--ink); }
.post-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; margin-top: 22px; }
.post-photos__img { width: 100%; height: 220px; object-fit: cover; border-radius: 14px; }
.post-quote { margin-top: 22px; padding: 30px 34px; border-radius: 18px; background: var(--soft); }
.post-quote blockquote { max-width: 30em; margin: 0; font-size: 22px; font-weight: 900; line-height: 1.5; color: var(--ink); }
.post-quote figcaption { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--muted); }
.post-cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: center; gap: 22px; margin-top: 30px; padding: 34px; border-radius: 18px; background: var(--footer-bg); }
.post-cta__title { font-size: 25px; font-weight: 900; color: #fff; }
.post-cta__text { margin-top: 8px; font-size: 16.5px; line-height: 1.6; color: #e8dcd8; }
.post-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.post-cta__btn { padding: 14px 26px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 900; }
.post-cta__btn:hover { background: var(--blue-ink); color: #fff; }
.post-cta__btn--ghost { background: transparent; border: 2px solid #fff; padding: 12px 24px; }
.post-cta__btn--ghost:hover { background: #fff; color: var(--ink); }

/* Recipe */
.recipe-facts { display: flex; flex-wrap: wrap; margin: 22px 0 0; padding: 0; border: 2px solid var(--line); border-radius: 18px; overflow: hidden; list-style: none; }
.recipe-facts li { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 130px; padding: 18px 20px; border-right: 1px solid var(--line); }
.recipe-facts li:last-child { border-right: 0; }
.recipe-facts__label { font-size: 12.5px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.recipe-facts__value { font-size: 18px; font-weight: 900; }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; gap: 28px; margin-top: 26px; }
.recipe-needs { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px; border-radius: 18px; background: var(--soft); }
.recipe-needs__title, .recipe-steps__title { font-size: 22px; font-weight: 900; }
.recipe-needs__list { margin: 0; padding: 0; list-style: none; }
.recipe-needs__list li { display: flex; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid #dfeaf0; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.recipe-needs__list li + li { margin-top: 9px; }
.recipe-needs__list li:last-child { padding-bottom: 0; border-bottom: 0; }
.recipe-needs__amount { min-width: 76px; font-weight: 900; color: var(--ink); }
.recipe-needs__note { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.recipe-steps { display: flex; flex-direction: column; gap: 16px; }
.recipe-steps__list { counter-reset: step; margin: 0; padding: 0; list-style: none; }
.recipe-steps__list li { position: relative; padding-left: 44px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.recipe-steps__list li + li { margin-top: 18px; }
.recipe-steps__list li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 900; }
.recipe-steps__step { font-size: 16.5px; font-weight: 900; color: var(--ink); }
.recipe-tip { padding: 22px 24px; border: 2px solid var(--line); border-radius: 18px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.recipe-tip__label { margin-bottom: 6px; font-size: 13px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-ink); }

/* Technique */
.post-video { position: relative; margin-top: 22px; padding-top: 56.25%; border-radius: 18px; overflow: hidden; background: var(--footer-bg); }
.post-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.chapters { margin-top: 26px; padding: 28px 32px; border-radius: 18px; background: var(--soft); }
.chapters__title { font-size: 20px; font-weight: 900; }
.chapters__list { margin: 14px 0 0; padding: 0; list-style: none; }
.chapters__list li { display: flex; gap: 14px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.chapters__list li + li { margin-top: 8px; }
.chapters__time { min-width: 52px; font-weight: 900; color: var(--blue-ink); }

/* Availability grid (agenda, second tab). Phone from the 390px reference: seven columns, no words. Colours from the mockup. */
.avail { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.avail + .band { margin-top: 16px; }
.avail-legend { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); }
.avail-legend li { display: flex; align-items: center; gap: 7px; }
.avail-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.avail-swatch--free, .avail-day--free { background: #0d7fa8; color: #fff; }
.avail-swatch--workshop, .avail-day--workshop { background: var(--gold); color: var(--ink); }
.avail-swatch--busy, .avail-day--busy { background: #ddd3cf; color: var(--ink-2); }
.avail-month { border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.avail-month__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px; background: var(--soft); }
.avail-month__nav { display: flex; align-items: center; gap: 4px; }
.avail-month__title { min-width: 7.5em; font-size: 14px; font-weight: 900; text-align: center; }
.avail-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--blue-ink); cursor: pointer; }
.avail-arrow:hover { background: #fff; }
.avail-arrow:disabled { background: transparent; color: var(--sep); cursor: default; }
.avail-arrow--next svg { transform: scaleX(-1); }
.avail-month__note { display: none; font-size: 14.5px; color: var(--muted); }
.avail-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--line-2); }
.avail-dow { padding: 5px 0; background: #fff; text-align: center; font-size: 10px; font-weight: 900; text-transform: uppercase; color: var(--muted-2); }
.avail-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 38px; padding: 4px 2px; font-size: 13px; font-weight: 700; text-align: center; }
.avail-day--outside, .avail-day--past { background: #f7f5f4; color: #c9bdb8; }
.avail-day__tag { display: none; font-size: 11px; line-height: 1.15; }

@media (min-width: 768px) {
	.avail { gap: 16px; }
	.avail-legend { flex-direction: row; flex-wrap: wrap; gap: 18px; font-size: 15.5px; }
	.avail-legend li { gap: 8px; }
	.avail-swatch { width: 14px; height: 14px; border-radius: 4px; }
	.avail-month { border-radius: 16px; }
	.avail-month__head { padding: 7px 20px 7px 10px; border-bottom: 2px solid var(--line); }
	.avail-month__title { font-size: 18px; }
	.avail-month__note { display: block; }
	.avail-dow { padding: 8px 2px; font-size: 12.5px; letter-spacing: 0.04em; }
	.avail-day { min-height: 58px; font-size: 15px; }
	.avail-day__tag { display: block; }
}

/* Workshops overview */
.ws-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; padding: 14px 0; border-top: 2px solid var(--line-2); border-bottom: 2px solid var(--line-2); }
.ws-filter__label { width: 100%; font-size: 15px; font-weight: 700; color: var(--muted); }
.ws-filter .switch { flex: 1; }
.ws-filter .switch__btn { padding: 9px 14px; font-size: 15px; }
.ws-filter__count { width: 100%; font-size: 14.5px; color: var(--muted-2); }
.ws-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 24px; padding: 0; list-style: none; }
.ws-card { display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--line); border-radius: 18px; background: #fff; }
.ws-card__img { width: 100%; height: 180px; object-fit: cover; }
.ws-card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.ws-card__title { font-size: 22px; font-weight: 900; }
.ws-card__text { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.ws-card__meta { font-size: 14.5px; font-weight: 700; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 5px 11px; border-radius: 999px; background: var(--line-2); color: var(--ink); font-size: 13px; font-weight: 700; }
.tag--loc { background: var(--ok-bg); color: var(--ok); font-weight: 900; }

/* Groups */
.options { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 26px; }
.option { display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--line); border-radius: 18px; background: #fff; }
.option__img { width: 100%; height: 230px; object-fit: cover; }
.option__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; }
.option__title { margin-bottom: 8px; font-size: 26px; font-weight: 900; color: var(--blue-ink); }
.option__text { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.option__body .btn { margin-top: auto; }
.option__body .facts { margin-bottom: 26px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fact { padding: 8px 16px; border: 2px solid var(--line-3); border-radius: 999px; font-size: 15px; font-weight: 700; }

/* Workshop detail */
.ws-hero { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; }
.ws-detail { display: grid; gap: 28px; margin-top: 30px; }
.ws-detail__intro { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.ws-detail .facts { margin-top: 16px; }
.ws-detail__h2 { margin-top: 26px; font-size: 24px; font-weight: 900; color: var(--blue-ink); }
.ws-detail__list { margin-top: 10px; padding-left: 22px; font-size: 16.5px; line-height: 1.8; color: var(--ink-2); }
.ws-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 26px; }
.ws-gallery img { width: 100%; aspect-ratio: 215 / 120; object-fit: cover; border-radius: 12px; }
.book-box { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 18px; background: var(--soft); }
.book-box__title { font-size: 22px; font-weight: 900; }
.book-box__text { line-height: 1.55; color: var(--ink-2); }
.book-box__rule { width: 100%; height: 2px; margin: 4px 0; border: 0; background: var(--line-3); }
.book-box__note { font-size: 14.5px; color: var(--muted); }
.book-box__gift { line-height: 1.5; }
.book-box .btn { padding: 11px 24px; font-size: 15.5px; }
.book-box .btn--outline { background: transparent; }

/* Booking page. Phone: compact summary above the form. Tablet: summary below. Desktop: side by side. */
.back-link { display: block; width: fit-content; font-size: 15px; font-weight: 700; }
.booking__title { margin-top: 24px; font-size: clamp(30px, 3.2vw, 40px); font-weight: 900; }
.booking__grid { display: grid; gap: 20px; margin-top: 24px; }
/* Phone order from the mockup: steps, summary, form. The left column dissolves into the grid so its parts can be ordered. */
.booking__main { display: contents; }
.booking__main > * { order: 3; min-width: 0; }
.booking__main > .steps { order: 1; }
.steps { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.steps li { padding: 6px 14px; border: 2px solid var(--line-3); border-radius: 999px; font-size: 14.5px; font-weight: 700; color: var(--muted-2); }
.steps li.is-active { padding: 8px 16px; border: 0; background: var(--blue); color: #fff; }
.form-card { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: 400 16px/1.2 Lato, system-ui, sans-serif; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); }
.field textarea { height: 85px; resize: vertical; }
.field select { height: 47px; }
.field-row { display: grid; gap: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; background: #fbe9e7; color: #8a1f1f; font-weight: 700; }
.form-card__intro, .form-card--done { line-height: 1.5; color: var(--ink-2); }
.form-card--done { font-weight: 700; }
.booking__submit { margin-top: 6px; padding: 14px 24px; border: 0; font-size: 16px; }
.summary { order: 2; display: flex; flex-direction: column; padding: 18px; border-radius: 18px; background: var(--soft); }
.summary__eyebrow, .summary__place, .summary__rows > :not(.summary__total), .summary__pay, .summary__note { display: none; }
.summary__title { font-size: 20px; font-weight: 900; }
.summary__when { margin-top: 6px; color: var(--ink-2); }
.summary .badge { align-self: flex-start; margin-top: 10px; }
.summary__rows { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.summary__row { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--ink-2); }
.summary__row strong { font-weight: 700; }
.summary__total { font-size: 18px; font-weight: 900; color: var(--ink); }
.summary__pay { margin-top: 14px; padding: 14px 24px; border: 0; font-size: 16px; }
.summary__note { margin-top: 16px; font-size: 14px; line-height: 1.45; color: var(--muted); }

@media (min-width: 768px) {
	.booking__main { display: block; min-width: 0; }
	.booking__main > .steps { margin-bottom: 22px; }
	.summary { order: 0; padding: 26px; }
	.summary__eyebrow, .summary__place, .summary__rows > :not(.summary__total), .summary__pay, .summary__note { display: revert; }
	.summary__rows > .summary__row { display: flex; }
	.summary__eyebrow { font-size: 14px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
	.summary__title { margin-top: 14px; font-size: 24px; }
	.summary__when { display: flex; flex-direction: column; gap: 7px; margin-top: 17px; }
	.summary__sep { display: none; }
	.summary__place { margin-top: 7px; color: var(--ink-2); }
	.summary .badge { margin-top: 17px; }
	.summary__rows { margin-top: 30px; }
	.summary__total { font-size: 20px; }
	.form-card { padding: 30px; border: 2px solid var(--line); border-radius: 18px; }
	.field-row { grid-template-columns: 1fr 1fr; }
	.booking__submit { display: none; }
}

@media (min-width: 1024px) {
	.booking__grid { grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
}

/* Thank-you page after payment: the workshop block from the plugin above the WooCommerce order overview. */
.ssb-thankyou { margin: 4px 0 22px; padding: 20px 22px; border-radius: 18px; background: var(--soft); }
.ssb-thankyou h2 { margin-bottom: 8px; font-size: 22px; font-weight: 900; line-height: 1.3; color: var(--ink); }
.woocommerce-thankyou-order-received { margin-bottom: 16px; }
/* Order number, date, total, payment as small cards. Same selectors as WooCommerce's own CSS, which loads before ours. */
.woocommerce ul.order_details { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 28px; padding: 0; }
.woocommerce ul.order_details::before, .woocommerce ul.order_details::after { content: none; }
.woocommerce ul.order_details li, .woocommerce ul.order_details li:last-of-type { float: none; margin: 0; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; color: var(--muted-2); }
.woocommerce ul.order_details li strong { margin-top: 4px; font-size: 16px; letter-spacing: 0; color: var(--ink); }

/* Gift voucher page */
.voucher__grid { display: grid; gap: 28px; }
.voucher__intro { display: flex; flex-direction: column; gap: 16px; }
.voucher__intro .page-intro { margin-top: 0; }
.voucher__img { width: 100%; height: 300px; object-fit: cover; border-radius: 18px; }
.voucher__points { margin: 0; padding-left: 22px; font-size: 16.5px; line-height: 1.8; color: var(--ink-2); }
.voucher__form { gap: 18px; }
.voucher__form-title { font-size: 23px; font-weight: 900; }
.choice { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; border: 0; min-width: 0; }
.choice__label { width: 100%; margin-bottom: 10px; padding: 0; font-size: 14.5px; font-weight: 700; color: var(--muted); }
.choice__pill { position: relative; display: inline-flex; align-items: center; padding: 10px 20px; border: 2px solid var(--line-3); border-radius: 999px; background: #fff; color: var(--ink); font-size: 15.5px; font-weight: 700; cursor: pointer; }
.choice__pill input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice__pill:has(input:checked) { border-color: var(--blue); background: var(--blue); color: #fff; }
.choice__pill:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.voucher__address { display: none; }
.voucher__form:has(input[name="delivery"][value="post"]:checked) .voucher__address { display: flex; }
.voucher__submit { padding: 14px 24px; border: 0; font-size: 16px; }
.voucher__note { font-size: 14px; color: var(--muted); }
@media (min-width: 1024px) {
	.voucher__grid { grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
}

/* Quote request page */
.quote-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; margin: 26px 0 0; padding: 0; list-style: none; }
.quote-step { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; border-radius: 16px; background: var(--soft); }
.quote-step__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 17px; font-weight: 900; }
.quote-step__title { font-size: 20px; font-weight: 900; }
.quote-step__text { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.quote-step__link { margin-top: auto; font-size: 15px; font-weight: 700; }
.quote-form { margin-top: 26px; gap: 18px; }
.quote-form__title { font-size: 24px; font-weight: 900; }
.quote-form__loc { padding: 11px 22px; }
.quote-form textarea { height: 104px; }
.quote-grid { display: grid; gap: 16px; }
.quote-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.quote-form__btn { padding: 14px 28px; border: 0; font-size: 16px; }
.quote-form__note { font-size: 15px; color: var(--muted); }
@media (min-width: 768px) {
	.quote-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.quote-grid { grid-template-columns: repeat(4, 1fr); }
	.quote-form { padding: 34px; }
}

/* Homepage (values copied from the mockup's inline styles; its clamp() and auto-fit make it responsive) */
.home-hero { padding-top: 36px; padding-bottom: 8px; }
.home-hero__frame { position: relative; overflow: hidden; border-radius: 18px; background: var(--line-2); }
.home-hero__img { width: 100%; height: clamp(280px, 42vw, 520px); object-fit: cover; }
.home-hero__text { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 4vw, 44px); background: linear-gradient(to top, rgba(20, 14, 12, 0.78), rgba(20, 14, 12, 0.15) 70%, transparent); }
.home-hero__title { max-width: 16em; margin-bottom: 10px; font-size: clamp(30px, 4.4vw, 54px); font-weight: 900; line-height: 1.05; color: #fff; text-wrap: balance; }
.home-hero__lead { max-width: 34em; font-size: clamp(16px, 1.5vw, 21px); color: #fff; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 26px; padding-top: 34px; padding-bottom: 10px; }
.home-card { display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--line); border-radius: 18px; background: #fff; }
.home-card__img { width: 100%; height: 210px; object-fit: cover; }
.home-card__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 26px; }
.home-card__title { font-size: 26px; font-weight: 900; color: var(--blue-ink); }
.home-card__text { flex: 1; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.home-card .btn { align-self: flex-start; padding: 11px 24px; font-size: 15.5px; }
.home-section-title { font-size: 30px; font-weight: 900; }
.home-themes { display: flex; flex-direction: column; gap: 18px; padding-top: 44px; padding-bottom: 10px; }
.home-themes__text { max-width: 44em; font-size: 17px; color: var(--muted); }
.home-themes__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.theme-chip { display: inline-block; padding: 9px 18px; border: 2px solid var(--line-3); border-radius: 999px; color: var(--ink); font-size: 15.5px; font-weight: 700; }
.theme-chip:hover { border-color: var(--blue); color: var(--blue-ink); }
.home-reviews { margin-top: 44px; background: var(--soft); }
.home-reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 26px; align-items: start; padding-top: 40px; padding-bottom: 40px; }
.home-reviews__summary { display: flex; flex-direction: column; gap: 8px; }
.home-reviews__score { display: flex; align-items: baseline; gap: 10px; }
.home-reviews__num { font-size: 40px; font-weight: 900; line-height: 1; }
.home-reviews__count { font-size: 15px; color: var(--muted); }
.home-reviews__summary a { font-size: 15px; font-weight: 700; }
.stars { color: var(--gold); letter-spacing: 2px; }
.home-reviews__score .stars { font-size: 22px; }
.review { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 20px 22px; border-radius: 14px; background: #fff; }
.review .stars { font-size: 15px; }
.review__text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.review__name { font-size: 14px; font-weight: 700; color: var(--muted-2); }
.home-practical { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 26px; padding-top: 44px; padding-bottom: 44px; }
.home-practical__info { display: flex; flex-direction: column; gap: 10px; }
.home-practical__text { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.home-practical__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.home-practical .btn { padding: 11px 22px; font-size: 15.5px; }
.home-map { position: relative; overflow: hidden; min-height: 150px; border: 2px solid var(--line); border-radius: 14px; }
.home-map img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.home-map__link { position: absolute; right: 10px; bottom: 10px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--blue-ink); font-size: 12.5px; font-weight: 700; }

/* Footer */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); font-size: 15.5px; }
.site-footer a { color: var(--footer-ink); }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 26px; padding-top: 38px; padding-bottom: 38px; }
.site-footer__name { font-size: 20px; font-weight: 900; color: #fff; }
.site-footer__title { font-size: 15.5px; font-weight: 900; color: #fff; }
.site-footer p + p { margin-top: 8px; }
.site-footer ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.site-footer .site-footer__social { margin-top: 8px; }
/* Newsletter form, as in the mockup: white pill field and a blue pill button. The Altcha check works unseen. */
.news-form { margin-top: 10px; }
.news-form__row { display: flex; flex-wrap: wrap; gap: 8px; }
.news-form__input { flex: 1; min-width: 140px; padding: 11px 14px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 400 15px Lato, system-ui, sans-serif; }
.news-form__btn { padding: 9px 20px; font-size: 15px; }
.news-form__btn:disabled { opacity: 0.6; cursor: default; }
.news-form__check { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.site-footer .news-form__msg { margin-top: 10px; font-weight: 700; color: #fff; }
.site-footer .news-form__msg.is-error { color: #ffb4a8; }
.site-footer .news-form__privacy { margin-top: 10px; font-size: 13px; line-height: 1.5; }
.news-form__privacy a { text-decoration: underline; }

/* Tablet */
@media (min-width: 768px) {
	.topbar { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding-top: 10px; font-size: 13px; color: var(--muted-2); }
	.topbar a { color: var(--muted-2); }
	.topbar .topbar__contact { color: var(--ink); font-weight: 700; }
	.topbar__lang, .topbar__social { display: inline-flex; gap: 14px; }
	.topbar__social { gap: 4px; }
	.main-nav__lang { display: none; }
	.site-logo img { width: 170px; }
	.header-cta { padding: 12px 22px; font-size: 15px; }
	.header-cta__long { display: inline; }
	.header-cta__short { display: none; }

	.page-wrap { padding-top: 36px; }
	.page-wrap--hero { padding-top: 30px; }
	.label-long { display: inline; }
	.label-short { display: none; }
	.switch__btn { flex: 0 0 auto; padding: 11px 22px; }

	.date-card { display: flex; align-items: center; gap: 18px; padding: 18px 22px; }
	.date-box { width: 98px; padding: 10px 12px; }
	.date-card__info { flex: 1; }
	.date-card__cta { margin-left: auto; }
	.date-card__cta .btn { width: auto; }

	.band { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; }

	.ws-filter__label { width: auto; }
	.ws-filter .switch { flex: 0 0 auto; }
	.ws-filter .switch__btn { padding: 9px 18px; }
	.ws-filter__count { width: auto; margin-left: auto; }
	.ws-grid { grid-template-columns: repeat(2, 1fr); }

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

	.ws-hero { aspect-ratio: 1112 / 400; }

	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Desktop */
@media (min-width: 1024px) {
	.site-header { gap: 22px; padding-bottom: 20px; }
	.site-logo img { width: 230px; }
	.nav-toggle { display: none; }
	.main-nav { display: block; position: static; flex: 1; padding: 0; border: 0; background: none; }
	.main-nav__list { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 22px; row-gap: 10px; }
	.main-nav__list a { padding: 0; font-size: 16.5px; }
	.header-cta { margin-left: 0; }

	.ws-grid { grid-template-columns: repeat(3, 1fr); }

	.ws-detail { grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }

	.site-footer__grid { grid-template-columns: repeat(4, 1fr); }
}