/* ==========================================================================
   The Spa at Bainland — Elementor Blocks
   Palette: Dark Green #303E34 · Bancha #696A4B · James White #EBE8DB
   Fonts:   Optima stack (falls back to Marcellus for headings, Lato for body)
            — identical to the child theme, so the theme's global !important
            rules and these rules agree rather than fight.
   ========================================================================== */

/* The pound sign (U+00A3) -------------------------------------------------
   Declared here as well as in thecappa-child so the plugin stands on its own:
   drop it on a site without that child theme and prices keep their £.
   Identical @font-face rules in two stylesheets are harmless — the browser
   resolves one family either way.
   Why it is needed: Optima draws no usable sterling sign, and ordinary
   font-stack fallback does not rescue it because the face reports the glyph as
   present, so the browser never moves on. unicode-range makes taking U+00A3 —
   and only U+00A3 — from elsewhere mandatory. 732 bytes, Lato's £ alone. */
@font-face{
  font-family:'SpaPound';font-style:normal;font-weight:400;font-display:swap;
  src:local('Lato Regular'),local('Lato'),local('Helvetica Neue'),local('Arial'),
      url('../fonts/pound-400.woff2') format('woff2');
  unicode-range:U+00A3;
}
@font-face{
  font-family:'SpaPound';font-style:normal;font-weight:700;font-display:swap;
  src:local('Lato Bold'),local('Helvetica Neue Bold'),local('Arial Bold'),
      url('../fonts/pound-700.woff2') format('woff2');
  unicode-range:U+00A3;
}

.spb{
  --spb-green:#303E34;
  --spb-bancha:#696A4B;
  --spb-jwhite:#EBE8DB;
  --spb-cream:#F7F4EE;
  --spb-body:'SpaPound','Optima','Optima nova','URW Classico','Lato','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --spb-display:'SpaPound','Optima','Optima nova','URW Classico','Marcellus','Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
  /* Prices sit on the brand font like everything else. They only can since the
     child theme gained the 'SpaPound' unicode-range face: Optima's sterling
     sign is unusable, so U+00A3 comes from there and the rest from Optima.
     Drop that face and this has to revert to Lato or the £ disappears. */
  --spb-money:'SpaPound','Optima','Optima nova','URW Classico','Lato','Segoe UI','Helvetica Neue',Arial,sans-serif;
  position:relative;
  width:100%;
}
.spb *,.spb *::before,.spb *::after{box-sizing:border-box}

.spb-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.spb-empty{padding:28px;text-align:center;border:1px dashed rgba(48,62,52,.35);color:var(--spb-bancha)}

/* --------------------------------------------------------------- Heading */
.spb-head{text-align:center;margin:0 0 44px}
.spb-head__title{
  font-family:var(--spb-display);
  color:var(--spb-green);
  font-size:clamp(26px,3vw,38px);
  line-height:1.2;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0;
}
.spb-head__sub{
  font-family:var(--spb-body);
  font-size:16px;line-height:1.65;color:#454F47;
  max-width:640px;margin:16px auto 0;
}

/* Treatment widget: heading left, view switcher right, on one line. */
.spb-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin:0 0 32px}
.spb-bar__title{grid-column:2;justify-self:center;text-align:center;text-transform:none;letter-spacing:.02em}
.spb-views{grid-column:3;justify-self:end;display:inline-flex;border:1px solid rgba(48,62,52,.25);background:#fff}
.spb-view{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;cursor:pointer;
  font-family:var(--spb-body);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--spb-green);padding:11px 18px;transition:background .2s ease,color .2s ease}
.spb-view svg{width:17px;height:17px;flex:0 0 auto}
.spb-view+.spb-view{border-left:1px solid rgba(48,62,52,.18)}
.spb-view:hover{background:rgba(48,62,52,.07)}
.spb-view.is-active{background:var(--spb-green);color:#fff}

/* ------------------------------------------------------------- Carousel */
.spb-carousel{
  --spb-gap:24px;
  --spb-peek:0px;
  --spb-slide:33.3333%;
  position:relative;
}
/* touch-action:pan-y lets the browser keep vertical scrolling while we take
   horizontal gestures. Without it a real phone fights the swipe handler. */
.spb-carousel__viewport{overflow:hidden;position:relative;touch-action:pan-y}
.spb-carousel[data-active="carousel"] .spb-carousel__viewport{cursor:grab}
.spb-carousel[data-dragging] .spb-carousel__viewport{cursor:grabbing}
.spb-carousel__track{
  display:flex;
  gap:var(--spb-gap);
  align-items:stretch;
  will-change:transform;
  transition:transform .55s cubic-bezier(.4,.03,.2,1);
}
.spb-slide{flex:0 0 var(--spb-slide);min-width:0;display:flex}
.spb-slide>*{width:100%}

/* Before the engine boots, show the first row rather than a stack — no FOUC. */
.spb-carousel:not([data-ready]) .spb-carousel__track{overflow:hidden}
.spb-carousel:not([data-ready]) .spb-slide{flex:0 0 calc((100% - var(--spb-gap) * 2) / 3)}
@media(max-width:1024px){.spb-carousel:not([data-ready]) .spb-slide{flex:0 0 calc((100% - var(--spb-gap)) / 2)}}
@media(max-width:767px){.spb-carousel:not([data-ready]) .spb-slide{flex:0 0 100%}}

/* Grid mode — same cards, wrapped, no transform. */
.spb-carousel[data-active="grid"] .spb-carousel__track{
  flex-wrap:wrap;transform:none!important;transition:none;
}
.spb-carousel[data-active="grid"] .spb-arrow,
.spb-carousel[data-active="grid"] .spb-dots,
.spb-carousel[data-active="grid"] .spb-progress{display:none}

.spb-carousel[data-dragging] .spb-carousel__track{transition:none;cursor:grabbing}

@media(prefers-reduced-motion:reduce){
  .spb-carousel__track{transition:none}
}

/* --------------------------------------------------------------- Arrows */
.spb-arrow{
  position:absolute;top:var(--spb-arrow-top,40%);transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(48,62,52,.18);background:#fff;color:var(--spb-green);
  cursor:pointer;z-index:4;padding:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 14px rgba(48,62,52,.16);
  transition:opacity .2s ease,background .2s ease,color .2s ease;
}
.spb-arrow svg{width:22px;height:22px}
.spb-arrow:hover{background:var(--spb-green);color:#fff}
.spb-arrow:focus-visible{outline:2px solid var(--spb-bancha);outline-offset:3px}
.spb-arrow[disabled]{opacity:0;pointer-events:none}

/* --spb-arrow-x is set by JS to however far the arrow can hang outside the
   carousel without pushing past the edge of the window. It goes negative on a
   boxed container with room to spare, and to a small positive inset when the
   section runs edge to edge. The static value here is the pre-JS fallback. */
.spb-arrow--prev{left:var(--spb-arrow-x,8px)}
.spb-arrow--next{right:var(--spb-arrow-x,8px)}

@media(max-width:767px){
  .spb-arrow{width:42px;height:42px}
  .spb-arrow svg{width:18px;height:18px}
}

/* ----------------------------------------------------------------- Dots */
.spb-dots{display:flex;justify-content:center;gap:10px;margin:30px 0 0;flex-wrap:wrap}
.spb-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(48,62,52,.25);transition:background .2s ease,transform .2s ease}
.spb-dot:hover{transform:scale(1.25)}
.spb-dot.is-active{background:var(--spb-green);transform:scale(1.25)}
.spb-dot:focus-visible{outline:2px solid var(--spb-bancha);outline-offset:3px}

/* ------------------------------------------------------------- Progress */
.spb-progress{height:2px;background:rgba(48,62,52,.16);margin:34px auto 0;max-width:340px}
.spb-progress span{display:block;height:100%;width:0;background:var(--spb-green);
  transition:width .35s ease,margin-left .35s ease}

/* ---------------------------------------------------------------- Media */
.spb-media{position:relative;overflow:hidden;background:var(--spb-jwhite);line-height:0;height:320px}

/* Images and videos must fill the media box identically — an image at 3:2 and a
   video at 16:9 have to end up the same size on the card, or a mixed row goes
   ragged.
   Two rules were breaking that:
     Elementor  .elementor img{height:auto}   — specificity (0,1,1)
     thecappa   img{height:auto}              — specificity (0,0,1)
   Both beat or tie a bare .spb-media__img (0,1,0), so <img> fell back to its
   natural ratio while <video> (matched by neither) obeyed height:100%. That is
   why the video cards looked taller.
   Absolute + inset:0 sizes from the box rather than from the intrinsic ratio, so
   it holds even if a future theme or plugin update adds another height:auto —
   no !important arms race. object-fit then does the cropping, centred. */
.spb .spb-media__img,
.spb .spb-media__video,
.spb .spb-media__empty{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  width:100%;height:100%;
  max-width:none;
  margin:0;
  object-fit:cover;
  object-position:center;
  display:block;

  /* Without this the browser's native image-drag starts as soon as a swipe
     begins on the picture, which fires pointercancel and kills the swipe
     halfway. On a phone the image is most of the card, so the carousel would
     barely respond to a finger. */
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
}
.spb-media__empty{background:
  repeating-linear-gradient(45deg,var(--spb-jwhite) 0 10px,#e2dfd1 10px 20px)}
.spb-media__frame{position:absolute;inset:0;overflow:hidden;background-size:cover;background-position:center}
.spb-media__frame iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0;
  width:100%;height:100%;pointer-events:none}

/* --------------------------------------------------------------- Badges */
.spb-badge{
  position:absolute;top:0;left:0;z-index:2;
  font-family:var(--spb-money);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  background:#fff;color:var(--spb-green);padding:10px 16px;line-height:1;
}

.spb-flag{
  position:absolute;top:22px;left:0;z-index:2;
  display:flex;align-items:baseline;gap:8px;
  background:#fff;color:var(--spb-green);padding:10px 18px 10px 16px;line-height:1;
}
.spb-flag__prefix{font-family:var(--spb-money)!important;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:400}
/* 26px, not 32 — Optima runs wider than the Lato this used to be set in, so the
   old size made the flag overhang the photo. Alicia can still move it on the
   "Price size" slider, per breakpoint. */
.spb-flag__price{font-family:var(--spb-money)!important;font-size:26px;line-height:1;font-weight:400}

/* -------------------------------------------------------- Buttons (all) */
.spb .spb-btn{
  display:block;width:100%;text-align:center;
  padding:14px 20px;
  border:1px solid var(--spb-green);
  background:transparent;
  text-decoration:none;
  font-family:var(--spb-body)!important;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;line-height:1.3;
  cursor:pointer;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
/* thecappa-child sets `a,a:link,a:visited{color:#696A4B}` — beat it on every
   link state or solid buttons render Bancha-on-Dark-Green. */
.spb a.spb-btn:link,.spb a.spb-btn:visited{color:var(--spb-green)}
.spb .spb-btn:hover,.spb a.spb-btn:hover{background:var(--spb-green);color:#fff}

.spb .spb-btn--solid,.spb a.spb-btn--solid:link,.spb a.spb-btn--solid:visited{
  background:var(--spb-green);border-color:var(--spb-green);color:#fff}
.spb .spb-btn--solid:hover,.spb a.spb-btn--solid:hover{
  background:var(--spb-bancha);border-color:var(--spb-bancha);color:#fff}

.spb .spb-btn--ghost,.spb a.spb-btn--ghost:link,.spb a.spb-btn--ghost:visited{
  background:transparent;border-color:var(--spb-green);color:var(--spb-green)}
.spb .spb-btn--ghost:hover,.spb a.spb-btn--ghost:hover{
  background:var(--spb-green);color:#fff}

.spb .spb-btn--static{opacity:.55;cursor:default;pointer-events:none}
.spb .spb-btn:focus-visible{outline:2px solid var(--spb-bancha);outline-offset:3px}

/* ============================================================ 1. OFFERS */
.spb-offers .spb-carousel{--spb-arrow-top:190px}
.spb-offer{display:flex;flex-direction:column;height:100%;background:transparent}
.spb-offer__media{position:relative}
.spb-offer .spb-media{height:380px}
.spb-offer__body{display:flex;flex-direction:column;flex:1 1 auto;padding:28px 18px 0;text-align:center}
.spb-offer__title{
  font-family:var(--spb-display);color:var(--spb-green);
  font-size:21px;line-height:1.3;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 16px;
}
.spb-offer__text{
  font-family:var(--spb-body);color:#454F47;
  font-size:15px;line-height:1.7;margin:0 0 24px;
}
.spb-offer .spb-btn{margin-top:auto;width:auto;align-self:center;padding:13px 34px}

@media(max-width:767px){
  .spb-offer .spb-media{height:280px}
  .spb-offer__body{padding:24px 8px 0}
}

/* ======================================================= 2. EXPERIENCES */
.spb-experiences .spb-carousel{--spb-arrow-top:215px}
.spb-exp{
  display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid rgba(48,62,52,.14);
  box-shadow:0 2px 18px rgba(48,62,52,.06);
  overflow:hidden;
}
.spb-exp__media{position:relative}
.spb-exp .spb-media{height:430px}
.spb-exp__body{display:flex;flex-direction:column;flex:1 1 auto;padding:30px 28px 30px}
.spb-exp__title{
  font-family:var(--spb-display);color:var(--spb-green);
  font-size:27px;line-height:1.25;font-weight:400;letter-spacing:.01em;
  margin:0 0 18px;
}
.spb-exp__text{font-family:var(--spb-body);color:#454F47;font-size:15px;line-height:1.65}
.spb-exp__text p{margin:0 0 14px;font-size:inherit;line-height:inherit;color:inherit}
.spb-exp__text p:last-child{margin-bottom:0}
.spb-exp__note{margin:16px 0 0;font-family:var(--spb-body);color:var(--spb-bancha);
  font-size:13.5px;line-height:1.6;font-style:italic}
.spb-exp__note p{margin:0 0 8px;font-size:inherit;line-height:inherit;color:inherit;font-style:italic}
.spb-exp__note p:last-child{margin-bottom:0}
/* Prices live in this copy — force Lato so the £ renders. */
.spb-exp__note,.spb-exp__note p,.spb-exp__note em,.spb-exp__note i{
  font-family:var(--spb-money)!important}
.spb-exp__ctas{margin-top:26px;padding-top:4px;display:flex;flex-direction:column;gap:12px}
.spb-exp__ctas:first-child{margin-top:auto}
.spb-exp__body>.spb-exp__ctas{margin-top:auto;padding-top:26px}

@media(max-width:767px){
  .spb-exp .spb-media{height:400px}
  .spb-exp__body{padding:26px 22px}
  .spb-exp__title{font-size:24px}
}

/* ======================================================== 3. TREATMENTS */
.spb-treatments .spb-carousel{--spb-arrow-top:135px}
.spb-treat{
  display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid rgba(48,62,52,.14);overflow:hidden;
}
.spb-treat__media{position:relative}
.spb-treat .spb-media{height:270px}
.spb-treat__body{display:flex;flex-direction:column;flex:1 1 auto;padding:26px 26px 28px}
.spb-treat__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px}
.spb-treat__title{
  font-family:var(--spb-display);color:var(--spb-green);
  font-size:23px;line-height:1.25;font-weight:400;margin:0;flex:1 1 auto;
}
.spb-treat__price{margin:0;white-space:nowrap;flex:0 0 auto;color:var(--spb-green);
  font-family:var(--spb-money)!important;font-size:15px}
.spb-treat__price strong{font-size:21px;font-weight:700;font-family:var(--spb-money)!important}

.spb-treat__features{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:13px}
.spb-treat__features li{display:flex;align-items:center;gap:12px;margin:0;
  font-family:var(--spb-body)!important;font-size:15px;line-height:1.4;color:#454F47}
.spb-feat__icon{width:26px;height:26px;flex:0 0 26px;color:var(--spb-bancha)}
.spb-treat__ctas{margin-top:auto;display:flex;flex-direction:column;gap:12px}

@media(max-width:767px){
  .spb-treat__body{padding:24px 22px 26px}
  .spb-bar{grid-template-columns:1fr;gap:16px}
  .spb-bar__title,.spb-views{grid-column:1;justify-self:center}
}

/* ================================================== Spa Facilities Grid */
/* The Bainland "Yours to enjoy" icon section, in Spa branding. The tiles are
   a CSS grid so the column count is a single Elementor control per breakpoint,
   and so a row that ends short still leaves aligned tiles rather than a gap. */
.spb-fac{
  padding:80px 0;
  background:var(--spb-jwhite);
  /* The cream band runs the full width of the window, as on Bainland, but the
     content inside is boxed to the same 1280px the rest of the site uses so the
     tiles do not stretch out of proportion on a wide monitor. */
  --spb-fac-inner:1280px;
}
.spb-fac__head,
.spb-fac__grid,
.spb-fac__carousel{
  max-width:var(--spb-fac-inner);
  margin-left:auto;margin-right:auto;
  padding-left:20px;padding-right:20px;
}
/* `margin:0 auto 40px`, never `margin:0 0 40px` — the shorthand would reset the
   auto left/right margins set above, leaving this 1280px block flush against the
   left edge of the full-width band while its text centred inside it. That put the
   heading half the band's overflow (70px at 1440) left of the tiles beneath it. */
.spb-fac__head{text-align:center;margin:0 auto 40px}
.spb-fac__eyebrow{
  font-family:var(--spb-body);
  font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--spb-bancha);
  margin:0 0 14px;
}
.spb-fac__title{
  font-family:var(--spb-display);
  color:var(--spb-green);
  font-size:clamp(28px,3.2vw,44px);
  line-height:1.15;font-weight:400;letter-spacing:.02em;
  margin:0;
}
.spb-fac__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.spb-fac__tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;
  min-height:190px;
  padding:28px 18px;
  text-align:center;
  text-decoration:none;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(105,106,75,.30);
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
/* Only tiles that are actually links react to the pointer. */
a.spb-fac__tile:hover,
a.spb-fac__tile:focus-visible{
  background:rgba(255,255,255,.70);
  border-color:rgba(105,106,75,.55);
  transform:translateY(-2px);
}
a.spb-fac__tile:focus-visible{outline:2px solid var(--spb-green);outline-offset:3px}
/* Height-constrained, width auto: the supplied icons are not all square and a
   fixed 60x60 box squashes them (as it does on the Bainland original). */
.spb-fac__icon{
  height:64px;width:auto;max-width:100%;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
}
.spb-fac__label{
  font-family:var(--spb-display);
  color:var(--spb-green);
  font-size:20px;line-height:1.3;font-weight:400;letter-spacing:.02em;
}

/* ---- Carousel layout -------------------------------------------------- */
/* Same tiles, same engine as the card blocks — only the container changes, so
   nothing about a tile's look depends on which layout is chosen. */
.spb-fac__carousel .spb-fac__tile{
  width:100%;
  /* The slide is a flex row; without this a short label leaves a short tile and
     the row loses its baseline. */
  flex:1 1 auto;
}
/* No photo in these tiles for placeArrows() to measure against, so the arrows
   sit on the middle of the tile itself. JS refines this from the real height. */
.spb-fac__carousel{--spb-arrow-top:95px}

@media (max-width:1024px){
  .spb-fac__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .spb-fac{padding:56px 0}
  .spb-fac__head{margin-bottom:28px}
  .spb-fac__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .spb-fac__tile{min-height:150px;padding:20px 10px;gap:12px}
  .spb-fac__icon{height:48px}
  .spb-fac__label{font-size:15px}
  .spb-fac__carousel{--spb-arrow-top:75px}
}