/*!
 * ww-cart.css — the Wedding Weekender cart, styled ONCE for both places it
 * appears: the booking pages on this host, and the WordPress marketing site,
 * whose widget (ww-cart.js) links this same file from here.
 *
 * Luke, 2026-09-02: "the styling/icons is different from portal". They were
 * two hand-written copies of Booqable's cart — one inside SiteChrome.tsx, one
 * inlined in the widget — and they had drifted. Now there is one. Change a
 * colour here and both carts change together; there is nothing to copy.
 *
 * Everything is scoped to .ww-cart* class names. Nothing in here may depend
 * on the booking page shell (.ww-cart, --ww-* variables): the WordPress site
 * has neither. cart-stylesheet.test.ts holds that line.
 *
 * Fonts are referenced RELATIVE to this file so the same URL works from
 * either origin; next.config.ts adds Access-Control-Allow-Origin for
 * /wp/fonts/, without which a browser refuses a cross-origin font and falls
 * back to Arial with no error.
 */

/* ── Roboto, self-hosted, for the cart only. The .ww-cart stack named
      Roboto but nothing ever loaded it, so the widget silently rendered
      in Arial — a visibly different face, not a metrics nit (the same
      13px string measured 159.95px here against Booqable's 161.41px).
      Salient does not serve Roboto, so the files live in /public rather
      than being hotlinked. local() first so an installed system copy is
      used before the download. They sit under /wp/ because that prefix is
      already in the middleware's public list — a bare /fonts/ redirects a
      signed-out shopper to /login and the face silently never arrives.
      Do NOT check this with document.fonts.check(): it answers true for
      a family that has no @font-face at all, which is what hid this. ── */
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;
  src:local("Roboto"), url("fonts/roboto-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;
  src:local("Roboto Medium"), local("Roboto"), url("fonts/roboto-latin-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── The corner cart. Deliberately foreign to the page's type — the
      reference cart is Booqable's widget and is set in Roboto. ──────── */
.ww-cart{ font-family:Roboto,"Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:normal; color:#586c76 }
/* Salient's material skin flattens buttons to border-radius:1px, and the
   cart button and panel came out square against Booqable's 8px. Its
   stylesheets are cross-origin, so the rule cannot be read back to see
   what it is — and adding the wrapper to the selector did not beat it,
   which leaves !important as the honest answer rather than stacking
   selectors until something sticks. Scoped to .ww-cart, so it reaches
   nothing outside the cart. */
.ww-cart .ww-cart-launcher{
  border-radius:8px !important;
  /* Same fight as the radius: the skin flattens buttons, and it takes the
     shadow and the transition with them. Measured on the widget: a
     0 5px 40px rgba(0,0,0,.16) shadow, and the hover expansion easing
     over 100ms rather than snapping open. */
  box-shadow:0 5px 40px rgba(0,0,0,.16) !important;
  transition:all 100ms ease-in !important;
}
/* The icon block is the LEFT end of the launcher, so the rounded corners
   are on that side. (The reference's own icon carries radius 0 and lets
   the container's overflow:hidden do the clipping; this is the same
   result, stated.) */
.ww-cart .ww-cart-launcher__icon{ border-radius:8px 0 0 8px !important }
.ww-cart .ww-cart-panel{ border-radius:8px !important }
.ww-cart .ww-cart-panel__head{ border-radius:8px 8px 0 0 !important }
@media only screen and (max-width:534px){
  .ww-cart .ww-cart-panel,
  .ww-cart .ww-cart-panel__head{ border-radius:0 !important }
}
.ww-cart-launcher{
  position:fixed; right:15px; bottom:15px; z-index:99998;
  width:60px; height:60px; border-radius:8px; overflow:hidden; border:0; padding:0;
  background:#fbfdfc; box-shadow:0 5px 40px rgba(0,0,0,.16);
  /* flex-start, because the icon is now the first child: the collapsed
     60px box must show the icon and clip the summary, not the reverse. */
  display:flex; justify-content:flex-start; align-items:stretch; cursor:pointer;
  transition:all 100ms ease-in;
}
.ww-cart-launcher:hover{ width:320px }
.ww-cart-launcher__summary{
  flex:0 0 260px; width:260px; height:60px; background:#fbfdfc;
  padding:8px 15px; font-size:13px; color:#515151; text-align:left;
  display:flex; flex-direction:column; justify-content:center;
}
.ww-cart-launcher__rule{ flex:0 0 1px; height:1px; background:#f0f3f4; margin:6.5px 0 }
.ww-cart-launcher__totals{ display:flex; justify-content:space-between; gap:12px }
.ww-cart-launcher__icon{
  flex:0 0 60px; width:60px; height:60px; background:#9da67f; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
/* The count. One chip, shown wherever the cart currently is: the corner
   of the collapsed launcher, the same corner when hover expands it, and
   the header once the panel opens (Luke 2026-09-08 — "when it opens it
   should be at the top of the container still, like on the hover"). Both
   carts draw it from here, so the marketing site and the portal cannot
   look different. */
.ww-cart-launcher__badge,
.ww-cart-panel__count{
  position:absolute; z-index:1;
  min-width:19px; height:19px; padding:0 5px; box-sizing:border-box;
  border-radius:10px;
  background:#2d2d2d; color:#fff;
  font-family:inherit; font-size:11px; font-weight:600; line-height:19px;
  text-align:center; letter-spacing:0; pointer-events:none;
}
/* Inset from the launcher's top right, clear of its 8px corner radius —
   flush into the corner, the radius sliced it. */
.ww-cart-launcher__badge{ top:5px; right:5px }
/* The panel's top right belongs to the close button, so the count mirrors
   it on the left of the same header. */
.ww-cart-panel__count{ top:13px; left:13px }
.ww-cart-panel{
  position:fixed; right:15px; bottom:15px; z-index:99998;
  width:340px; height:80vh; min-height:440px;
  border-radius:8px; background:#fafbfb; box-shadow:0 5px 40px rgba(0,0,0,.16);
  display:flex; flex-direction:column; overflow:hidden;
}
@media only screen and (max-width:534px){
  .ww-cart-panel{ inset:0; width:auto; height:auto; min-height:0; border-radius:0; z-index:99999 }
}
.ww-cart-panel__head{
  position:relative; background:#9da67f; color:#fff;
  padding:20px 0 14px; border-radius:8px 8px 0 0;
  font-size:13.33px; font-weight:500; line-height:1.2;
  /* letter-spacing normal, measured off the widget — an earlier .02em was tracking the
     title wider than Booqable's. The rule declared letter-spacing twice
     and the second one silently won. */
  letter-spacing:normal; text-transform:uppercase; text-align:center;
}
@media only screen and (max-width:534px){ .ww-cart-panel__head{ border-radius:0 } }
.ww-cart-panel__close{
  position:absolute; top:0; right:0; padding:15px; opacity:.6;
  background:transparent; border:0; color:#fff; cursor:pointer; line-height:0;
}
/* Hairline, like the widget's. Ours was drawing at 14px on a 1.6 stroke,
   which next to theirs read as a heavy X rather than a dismiss. */
.ww-cart-panel__close svg{ width:11px; height:11px }
.ww-cart-panel__close svg path{ stroke-width:1.1 }
.ww-cart-panel__close:hover{ opacity:1 }
.ww-cart-panel__strip{ position:relative; height:40px; background:#9da67f; padding:12px 16px;
  color:#fff; font-size:14px; text-align:center; line-height:16.1px; overflow:hidden;
  display:flex; align-items:center }
/* padding:0 is not decoration — a theme rule puts 21px under every p,
   which made this one 37px tall inside a 16px band and shoved the label
   above centre. */
.ww-cart-panel__strip p{ margin:0; padding:0; width:100%; text-align:center }
/* Absolute rather than a flex sibling so the label stays centred on the
   strip, not on the space left over beside the glyph. */
.ww-cart-panel__strip-icon{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:15px; height:12px;
}
.ww-cart-panel__body{ flex-grow:1; overflow-y:auto; padding:0 0 16px }
.ww-cart-panel__body ul{ list-style:none; margin:0; padding:0 10px }
/* The line's 127.8px is: 10 padding + 79.39 line box + 10 footer margin +
   18.39 footer + 10 padding. The 79.39 is the 75px thumb plus 4.39px of
   strut descent below it, and 1.15 is where that strut comes from —
   Booqable inherits the ratio down the whole cart chain, which is also
   what turns 16 into 18.4 and 13 into 14.95. It has to be the RATIO: a
   length would inherit into the 13px column as 18.4 instead of 14.95. */
.ww-cart-line{
  display:block; position:relative; line-height:1.15;
  margin:10px auto 0; padding:10px; border-radius:3px;
  background:#fff; box-shadow:rgba(0,0,0,.2) 0 1px 2px;
}
/* Not flex: the thumb rides the text baseline as an inline-block, and a
   flex container has no line box to build the strut whose descent is that
   4.39px. A flex row is 14.39px short — the descent plus the footer's
   margin, which flex's gap was never supplying. */
.ww-cart-line__row{ display:block }
.ww-cart-line__footer{ display:grid; margin-top:10px }
/* A real photo is 60px wide at its natural height with no plate. The
   bordered 58px square is Booqable's NO-PHOTO placeholder — ours was
   showing it under every image.
   The 75px is fixed, not an aspect-ratio: Booqable's img computes
   object-fit:fill on a hardcoded 60x75 box, and without a height of its
   own the thumb sized itself off the text column instead (39.9px), which
   let background-size:cover crop the portrait source.
   vertical-align is written out even though baseline is the default: it
   is the declaration the row's 4.39px of descent hangs on, and a later
   vertical-align:middle would quietly cost the line its height. */
.ww-cart-line__thumb{
  display:inline-block; vertical-align:baseline;
  width:60px; height:75px; background:no-repeat center/cover;
}
.ww-cart-line__thumb--placeholder{
  width:58px; height:58px; background-color:#fbfdfc;
  border:1px solid #f2f3f4;
}
/* margin-left, not the row's old gap: inline-block siblings have none. */
.ww-cart-line__main{
  display:inline-block; vertical-align:top; margin-left:10px;
  width:200px; max-width:200px; font-size:13px; color:#515151;
}
.ww-cart-line__name{ font-weight:600; line-height:1.3; padding-right:14px }
.ww-cart-line__controls{ display:flex; align-items:center; margin-top:8px }
.ww-cart-line__controls button{
  width:25px; height:25px; border:1px solid #f1f3f4; border-radius:3px;
  background:#fff; color:#213b47; cursor:pointer; line-height:1; font-size:13px;
}
.ww-cart-line__controls button:disabled{ opacity:.4; cursor:not-allowed }
.ww-cart-line__qty{ margin:0 8px; font-variant-numeric:tabular-nums }
/* Its own row under the image column, right-aligned at the panel's base
   size — the reference's .bq-line-footer, not a corner pin. */
.ww-cart-line__price{
  position:static; display:block; width:100%; margin:0;
  text-align:right; font-size:16px; line-height:18.4px; color:#586c76;
}
.ww-cart-line__remove{
  position:absolute; top:0; right:0; padding:7px; opacity:.5; line-height:0;
  background:transparent; border:0; color:#213b47; cursor:pointer;
}
.ww-cart-line__remove:hover{ opacity:1 }
.ww-cart-empty{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px; padding:24px; text-align:center;
}
/* Measured off the widget: 13px #515151, not the panel's base 16/#586c76. */
.ww-cart-empty p{ font-size:13px; color:#515151 }
.ww-cart-empty button{
  background:transparent; border:0; cursor:pointer;
  font-size:13.33px; text-transform:uppercase; color:#586c76; letter-spacing:normal;
}
.ww-cart-foot{ background:#fff; border-top:1px solid #f2f3f4; padding:0 15px 16px }
/* Bold, both sides. The widget sets the subtotal row apart from the
   service lines above it that way, and ours was reading as just another
   line of body copy. */
/* The shipping service lines, measured off the widget: a 14px label on
   the left, a pill switch on the right, sitting above the subtotal. The
   checkbox itself is the state and the keyboard target; the track is
   painted next to it and driven by :checked. */
.ww-cart-ship{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:6px 0; font-size:14px; line-height:1.6; color:#515151; cursor:pointer;
}
.ww-cart-ship__toggle{
  position:absolute; opacity:0; width:36px; height:20px; margin:0; cursor:pointer;
}
.ww-cart-ship__track{
  position:relative; flex:0 0 36px; width:36px; height:20px; border-radius:10px;
  background:#d7dbd9; transition:background .15s ease;
}
.ww-cart-ship__track::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:#fff; transition:transform .15s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.ww-cart-ship__toggle:checked + .ww-cart-ship__track{ background:#9da67f }
.ww-cart-ship__toggle:checked + .ww-cart-ship__track::after{ transform:translateX(16px) }
.ww-cart-ship__toggle:focus-visible + .ww-cart-ship__track{
  outline:2px solid #7f9497; outline-offset:2px;
}

.ww-cart-foot__row{ display:flex; justify-content:space-between; gap:12px;
  font-size:14px; line-height:1.6; font-weight:700; color:#515151; padding-top:12px }
/* Booqable stacks View cart over Checkout: 121.8px for two 38.4px
   buttons, i.e. 15px above, between and below. A flex column does not
   collapse its items' margins, so the gap is stated on the group and the
   buttons give theirs up — the lone-button case keeps its own 15px. */
.ww-cart-foot__group{ display:flex; flex-direction:column; gap:15px; margin:15px 0 }
.ww-cart-foot__btn{
  /* line-height, not the default: a normal line-height on Roboto 16
     resolves higher than the 18.4px the widget inherits, and the button
     came out a pixel taller than Booqable's. */
  line-height:18.4px;
  /* No vertical margin. The group states the 15px gap; leaving the old
     margin:15px 0 here as well stacked all three and put the buttons
     45px apart against the reference's 15. */
  display:block; width:100%; margin:0; padding:10px;
  font-size:16px; text-transform:uppercase; border:0; border-radius:5px;
  background:#9da67f; color:#fff; cursor:pointer;
  box-sizing:border-box; text-align:center; text-decoration:none;
}
/* An <a>, so the theme's material skin leaves its radius alone — which is
   exactly why the reference's two buttons differ, 5px against 1px. */
/* pointer-events too: the Checkout button is gated on dates being set,
   and opacity alone still lets the click through. */
.ww-cart-foot__btn:disabled{ opacity:.5; cursor:not-allowed; pointer-events:none }