/* Fluent AI website runtime — shared by every theme.
 * Provides: section utilities (padding/background/alignment/height/animation),
 * button variants, and the chrome for runtime views (cart, item modal, checkout,
 * booking, contact form, toasts) plus editor-bridge highlights.
 * All colors come from CSS variables the renderer emits on :root (--ws-*). */

:root {
  --ws-max: 1180px;
  --ws-gutter: clamp(16px, 4vw, 40px);
  --ws-radius-sm: calc(var(--ws-radius) * 0.5);
  --ws-radius-lg: calc(var(--ws-radius) * 1.6);
  --ws-shadow: 0 10px 30px -12px rgb(var(--ws-text-rgb) / 0.25);
  --ws-shadow-lg: 0 30px 60px -24px rgb(var(--ws-text-rgb) / 0.35);
  --ws-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ws-sec-text-scale: 1;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ws-bg);
  color: var(--ws-text);
  font-family: var(--ws-font-body);
  font-size: calc(16px * var(--ws-text-scale));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--ws-font-heading); line-height: 1.1; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 3px; border-radius: 4px; }
.ws-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout primitives ---------- */
.ws-container { width: min(100% - var(--ws-gutter) * 2, var(--ws-max)); margin-inline: auto; }
.ws-section { position: relative; font-size: calc(1em * var(--ws-sec-text-scale)); overflow: clip; }
.ws-section > .ws-container { position: relative; z-index: 1; }

/* Padding scale (× spacing scale) */
.ws-pad-1 { padding-block: calc(clamp(24px, 4vw, 40px) * var(--ws-space-scale)); }
.ws-pad-2 { padding-block: calc(clamp(40px, 6vw, 64px) * var(--ws-space-scale)); }
.ws-pad-3 { padding-block: calc(clamp(56px, 8vw, 96px) * var(--ws-space-scale)); }
.ws-pad-4 { padding-block: calc(clamp(72px, 10vw, 128px) * var(--ws-space-scale)); }
.ws-pad-5 { padding-block: calc(clamp(96px, 13vw, 176px) * var(--ws-space-scale)); }

/* Height */
.ws-h-half { min-height: 55vh; display: flex; align-items: center; }
.ws-h-screen { min-height: 100svh; display: flex; align-items: center; }
.ws-h-half > .ws-container, .ws-h-screen > .ws-container { width: min(100% - var(--ws-gutter) * 2, var(--ws-max)); }

/* Alignment */
.ws-align-center { text-align: center; }
.ws-align-center .ws-lead, .ws-align-center .ws-eyebrow, .ws-align-center .ws-actions { margin-inline: auto; justify-content: center; }
.ws-align-start { text-align: start; }

/* Backgrounds */
.ws-bg-default { background: var(--ws-sec-bg, transparent); color: var(--ws-sec-text, inherit); }
.ws-bg-surface { background: var(--ws-sec-bg, var(--ws-surface)); color: var(--ws-sec-text, inherit); }
.ws-bg-primary { background: var(--ws-sec-bg, var(--ws-primary)); color: var(--ws-sec-text, var(--ws-on-primary)); }
.ws-bg-dark { background: var(--ws-sec-bg, #0b1020); color: var(--ws-sec-text, #f8fafc); }
.ws-bg-gradient {
  background: var(--ws-sec-bg, linear-gradient(135deg, var(--ws-primary) 0%, var(--ws-primary-dark) 55%, var(--ws-secondary) 130%));
  color: var(--ws-sec-text, var(--ws-on-primary));
}
.ws-bg-image { background: var(--ws-sec-image) center / cover no-repeat; color: var(--ws-sec-text, #fff); }
.ws-bg-image::before { content: ''; position: absolute; inset: 0; background: rgb(8 10 20 / var(--ws-sec-overlay, 0.55)); }
.ws-bg-primary, .ws-bg-dark, .ws-bg-gradient, .ws-bg-image { --ws-muted-local: rgb(255 255 255 / 0.72); }
.ws-bg-primary .ws-muted, .ws-bg-dark .ws-muted, .ws-bg-gradient .ws-muted, .ws-bg-image .ws-muted { color: var(--ws-muted-local); }
.ws-section[style*="--ws-sec-accent"] { --ws-accent: var(--ws-sec-accent); --ws-primary: var(--ws-sec-accent); }

/* ---------- Type helpers ---------- */
.ws-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ws-accent); margin-bottom: 14px; }
.ws-eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.ws-align-center .ws-eyebrow::before { display: none; }
.ws-title { font-size: clamp(1.9em, 3.6vw, 2.9em); font-weight: 700; }
.ws-title-xl { font-size: clamp(2.4em, 5.4vw, 4.4em); font-weight: 800; line-height: 1.02; }
.ws-lead { font-size: clamp(1.02em, 1.4vw, 1.2em); color: var(--ws-muted); max-width: 62ch; margin-top: 16px; }
.ws-muted { color: var(--ws-muted); }
.ws-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 52px); }

/* ---------- Buttons ---------- */
.ws-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ws-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0.85em 1.5em; border-radius: var(--ws-radius); font-weight: 600; font-size: 0.98em;
  border: 1.5px solid transparent; transition: transform 0.2s var(--ws-ease), box-shadow 0.2s, background 0.2s, color 0.2s;
  white-space: nowrap; line-height: 1.2;
}
/* Long AI-written labels ("Book a free in-home assessment") must wrap inside the card on phones, not push it wider. */
@media (max-width: 560px) { .ws-btn { white-space: normal; max-width: 100%; text-align: center; } }
.ws-btn:hover { transform: translateY(-1px); }
.ws-btn:active { transform: translateY(0); }
.ws-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.ws-btn-primary { background: var(--ws-primary); color: var(--ws-on-primary); box-shadow: 0 10px 24px -10px rgb(var(--ws-primary-rgb) / 0.7); }
.ws-btn-primary:hover { background: var(--ws-primary-dark); }
.ws-btn-secondary { background: rgb(var(--ws-text-rgb) / 0.06); color: inherit; border-color: rgb(var(--ws-text-rgb) / 0.12); }
.ws-btn-secondary:hover { background: rgb(var(--ws-text-rgb) / 0.1); }
.ws-btn-ghost { color: inherit; border-color: rgb(var(--ws-text-rgb) / 0.2); }
.ws-btn-ghost:hover { background: rgb(var(--ws-text-rgb) / 0.06); }
.ws-btn-light { background: #fff; color: var(--ws-primary-dark); }
.ws-btn-sm { padding: 0.55em 1em; font-size: 0.9em; }
.ws-btn-block { width: 100%; }
/* Global button style variants (set by the renderer as ws-btn-<style> on each section) */
.ws-btn-pill .ws-btn { border-radius: 999px; }
.ws-btn-outline .ws-btn-primary { background: transparent; color: var(--ws-primary); border-color: var(--ws-primary); box-shadow: none; }
.ws-btn-outline .ws-btn-primary:hover { background: var(--ws-primary); color: var(--ws-on-primary); }
.ws-btn-soft .ws-btn-primary { background: rgb(var(--ws-primary-rgb) / 0.14); color: var(--ws-primary-dark); box-shadow: none; }
.ws-btn-soft .ws-btn-primary:hover { background: rgb(var(--ws-primary-rgb) / 0.22); }
.ws-bg-primary .ws-btn-primary, .ws-bg-gradient .ws-btn-primary { background: #fff; color: var(--ws-primary-dark); box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.4); }
.ws-bg-primary .ws-btn-ghost, .ws-bg-gradient .ws-btn-ghost, .ws-bg-dark .ws-btn-ghost, .ws-bg-image .ws-btn-ghost { border-color: rgb(255 255 255 / 0.4); color: #fff; }

/* ---------- Cards & grids ---------- */
.ws-grid { display: grid; gap: clamp(16px, 2.2vw, 28px); }
.ws-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.ws-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ws-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.ws-card {
  background: var(--ws-surface); color: var(--ws-text); border-radius: var(--ws-radius-lg);
  border: 1px solid rgb(var(--ws-text-rgb) / 0.08); box-shadow: var(--ws-shadow);
  transition: transform 0.3s var(--ws-ease), box-shadow 0.3s var(--ws-ease);
}
.ws-card:hover { transform: translateY(-4px); box-shadow: var(--ws-shadow-lg); }
.ws-bg-primary .ws-card, .ws-bg-dark .ws-card, .ws-bg-gradient .ws-card, .ws-bg-image .ws-card { background: rgb(255 255 255 / 0.1); color: #fff; border-color: rgb(255 255 255 / 0.18); backdrop-filter: blur(10px); }
.ws-icon { flex-shrink: 0; }
.ws-icon-badge { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--ws-radius); background: rgb(var(--ws-primary-rgb) / 0.12); color: var(--ws-primary); }
.ws-bg-primary .ws-icon-badge, .ws-bg-gradient .ws-icon-badge, .ws-bg-dark .ws-icon-badge, .ws-bg-image .ws-icon-badge { background: rgb(255 255 255 / 0.16); color: #fff; }
.ws-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.78em; font-weight: 600; background: rgb(var(--ws-accent-rgb) / 0.14); color: var(--ws-accent); }
.ws-stars { display: inline-flex; gap: 2px; color: var(--ws-accent); }
.ws-media { position: relative; overflow: hidden; border-radius: var(--ws-radius-lg); background: rgb(var(--ws-text-rgb) / 0.06); }
.ws-media img { width: 100%; height: 100%; object-fit: cover; }
.ws-media-ph { display: grid; place-items: center; aspect-ratio: 4 / 3; color: var(--ws-muted); background: linear-gradient(135deg, rgb(var(--ws-primary-rgb) / 0.12), rgb(var(--ws-secondary-rgb) / 0.12)); font-family: var(--ws-font-heading); font-size: 2em; font-weight: 700; }

/* ---------- Animations ---------- */
.ws-anim [data-ws-reveal], .ws-anim.ws-reveal-self { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ws-ease), transform 0.7s var(--ws-ease); }
.ws-anim[data-ws-anim="fade-in"] [data-ws-reveal], .ws-anim[data-ws-anim="fade-in"].ws-reveal-self { transform: none; }
.ws-anim[data-ws-anim="slide-in"] [data-ws-reveal], .ws-anim[data-ws-anim="slide-in"].ws-reveal-self { transform: translateX(-32px); }
[dir="rtl"] .ws-anim[data-ws-anim="slide-in"] [data-ws-reveal], [dir="rtl"] .ws-anim[data-ws-anim="slide-in"].ws-reveal-self { transform: translateX(32px); }
.ws-anim[data-ws-anim="zoom-in"] [data-ws-reveal], .ws-anim[data-ws-anim="zoom-in"].ws-reveal-self { transform: scale(0.94); }
.ws-anim.ws-in [data-ws-reveal], .ws-anim.ws-in.ws-reveal-self { opacity: 1; transform: none; }
.ws-anim.ws-in [data-ws-reveal]:nth-child(2) { transition-delay: 0.08s; }
.ws-anim.ws-in [data-ws-reveal]:nth-child(3) { transition-delay: 0.16s; }
.ws-anim.ws-in [data-ws-reveal]:nth-child(4) { transition-delay: 0.24s; }
.ws-anim.ws-in [data-ws-reveal]:nth-child(5) { transition-delay: 0.32s; }
.ws-anim.ws-in [data-ws-reveal]:nth-child(6) { transition-delay: 0.4s; }
.ws-anim.ws-in [data-ws-reveal]:nth-child(n + 7) { transition-delay: 0.46s; }
/* Site-wide motion presets: the renderer puts ws-motion-<preset> (+ ws-parallax) on <body>. */
body.ws-motion-fade .ws-anim [data-ws-reveal], body.ws-motion-fade .ws-anim.ws-reveal-self { transition-duration: 1s; }
body.ws-motion-slide .ws-anim:not(.ws-in) [data-ws-reveal]:nth-child(even) { transform: translateX(32px); }
[dir="rtl"] body.ws-motion-slide .ws-anim:not(.ws-in) [data-ws-reveal]:nth-child(even) { transform: translateX(-32px); }
body.ws-motion-zoom .ws-anim [data-ws-reveal], body.ws-motion-zoom .ws-anim.ws-reveal-self { transition-duration: 0.8s; }
body.ws-motion-cinematic .ws-anim [data-ws-reveal], body.ws-motion-cinematic .ws-anim.ws-reveal-self { transition-duration: 1.15s; transition-property: opacity, transform, filter; }
body.ws-motion-cinematic .ws-anim:not(.ws-in) [data-ws-reveal], body.ws-motion-cinematic .ws-anim:not(.ws-in).ws-reveal-self { transform: translateY(30px) scale(0.96); filter: blur(10px); }
body.ws-motion-cinematic .ws-anim.ws-in [data-ws-reveal]:nth-child(2) { transition-delay: 0.14s; }
body.ws-motion-cinematic .ws-anim.ws-in [data-ws-reveal]:nth-child(3) { transition-delay: 0.28s; }
body.ws-motion-cinematic .ws-anim.ws-in [data-ws-reveal]:nth-child(n + 4) { transition-delay: 0.4s; }
/* Parallax: core.js writes --ws-py on [data-ws-parallax] hooks; `translate` composes with any transform the theme or the reveal uses. */
body.ws-parallax [data-ws-parallax] { translate: 0 var(--ws-py, 0px); will-change: translate; }
/* Fixed backgrounds repaint on every scroll frame: desktop pointers only (mobile ignores it anyway). */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  body.ws-parallax .ws-bg-image { background-attachment: fixed; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-anim [data-ws-reveal], .ws-anim.ws-reveal-self { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  body.ws-parallax [data-ws-parallax] { translate: none; }
  body.ws-parallax .ws-bg-image { background-attachment: scroll; }
  html { scroll-behavior: auto; }
}
@keyframes ws-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ws-spin { to { transform: rotate(360deg); } }
@keyframes ws-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Header helpers ---------- */
body { overflow-x: clip; }
.ws-header { position: sticky; top: 0; z-index: 40; transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s; }
body.ws-scrolled .ws-header { box-shadow: 0 6px 24px -14px rgb(0 0 0 / 0.35); }
.ws-nav-toggle { display: none; }
/* !important on purpose: theme stylesheets load after this file and commonly set
   display:flex on the same nav element; the collapse must always win on phones. */
@media (max-width: 860px) {
  .ws-nav-toggle { display: inline-grid !important; place-items: center; width: 42px; height: 42px; border-radius: var(--ws-radius); }
  body:not(.ws-nav-open) .ws-nav-links { display: none !important; }
  body.ws-nav-open .ws-nav-links { display: flex !important; flex-direction: column; position: absolute; inset-inline: 0; top: 100%; padding: 18px var(--ws-gutter) 24px; background: var(--ws-surface); color: var(--ws-text); border-bottom: 1px solid rgb(var(--ws-text-rgb) / 0.08); box-shadow: var(--ws-shadow-lg); gap: 6px; animation: ws-pop 0.25s var(--ws-ease); }
  body.ws-nav-open .ws-nav-links a { padding: 10px 6px; font-size: 1.05em; }
  .ws-header > .ws-container, .ws-header > div { position: relative; }
}
.ws-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ws-font-heading); font-weight: 700; font-size: 1.15em; letter-spacing: -0.01em; }
.ws-logo img { height: 40px; width: auto; max-width: 160px; object-fit: contain; }
.ws-logo-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ws-radius); background: var(--ws-primary); color: var(--ws-on-primary); font-size: 0.9em; font-weight: 800; }

/* ---------- Pages: nav state, inner-page intro, catalog teaser ---------- */
.ws-nav-links a { position: relative; }
.ws-nav-links a.ws-active { color: var(--ws-primary); }
.ws-nav-links a.ws-active::after { content: ''; position: absolute; inset-inline: 0; bottom: -6px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.9; }
@media (max-width: 860px) { .ws-nav-links a.ws-active::after { display: none; } }
/* Compact title band a theme shows on inner pages that do not start with a hero/page header. */
.ws-page-intro { position: relative; padding-block: calc(clamp(40px, 6vw, 72px) * var(--ws-space-scale)) calc(clamp(24px, 4vw, 44px) * var(--ws-space-scale)); background: var(--ws-surface); overflow: clip; }
.ws-page-intro h1 { font-size: clamp(1.9em, 3.6vw, 3em); font-weight: 800; }
.ws-page-intro .ws-lead { margin-top: 10px; }
.ws-breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82em; color: var(--ws-muted); margin-bottom: 14px; }
.ws-breadcrumb a:hover { color: var(--ws-primary); }
.ws-breadcrumb .ws-icon { opacity: 0.6; }
[dir="rtl"] .ws-breadcrumb .ws-icon { transform: scaleX(-1); }
/* "View all" under a catalog teaser */
.ws-viewall { display: flex; justify-content: center; margin-top: clamp(24px, 4vw, 40px); }
.ws-page-header { position: relative; overflow: clip; }
.ws-page-header .ws-title-xl { font-size: clamp(2em, 4.4vw, 3.6em); }

/* ---------- Catalog cards (shared behaviour hooks; themes restyle freely) ---------- */
.ws-item-card { display: flex; flex-direction: column; overflow: hidden; }
.ws-item-media { aspect-ratio: 4 / 3; cursor: pointer; }
.ws-item-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ws-item-title { font-size: 1.12em; font-weight: 700; font-family: var(--ws-font-heading); letter-spacing: -0.01em; }
.ws-item-desc { color: var(--ws-muted); font-size: 0.93em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.ws-price { font-weight: 700; font-size: 1.05em; }
.ws-item-actions { display: flex; gap: 8px; }
.ws-item-card.ws-oos .ws-item-media { filter: grayscale(0.7); opacity: 0.75; }

/* ---------- Runtime chrome: overlay, drawer, modal ---------- */
#ws-runtime { position: relative; z-index: 60; font-family: var(--ws-font-body); color: var(--ws-text); font-size: calc(16px * var(--ws-text-scale)); }
.ws-overlay { position: fixed; inset: 0; background: rgb(8 10 20 / 0.55); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.25s; z-index: 60; }
.ws-overlay.ws-open { opacity: 1; }
.ws-drawer {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(440px, 100%); background: var(--ws-surface); color: var(--ws-text);
  box-shadow: var(--ws-shadow-lg); transform: translateX(100%); transition: transform 0.35s var(--ws-ease); z-index: 61; display: flex; flex-direction: column;
}
[dir="rtl"] .ws-drawer { transform: translateX(-100%); }
.ws-drawer.ws-open { transform: none !important; }
.ws-modal-wrap { position: fixed; inset: 0; z-index: 61; display: grid; place-items: center; padding: 16px; overflow: auto; }
.ws-modal { width: min(880px, 100%); max-height: calc(100svh - 32px); overflow: auto; background: var(--ws-surface); color: var(--ws-text); border-radius: var(--ws-radius-lg); box-shadow: var(--ws-shadow-lg); animation: ws-pop 0.3s var(--ws-ease); position: relative; }
.ws-modal-sm { width: min(560px, 100%); }
.ws-close { position: absolute; top: 12px; inset-inline-end: 12px; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: rgb(var(--ws-text-rgb) / 0.06); z-index: 2; }
.ws-close:hover { background: rgb(var(--ws-text-rgb) / 0.12); }
.ws-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid rgb(var(--ws-text-rgb) / 0.08); }
.ws-panel-head h3 { font-size: 1.2em; }
.ws-panel-body { padding: 20px 22px; overflow: auto; flex: 1; }
.ws-panel-foot { padding: 16px 22px 22px; border-top: 1px solid rgb(var(--ws-text-rgb) / 0.08); display: grid; gap: 10px; }
.ws-empty { text-align: center; padding: 48px 20px; color: var(--ws-muted); display: grid; gap: 14px; justify-items: center; }
.ws-empty .ws-icon { width: 44px; height: 44px; opacity: 0.6; }

/* Cart lines */
.ws-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgb(var(--ws-text-rgb) / 0.06); }
.ws-line .ws-media { width: 64px; height: 64px; border-radius: var(--ws-radius); }
.ws-line .ws-media-ph { aspect-ratio: 1; font-size: 1em; }
.ws-line-title { font-weight: 600; font-size: 0.95em; }
.ws-line-price { color: var(--ws-muted); font-size: 0.88em; }
.ws-qty { display: inline-flex; align-items: center; border: 1px solid rgb(var(--ws-text-rgb) / 0.14); border-radius: 999px; overflow: hidden; }
.ws-qty button { width: 32px; height: 32px; display: grid; place-items: center; }
.ws-qty button:hover { background: rgb(var(--ws-text-rgb) / 0.06); }
.ws-qty span { min-width: 28px; text-align: center; font-weight: 600; font-size: 0.95em; }
.ws-remove { color: var(--ws-muted); font-size: 0.82em; text-decoration: underline; margin-top: 4px; }
.ws-totals { display: grid; gap: 6px; font-size: 0.95em; }
.ws-totals div { display: flex; justify-content: space-between; gap: 12px; }
.ws-totals .ws-total { font-weight: 800; font-size: 1.15em; padding-top: 8px; border-top: 1px solid rgb(var(--ws-text-rgb) / 0.1); margin-top: 4px; }

/* Cart FAB */
.ws-cart-fab {
  position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 50; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px; border-radius: 999px; background: var(--ws-primary); color: var(--ws-on-primary); font-weight: 700;
  box-shadow: 0 16px 32px -12px rgb(var(--ws-primary-rgb) / 0.7); transition: transform 0.25s var(--ws-ease), opacity 0.25s; animation: ws-pop 0.3s var(--ws-ease);
}
.ws-cart-fab:hover { transform: translateY(-2px); }
.ws-cart-fab[hidden] { display: none; }
.ws-cart-fab .ws-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: #fff; color: var(--ws-primary-dark); font-size: 0.8em; }
body.ws-has-widget .ws-cart-fab { bottom: 96px; }

/* Item modal */
.ws-item-modal { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .ws-item-modal { grid-template-columns: 1fr; } }
.ws-gallery { background: rgb(var(--ws-text-rgb) / 0.04); display: flex; flex-direction: column; }
.ws-gallery-main { aspect-ratio: 1; }
.ws-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.ws-thumbs { display: flex; gap: 8px; padding: 12px; overflow-x: auto; }
.ws-thumbs button { width: 60px; height: 60px; border-radius: var(--ws-radius-sm); overflow: hidden; border: 2px solid transparent; flex-shrink: 0; }
.ws-thumbs button.ws-active { border-color: var(--ws-primary); }
.ws-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.ws-item-detail { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.ws-item-detail h3 { font-size: 1.7em; }
.ws-item-detail .ws-price { font-size: 1.35em; color: var(--ws-primary); }
.ws-item-detail .ws-desc { color: var(--ws-muted); white-space: pre-line; }
.ws-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; }

/* Forms */
.ws-form { display: grid; gap: 14px; }
.ws-form-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.ws-field { display: grid; gap: 6px; align-content: start; }
.ws-field label { font-size: 0.86em; font-weight: 600; color: var(--ws-muted); }
.ws-field label small { font-weight: 400; opacity: 0.8; }
.ws-input, .ws-field input:not([type="radio"]):not([type="checkbox"]), .ws-field select, .ws-field textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--ws-radius); border: 1.5px solid rgb(var(--ws-text-rgb) / 0.14); background: var(--ws-bg); color: var(--ws-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ws-field input:not([type="radio"]):not([type="checkbox"]):focus, .ws-field select:focus, .ws-field textarea:focus, .ws-input:focus { outline: none; border-color: var(--ws-primary); box-shadow: 0 0 0 4px rgb(var(--ws-primary-rgb) / 0.15); }
.ws-field textarea { min-height: 96px; resize: vertical; }
/* Password show / hide (core.js addPasswordToggle): the button sits inside the field at the inline end (RTL-aware). */
.ws-pw { position: relative; display: block; min-width: 0; }
.ws-field .ws-pw input:not([type="radio"]):not([type="checkbox"]), .ws-pw .ws-input { padding-inline-end: 48px; }
.ws-pw input::-ms-reveal, .ws-pw input::-ms-clear { display: none; }
.ws-pw-toggle { position: absolute; inset-block: 0; inset-inline-end: 5px; margin-block: auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--ws-radius-sm); color: var(--ws-muted); background: transparent; transition: color 0.15s, background-color 0.15s; }
.ws-pw-toggle:hover { color: var(--ws-text); background: rgb(var(--ws-text-rgb) / 0.07); }
.ws-pw-toggle:focus-visible { outline: 2px solid var(--ws-primary); outline-offset: 0; }
.ws-pw-toggle[aria-pressed="true"] { color: var(--ws-primary); }
.ws-pw-toggle .ws-icon { pointer-events: none; }
/* Validation (core.js): .ws-invalid on the .ws-field, aria-invalid on the control, the message in .ws-field-error.
   !important on the border only: theme input styles load later and must not hide the error state. */
.ws-field.ws-invalid input, .ws-field.ws-invalid textarea, .ws-field.ws-invalid select, form [aria-invalid="true"] { border-color: var(--ws-danger, #e11d48) !important; }
.ws-field.ws-invalid input:focus, .ws-field.ws-invalid textarea:focus, .ws-field.ws-invalid select:focus, form [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgb(225 29 72 / 0.16); }
.ws-field.ws-invalid label { color: var(--ws-danger, #e11d48); }
.ws-field-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--ws-danger, #e11d48); font-size: 0.84em; font-weight: 500; line-height: 1.4; text-align: start; animation: ws-field-error-in 0.22s var(--ws-ease); }
.ws-field-error[hidden] { display: none; }
.ws-field-error::before { content: ''; flex: none; width: 15px; height: 15px; margin-top: 0.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e11d48' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes ws-field-error-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.ws-field-meta { display: flex; align-items: flex-start; justify-content: flex-end; gap: 12px; }
.ws-field-meta .ws-field-error { flex: 1; }
.ws-char-count { direction: ltr; unicode-bidi: isolate; font-size: 0.78em; line-height: 1.6; color: var(--ws-muted); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color 0.2s; }
/* Invisible (space kept, no layout jump) until the visitor starts typing. */
.ws-char-count.ws-empty { opacity: 0; display: inline; padding: 0; text-align: inherit; } /* .ws-empty is also the empty-state block class — keep the counter a one-line inline label */
.ws-char-count.ws-near { color: #d97706; font-weight: 600; }
.ws-char-count.ws-full { color: var(--ws-danger, #e11d48); font-weight: 600; }
.ws-bg-primary .ws-field-error, .ws-bg-dark .ws-field-error, .ws-bg-gradient .ws-field-error, .ws-bg-image .ws-field-error,
.ws-bg-primary .ws-field.ws-invalid label, .ws-bg-dark .ws-field.ws-invalid label, .ws-bg-gradient .ws-field.ws-invalid label, .ws-bg-image .ws-field.ws-invalid label { color: #fda4af; }
.ws-bg-primary .ws-char-count, .ws-bg-dark .ws-char-count, .ws-bg-gradient .ws-char-count, .ws-bg-image .ws-char-count { color: var(--ws-muted-local); }
.ws-bg-primary .ws-field-error::before, .ws-bg-dark .ws-field-error::before, .ws-bg-gradient .ws-field-error::before, .ws-bg-image .ws-field-error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fda4af' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E"); }
.ws-choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.ws-choice { display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-align: start; padding: 12px 14px; border-radius: var(--ws-radius); border: 1.5px solid rgb(var(--ws-text-rgb) / 0.14); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.ws-choice:has(input:checked) { border-color: var(--ws-primary); background: rgb(var(--ws-primary-rgb) / 0.08); }
.ws-choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ws-primary); }
.ws-choice > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ws-error { color: #e11d48; font-size: 0.9em; padding: 10px 12px; border-radius: var(--ws-radius); background: rgb(225 29 72 / 0.08); }
.ws-bg-primary .ws-error, .ws-bg-dark .ws-error, .ws-bg-gradient .ws-error, .ws-bg-image .ws-error { color: #fff; background: rgb(225 29 72 / 0.35); }
[data-ws-status]:empty { display: none; }
:not(.ws-form) > [data-ws-status]:not(:empty) { margin-top: 12px; }
.ws-success { color: #047857; font-size: 0.95em; padding: 12px 14px; border-radius: var(--ws-radius); background: rgb(16 185 129 / 0.1); }
.ws-bg-primary .ws-success, .ws-bg-dark .ws-success, .ws-bg-gradient .ws-success { color: #fff; background: rgb(255 255 255 / 0.15); }
.ws-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.4); border-top-color: currentColor; animation: ws-spin 0.7s linear infinite; }

/* Booking */
.ws-steps { display: flex; gap: 8px; align-items: center; font-size: 0.85em; color: var(--ws-muted); margin-bottom: 6px; }
.ws-steps b { color: var(--ws-primary); }
.ws-week { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ws-week button { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; border: 1px solid rgb(var(--ws-text-rgb) / 0.14); }
.ws-week button:hover { background: rgb(var(--ws-text-rgb) / 0.06); }
.ws-week strong { font-size: 0.95em; }
.ws-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ws-day { display: grid; gap: 2px; justify-items: center; padding: 10px 4px; border-radius: var(--ws-radius); border: 1.5px solid rgb(var(--ws-text-rgb) / 0.1); cursor: pointer; font-size: 0.82em; transition: border-color 0.2s, background 0.2s; }
.ws-day small { color: var(--ws-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72em; }
.ws-day b { font-size: 1.25em; font-family: var(--ws-font-heading); }
.ws-day:disabled { opacity: 0.35; cursor: not-allowed; }
.ws-day.ws-active { border-color: var(--ws-primary); background: rgb(var(--ws-primary-rgb) / 0.1); }
.ws-day .ws-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ws-accent); }
.ws-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 14px; }
.ws-time { padding: 10px 8px; border-radius: var(--ws-radius); border: 1.5px solid rgb(var(--ws-text-rgb) / 0.12); text-align: center; font-weight: 600; font-size: 0.92em; transition: border-color 0.2s, background 0.2s; }
.ws-time:hover { border-color: var(--ws-primary); }
.ws-time.ws-active { background: var(--ws-primary); color: var(--ws-on-primary); border-color: var(--ws-primary); }
.ws-summary { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--ws-radius); background: rgb(var(--ws-primary-rgb) / 0.08); font-size: 0.95em; }
.ws-summary b { font-family: var(--ws-font-heading); font-size: 1.05em; }

/* Confirmation */
.ws-confirm { text-align: center; padding: 36px 28px; display: grid; gap: 12px; justify-items: center; }
.ws-confirm .ws-check { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgb(16 185 129 / 0.14); color: #059669; animation: ws-pop 0.4s var(--ws-ease); }
.ws-confirm h3 { font-size: 1.6em; }
.ws-confirm .ws-wa-link { gap: 8px; color: #128c7e; border-color: rgb(37 211 102 / 0.55); }
.ws-confirm .ws-wa-link:hover { background: rgb(37 211 102 / 0.1); }
.ws-confirm .ws-code { font-family: var(--ws-font-heading); font-size: 1.3em; font-weight: 800; letter-spacing: 0.05em; padding: 8px 16px; border-radius: var(--ws-radius); background: rgb(var(--ws-text-rgb) / 0.06); }

/* Toast */
/* Toasts never intercept taps and sit below drawers/modals, so a fresh "Added"
   toast can't cover the checkout button on a phone. */
.ws-toast-wrap { position: fixed; inset-inline: 0; bottom: 22px; display: grid; justify-items: center; pointer-events: none; z-index: 55; gap: 8px; }
.ws-toast { pointer-events: none; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: var(--ws-text); color: var(--ws-bg); font-weight: 600; font-size: 0.93em; box-shadow: var(--ws-shadow-lg); animation: ws-pop 0.3s var(--ws-ease); }
@media (max-width: 500px) { .ws-toast-wrap { bottom: auto; top: 14px; } }
.ws-toast.ws-toast-error { background: #e11d48; color: #fff; }

/* Contact form (in-theme) */
.ws-contact-form .ws-form { gap: 12px; }

/* ---------- Editor bridge (preview only) ---------- */
body.ws-bridge .ws-section { cursor: pointer; }
/* A gallery with no photos at all (none uploaded, no catalog photos to fall back on) is not published as an
   empty heading band. In the editor it stays visible so it can still be selected and filled. */
body:not(.ws-bridge) .ws-section.ws-gallery:not(:has(img)) { display: none !important; } /* themes give galleries their own display */
body.ws-bridge .ws-section.ws-bridge-hover { outline: 2px dashed rgb(20 184 166 / 0.8); outline-offset: -2px; }
body.ws-bridge .ws-section.ws-bridge-selected { outline: 2px solid #14b8a6; outline-offset: -2px; }
body.ws-bridge .ws-section.ws-bridge-selected::after, body.ws-bridge .ws-section.ws-bridge-hover::after {
  content: attr(data-ws-label); position: absolute; top: 10px; inset-inline-start: 10px; z-index: 5; padding: 4px 10px; border-radius: 999px;
  background: #14b8a6; color: #fff; font: 600 12px/1.4 system-ui, sans-serif; letter-spacing: 0.02em; pointer-events: none;
}
body.ws-bridge:not(.ws-replay) .ws-anim [data-ws-reveal], body.ws-bridge:not(.ws-replay) .ws-anim.ws-reveal-self { opacity: 1; transform: none; filter: none; }
/* Replay (core.js replayReveal): hide instantly, then transition in from the preset's start state. */
body.ws-replay-reset .ws-anim [data-ws-reveal], body.ws-replay-reset .ws-anim.ws-reveal-self { transition: none !important; }
body.ws-bridge .ws-cart-fab { bottom: 22px; }

/* ---------- Language switcher (bilingual sites; themes print it only when {{#if i18n}}) ----------
   .ws-lang-header sits in the header actions on desktop, .ws-lang-menu inside the mobile menu
   (.ws-nav-links), .ws-lang-footer in the footer's bottom row. The label is the OTHER language
   in its own script ("العربية" / "English"); the label <span> carries lang/dir so it shapes correctly
   while the link itself follows the page direction (menu items stay aligned). */
.ws-lang { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; color: inherit; font-weight: 600; line-height: 1.1; }
.ws-lang .ws-icon { flex: none; opacity: 0.85; }
.ws-lang span[lang="ar"] { font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; }
.ws-lang-header { height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgb(var(--ws-text-rgb) / 0.12); background: rgb(var(--ws-text-rgb) / 0.04); font-size: 0.88em; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.ws-lang-header:hover { background: rgb(var(--ws-text-rgb) / 0.08); border-color: rgb(var(--ws-primary-rgb) / 0.4); }
.ws-lang-menu { display: none; }
.ws-lang-footer { margin-inline-start: auto; opacity: 0.8; font-size: 0.95em; }
.ws-lang-footer:hover { opacity: 1; }
@media (max-width: 860px) {
  .ws-lang-header { display: none !important; }
  body.ws-nav-open .ws-nav-links a.ws-lang-menu { display: flex; gap: 10px; }
}
@media (min-width: 861px) { .ws-lang-menu { display: none !important; } }
/* A bilingual page can show untranslated text (it falls back to the authored language): let each
   text block take its direction from its own first letters, so an English sentence on an Arabic
   page keeps its full stop at the end (and the reverse). */
body.ws-i18n [data-ws-field] { unicode-bidi: plaintext; }

/* ---------- Contact bar (every theme prints it above the header when the site has contact data) ----------
   Static, server-rendered and above the sticky header, so it scrolls away with the page and never shifts
   anything. Themes add their own class for colour; layout, collapse and tap targets live here.
   Phones keep the phone number and turn the email into an icon (the address stays readable to screen
   readers through .ws-topbar-label), hours hide ≤ 900 px, the address ≤ 1100 px. */
.ws-topbar { position: relative; z-index: 41; font-size: 0.8em; line-height: 1.2; }
.ws-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; min-height: 40px; }
.ws-topbar-start { display: flex; align-items: center; gap: 4px 22px; min-width: 0; flex: 1 1 auto; }
.ws-topbar-end { display: flex; align-items: center; gap: 2px; flex: none; }
.ws-topbar-item { display: inline-flex; align-items: center; gap: 7px; min-width: 0; min-height: 32px; white-space: nowrap; color: inherit; text-decoration: none; }
.ws-topbar-item .ws-icon { flex: none; }
.ws-topbar-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ws-topbar-addr { flex: 0 1 auto; }
.ws-topbar-social a { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; color: inherit; transition: background 0.2s, color 0.2s; }
@media (max-width: 1100px) { .ws-topbar-addr { display: none !important; } }
@media (max-width: 900px) { .ws-topbar-hours { display: none !important; } }
@media (max-width: 640px) {
  .ws-topbar-inner { min-height: 38px; gap: 8px 12px; }
  .ws-topbar-start { gap: 2px 10px; }
  .ws-topbar-email { width: 36px; justify-content: center; }
  .ws-topbar-email .ws-topbar-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ws-topbar-social a:nth-child(n + 4) { display: none; }
}
@media (pointer: coarse), (max-width: 640px) {
  .ws-topbar-item, .ws-topbar-social a { min-height: 38px; min-width: 36px; }
  .ws-topbar-social a { width: 36px; height: 38px; }
}

/* ---------- Footer helpers ---------- */
.ws-powered { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82em; opacity: 0.7; }
.ws-powered:hover { opacity: 1; }
.ws-socials { display: flex; gap: 8px; }
.ws-socials a { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; background: rgb(var(--ws-text-rgb) / 0.06); transition: background 0.2s, color 0.2s; }
.ws-socials a:hover { background: var(--ws-primary); color: var(--ws-on-primary); }

/* Details/accordion (FAQ) */
.ws-faq details { border-bottom: 1px solid rgb(var(--ws-text-rgb) / 0.1); }
.ws-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 1.05em; }
.ws-faq summary::-webkit-details-marker { display: none; }
.ws-faq summary .ws-icon { transition: transform 0.3s var(--ws-ease); color: var(--ws-primary); }
.ws-faq details[open] summary .ws-icon { transform: rotate(45deg); }
.ws-faq details > div { padding: 0 0 18px; color: var(--ws-muted); max-width: 70ch; }

/* ---------- Visitor account (header button + modals) ---------- */
.ws-account-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid rgb(var(--ws-text-rgb) / 0.12); background: rgb(var(--ws-text-rgb) / 0.04); color: inherit; font: inherit; font-size: 0.88em; font-weight: 600; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.ws-account-btn:hover { background: rgb(var(--ws-text-rgb) / 0.08); }
.ws-account-name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-account-name[hidden] { display: none; }
body.ws-signed-in .ws-account-btn { border-color: rgb(var(--ws-primary-rgb) / 0.45); color: var(--ws-primary); }
.ws-auth-switch { font-size: 0.9em; text-align: center; margin: 2px 0 0; }
.ws-link { background: none; border: 0; padding: 0; color: var(--ws-primary); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ws-account-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ws-account-avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; background: rgb(var(--ws-primary-rgb) / 0.14); color: var(--ws-primary); font-weight: 800; font-family: var(--ws-font-heading); flex: none; }
.ws-account-title { font-size: 1em; font-weight: 700; margin: 6px 0 10px; }
.ws-account-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ws-account-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--ws-radius); border: 1px solid rgb(var(--ws-text-rgb) / 0.1); }
.ws-account-list li > div { display: flex; flex-direction: column; gap: 3px; font-size: 0.92em; min-width: 0; }
.ws-account-list li > div:last-child { align-items: flex-end; flex: none; }
@media (max-width: 640px) { .ws-account-name { display: none !important; } .ws-account-btn { width: 40px; padding: 0; justify-content: center; } }

/* ---------- Pagination (core.js: data-ws-paginate="<page size>") ----------
   Hidden items get .ws-page-hidden; a page change fades the old items out (.ws-page-leave) and
   rises the new ones in (.ws-page-enter, staggered by --ws-i). Themes restyle .ws-pager freely. */
.ws-page-hidden { display: none !important; }
.ws-page-leave { opacity: 0 !important; transform: translateY(-6px) !important; transition: opacity 0.16s ease, transform 0.16s ease !important; }
.ws-page-enter { animation: ws-page-in 0.46s var(--ws-ease) both; animation-delay: calc(var(--ws-i, 0) * 45ms); }
@keyframes ws-page-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ws-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: clamp(28px, 4vw, 44px); }
.ws-pager-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ws-pager-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1.5px solid rgb(var(--ws-text-rgb) / 0.12); background: var(--ws-surface); color: var(--ws-text);
  font: inherit; font-weight: 600; font-size: 0.95em; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s var(--ws-ease);
}
.ws-pager-num { padding: 0 8px; }
.ws-pager-btn:hover:not(:disabled):not(.ws-active) { border-color: var(--ws-primary); color: var(--ws-primary); transform: translateY(-1px); }
.ws-pager-btn.ws-active { background: var(--ws-primary); border-color: var(--ws-primary); color: var(--ws-on-primary); box-shadow: 0 10px 22px -12px rgb(var(--ws-primary-rgb) / 0.85); cursor: default; }
.ws-pager-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.ws-pager-btn:focus-visible { outline: 2px solid var(--ws-primary); outline-offset: 3px; border-radius: 999px; }
.ws-pager-gap { min-width: 22px; text-align: center; color: var(--ws-muted); font-weight: 700; letter-spacing: 0.1em; user-select: none; }
.ws-bg-primary .ws-pager-btn, .ws-bg-dark .ws-pager-btn, .ws-bg-gradient .ws-pager-btn, .ws-bg-image .ws-pager-btn { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.24); color: #fff; }
.ws-bg-primary .ws-pager-btn:hover:not(:disabled):not(.ws-active), .ws-bg-dark .ws-pager-btn:hover:not(:disabled):not(.ws-active), .ws-bg-gradient .ws-pager-btn:hover:not(:disabled):not(.ws-active), .ws-bg-image .ws-pager-btn:hover:not(:disabled):not(.ws-active) { border-color: #fff; color: #fff; background: rgb(255 255 255 / 0.18); }
.ws-bg-primary .ws-pager-btn.ws-active, .ws-bg-dark .ws-pager-btn.ws-active, .ws-bg-gradient .ws-pager-btn.ws-active, .ws-bg-image .ws-pager-btn.ws-active { background: #fff; border-color: #fff; color: var(--ws-primary-dark); }
.ws-bg-primary .ws-pager-btn:focus-visible, .ws-bg-dark .ws-pager-btn:focus-visible, .ws-bg-gradient .ws-pager-btn:focus-visible, .ws-bg-image .ws-pager-btn:focus-visible { outline-color: #fff; }
.ws-bg-primary .ws-pager-gap, .ws-bg-dark .ws-pager-gap, .ws-bg-gradient .ws-pager-gap, .ws-bg-image .ws-pager-gap { color: var(--ws-muted-local); }
@media (max-width: 560px) {
  .ws-pager { gap: 6px; }
  .ws-pager-pages { gap: 4px; }
  .ws-pager-btn { min-width: 40px; height: 40px; font-size: 0.9em; }
  .ws-pager-prev, .ws-pager-next { width: 40px; padding: 0; }
  .ws-pager-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ws-pager-gap { min-width: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-page-enter, .ws-page-leave { animation: none !important; transition: none !important; }
}

/* ---------- Gallery lightbox (core.js: data-ws-lightbox) ---------- */
[data-ws-lightbox] img { cursor: zoom-in; }
[data-ws-lightbox] img:focus-visible { outline: 3px solid var(--ws-primary); outline-offset: -3px; }
body.ws-bridge [data-ws-lightbox] img { cursor: inherit; }
.ws-lightbox {
  position: fixed; inset: 0; z-index: 70; color: #fff; background: rgb(6 8 16 / 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  opacity: 0; transition: opacity 0.25s ease; touch-action: pan-y pinch-zoom; overscroll-behavior: contain;
}
.ws-lightbox.ws-open { opacity: 1; }
.ws-lightbox:focus { outline: none; }
.ws-lb-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 76px clamp(16px, 8vw, 104px) 40px; }
.ws-lb-figure { margin: 0; display: grid; justify-items: center; gap: 14px; max-width: 100%; }
.ws-lb-img {
  display: block; max-width: 100%; max-height: calc(100svh - 170px); width: auto; height: auto; object-fit: contain;
  border-radius: var(--ws-radius-sm); box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.75); user-select: none; -webkit-user-drag: none;
  opacity: 0; transform: scale(0.97);
}
.ws-lb-img[data-from="next"] { transform: translateX(36px); }
.ws-lb-img[data-from="prev"] { transform: translateX(-36px); }
[dir="rtl"] .ws-lb-img[data-from="next"] { transform: translateX(-36px); }
[dir="rtl"] .ws-lb-img[data-from="prev"] { transform: translateX(36px); }
.ws-lb-img.ws-lb-in { opacity: 1; transform: none; transition: opacity 0.3s ease, transform 0.4s var(--ws-ease); }
.ws-lb-caption { max-width: 68ch; text-align: center; font-size: 0.95em; line-height: 1.5; color: rgb(255 255 255 / 0.86); }
.ws-lb-caption[hidden] { display: none; }
.ws-lb-top { position: absolute; top: 0; inset-inline: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px clamp(14px, 3vw, 24px); pointer-events: none; }
.ws-lb-top > * { pointer-events: auto; }
.ws-lb-count { padding: 7px 14px; border-radius: 999px; background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.14); font-size: 0.85em; font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; direction: ltr; }
.ws-lb-count[hidden] { visibility: hidden; display: block; }
.ws-lb-btn {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; color: #fff; cursor: pointer;
  background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.18);
  transition: background 0.2s, transform 0.2s var(--ws-ease);
}
.ws-lb-btn:hover { background: rgb(255 255 255 / 0.24); }
.ws-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ws-lb-nav { position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; }
.ws-lb-nav:hover { transform: scale(1.06); }
.ws-lb-prev { inset-inline-start: clamp(12px, 2.5vw, 28px); }
.ws-lb-next { inset-inline-end: clamp(12px, 2.5vw, 28px); }
@media (max-width: 640px) {
  .ws-lb-stage { padding: 72px 12px 104px; }
  .ws-lb-img { max-height: calc(100svh - 230px); }
  .ws-lb-nav { top: auto; bottom: max(24px, env(safe-area-inset-bottom)); margin-top: 0; width: 52px; height: 52px; }
  .ws-lb-prev { inset-inline-start: calc(50% - 64px); }
  .ws-lb-next { inset-inline-end: calc(50% - 64px); }
}
@media (prefers-reduced-motion: reduce) {
  .ws-lightbox, .ws-lb-img, .ws-lb-img.ws-lb-in { transition: none; transform: none; }
}

/* ---------- Count-up numbers (core.js: data-ws-count) ---------- */
[data-ws-count] { font-variant-numeric: tabular-nums; }