/******* Do not edit this file *******
Code Snippets Manager
Saved: Sep 17 2026 | 18:52:04 */
@charset "UTF-8";
/* =========================================================
   PLAY Event Rentals - Custom Stylesheet  (BASE)
   ASE Pro > Custom Code > Custom CSS   |  load order: 1 of 2

   Companion sheet: `PLAY - CSS Responsive` MUST load after
   this one. Every @media rule on the site now lives there.

   Why: a media query carries no extra specificity. Before the
   split, a plain rule written late in this file could silently
   beat a media query written early in it - which is exactly how
   the mobile cart row ended up un-stacking itself. Keeping all
   responsive rules in a later-loading sheet means they win ties
   by position, every time.

   Caveat worth knowing: position only breaks TIES. A base rule
   with `!important` still beats a non-important media rule no
   matter what loads last. Four such pairs existed; all four were
   resolved rather than out-ordered. Don't add new ones.

   Convention: rem for type/spacing; px only for borders, focus
   outlines, decorative graphics, and breakpoints.
   Brand tokens live at the top and are the single source of truth.
   ========================================================= */
/* =========================================================
   PLAY Event Rentals — Custom Stylesheet
   Home: ASE → Custom Code → Custom CSS
   Convention: rem for type/spacing; px only for borders,
   focus outlines, decorative graphics, and the 782px breakpoint.
   ========================================================= */
/* ---- Brand tokens ---- */
:root {
  --play-blue:#2B6CB0;
  --play-blue-hover:#3b86d6;
  --play-blue-glow:#4f9bee;
  --play-graphite:#0e1116;
  --play-line:#e1e6ee;
  --play-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* ---- Dark hero: subtle grid + glow ---- */
.play-hero {
  position: relative;
  background: var(--play-graphite);
  color: #fff;
  overflow: hidden;
}
.play-hero .play-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(75, 134, 214, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 134, 214, 0.07) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 72% 42%, #000, transparent 75%);
  mask-image: radial-gradient(circle at 72% 42%, #000, transparent 75%);
}
.play-hero .play-glow {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 134, 214, 0.4), transparent 65%);
  top: -170px;
  right: -130px;
  filter: blur(22px);
  animation: playPulse 7s ease-in-out infinite;
}
@keyframes playPulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}
/* ---- Mono spec strip under product names ---- */
.play-spec {
  font-family: var(--play-mono);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8a93a1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.85rem 0 1rem;
}
.play-spec span + span::before {
  content: "·";
  margin-right: 0.3rem;
  color: #c0c7d1;
}
/* ---- Secondary / outline button (.btn-outline on a Kadence button) ---- */
.btn-outline, .btn-outline:visited {
  background: transparent !important;
  border: 2px solid var(--play-blue) !important;
  color: var(--play-blue) !important;
}
.btn-outline:hover {
  background: rgba(43, 108, 176, 0.1) !important;
}
/* ---- Visible keyboard focus ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--play-blue-glow);
  outline-offset: 2px;
}
/* ---- Header: utility strip (full-width, message left / links right) ---- */
.header-html, .header-html-inner {
  width: 100% !important;
  flex: 1 1 100% !important;
}
.play-utility {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rem;
  flex-wrap: wrap;
}
.play-utility-links {
  display: flex;
  gap: 1.125rem;
}
.play-utility strong {
  font-weight: 700;
  color: #fff;
}
.play-utility a {
  color: #cdd6e1;
  text-decoration: none;
}
.play-utility a:hover {
  color: #fff;
}
/* ---- Header CTAs — identical size; cart = filled, Request a Quote = outline ---- */
.header-cart-wrap.kadence-header-cart a, .header-cart-wrap.kadence-header-cart button, .header-button {
  box-sizing: border-box !important;
  height: 2.5rem !important;
  padding: 0 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: 0.25s;
}
.header-cart-wrap.kadence-header-cart a, .header-cart-wrap.kadence-header-cart button {
  background: #2B6CB0 !important;
  border-color: #2B6CB0 !important;
  color: #fff !important;
}
.header-cart-wrap.kadence-header-cart a:hover, .header-cart-wrap.kadence-header-cart button:hover {
  background: #3b86d6 !important;
  border-color: #3b86d6 !important;
}
.header-button {
  background: transparent !important;
  border-color: #2B6CB0 !important;
  color: #2B6CB0 !important;
}
.header-button:hover {
  background: #2B6CB0 !important;
  color: #fff !important;
}
.header-cart-wrap.kadence-header-cart .header-cart-total, .header-cart-wrap.kadence-header-cart .kadence-cart-count {
  background: #0e1116 !important;
  color: #fff !important;
  border-radius: 20px;
  min-width: 1.125rem;
  height: 1.125rem;
  display: inline-grid;
  place-items: center;
  font-size: 0.7rem;
  padding: 0 0.3rem;
}
/* ---- Mobile cart — compact branded button (separate Kadence instance: .header-mobile-cart-wrap) ---- */
.header-mobile-cart-wrap.kadence-header-cart a, .header-mobile-cart-wrap.kadence-header-cart button {
  box-sizing: border-box !important;
  background: #2B6CB0 !important;
  color: #fff !important;
  border-radius: 8px !important;
  height: 2.5rem !important;
  padding: 0 0.7rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem;
  border: 2px solid #2B6CB0 !important;
  line-height: 1 !important;
}
.header-mobile-cart-wrap.kadence-header-cart .header-cart-label {
  display: none !important;
}
.header-mobile-cart-wrap.kadence-header-cart a:hover, .header-mobile-cart-wrap.kadence-header-cart button:hover {
  background: #3b86d6 !important;
  border-color: #3b86d6 !important;
}
.header-mobile-cart-wrap.kadence-header-cart svg {
  color: #fff !important;
  fill: #fff !important;
  width: 1.1rem;
  height: 1.1rem;
}
.header-mobile-cart-wrap.kadence-header-cart .header-cart-total, .header-mobile-cart-wrap.kadence-header-cart .kadence-cart-count {
  background: #0e1116 !important;
  color: #fff !important;
  border-radius: 20px;
  min-width: 1.125rem;
  height: 1.125rem;
  display: inline-grid;
  place-items: center;
  font-size: 0.7rem;
  padding: 0 0.3rem;
}
/* ---- Footer ---- */
.play-foot-logo {
  height: 44px !important;
  width: auto !important;
  margin-bottom: 0.9rem;
}
.play-foot-blurb {
  color: #8a93a1;
  font-size: 0.9rem;
  max-width: 34ch;
  margin: 0 0 0.9rem;
  line-height: 1.6;
}
.play-foot-addr {
  color: #6f7a89;
  font-size: 0.85rem;
  line-height: 1.8;
  margin: 0;
}
.play-foot-addr a {
  color: #8a93a1 !important;
  text-decoration: none;
}
.play-foot-addr a:hover {
  color: #4f9bee !important;
}
.play-foot-col h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  margin: 0 0 1rem;
}
.play-foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.play-foot-col a {
  display: block;
  padding: 0.3rem 0;
  color: #8a93a1 !important;
  text-decoration: none;
  font-size: 0.85rem !important;
  line-height: 1.4;
}
.play-foot-col a:hover {
  color: #4f9bee !important;
}
.play-foot-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: #6f7a89;
}
.play-foot-bottom strong {
  color: #cdd6e1;
  font-weight: 600;
}
/* ---- Single product (PLAY) ---- */
.play-stars {
  display: none;
}
.play-stars-glyph {
  color: #f5a623;
  letter-spacing: 0.5px;
  font-size: 0.95em;
}
.play-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #2B6CB0;
  margin: 0 0 0.5rem !important;
}
.woocommerce div.product .summary.entry-summary {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.woocommerce div.product .summary.entry-summary > *:first-child {
  margin-top: 0 !important;
}
.play-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.875rem;
  margin: 0.3rem 0 1rem;
}
.play-price-note {
  font-size: 0.85rem;
  color: #5b6573;
  margin: 0;
}
.play-price-note strong {
  color: #2B6CB0;
  font-weight: 700;
}
.kadence-breadcrumb-container {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a93a1;
  margin: 1.5rem 0 3rem;
}
.kadence-breadcrumb-container a, .kadence-breadcrumb-container a span {
  color: #5b6573;
  text-decoration: none !important;
  box-shadow: none !important;
}
.kadence-breadcrumb-container a:hover, .kadence-breadcrumb-container a:hover span {
  color: #2B6CB0;
}
.kadence-breadcrumb-container .bc-delimiter {
  color: #c2c9d4;
  margin: 0 0.2rem;
}
.kadence-breadcrumb-container .kadence-bread-current {
  color: #8a93a1;
}
/* cart buttons — full-width, stacked (primary blue + quote outline) */
.woocommerce div.product form.cart {
  display: block;
  margin-top: 0.6rem;
}
.woocommerce div.product form.cart .quantity {
  display: inline-flex;
  margin: 0 0 0.6rem;
}
.single_add_to_cart_button.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  height: 3.1rem;
  background: #2B6CB0 !important;
  color: #fff !important;
  border: 2px solid #2B6CB0 !important;
  border-radius: 8px !important;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.single_add_to_cart_button.button:hover {
  background: #3b86d6 !important;
  border-color: #3b86d6 !important;
}
.play-quote-instead {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  height: 3.1rem;
  margin: 0;
  background: transparent;
  border: 1px solid #e1e6ee !important;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #0e1116 !important;
  text-decoration: none !important;
}
.play-quote-instead:hover {
  border-color: #2B6CB0 !important;
  color: #2B6CB0 !important;
}
/* faded-blue disabled state (Tyche disables until dates are picked) */
.single_add_to_cart_button.button:disabled, .single_add_to_cart_button.button[disabled] {
  background: #9cb8da !important;
  border-color: #9cb8da !important;
  color: #fff !important;
  cursor: not-allowed;
}
/* ---- Tyche booking box (bkap) — clean, side-by-side dates, no container ---- */
#bkap-booking-form.bkap-booking-form {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.bkap-booking-form {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 1.1rem 0 0.25rem;
}
#bkap_show_stock_status, .bkap-booking-form .bkap_show_stock_status {
  display: none !important;
}
.bkap-booking-form .bkap_start_date, .bkap-booking-form .bkap_end_date {
  flex: 1 1 40% !important;
  width: auto !important;
  min-width: 11rem;
  margin: 0;
  position: relative;
}
.bkap-booking-form .book_start_date_label, .bkap-booking-form .book_end_date_label {
  display: block;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2B6CB0;
  margin: 0 0 0.4rem !important;
}
.bkap-booking-form input.booking_calender {
  width: 100%;
  box-sizing: border-box;
  height: 2.75rem;
  padding: 0 2.4rem 0 0.85rem;
  border: 1px solid #e1e6ee;
  border-radius: 8px;
  font-size: 0.9rem;
  background: #fff;
  color: #0e1116;
}
.bkap-booking-form input.booking_calender:focus {
  border-color: #2B6CB0;
  outline: none;
}
.bkap-booking-form #checkin_cal, .bkap-booking-form #checkout_cal {
  position: absolute;
  right: 0.7rem;
  bottom: 0.8rem;
  width: 18px !important;
  height: 18px !important;
  opacity: 0.5;
  margin: 0;
  cursor: pointer;
}
.play-retainer-note {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.82rem;
  color: #3a4452;
  line-height: 1.55;
  margin: 1.1rem 0;
  padding: 0.9rem 1rem;
  background: #eef4fb;
  border: 1px solid #d6e4f5;
  border-radius: 10px;
}
.play-retainer-note strong {
  color: #2B6CB0;
  font-weight: 700;
}
.play-shield {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}
.play-trust {
  list-style: none;
  margin: 1.1rem 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.play-trust li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: #3d4654;
  line-height: 1.5;
}
.play-trust strong {
  color: #0e1116;
}
.play-lean {
  border-top: 1px solid #e1e6ee;
  border-bottom: 1px solid #e1e6ee;
  padding: 1.1rem 0;
  margin: 1.5rem 0;
  display: grid;
  gap: 0.85rem;
}
.play-lean-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  align-items: start;
}
.play-lean dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #2B6CB0;
  padding-top: 0.15rem;
  margin: 0;
}
.play-lean dd {
  font-size: 0.92rem;
  color: #0e1116;
  margin: 0;
}
/* price — prominent, with per-day suffix */
.play-price-row .price {
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.6rem;
  font-weight: 400;
  color: #0e1116;
  line-height: 1;
  margin: 0;
}
.play-price-row .price::after {
  content: " / day";
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #5b6675;
}
/* short description — match mockup body copy (grey, smaller, measured) */
.woocommerce-product-details__short-description {
  color: #5b6675;
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 54ch;
  margin: 0.6rem 0 1.15rem;
}
.woocommerce-product-details__short-description p {
  color: #5b6675;
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0 0 0.8rem;
}
.woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0;
}
/* ---- Single product: title, rating, quantity, gallery, trust icons, sticky ---- */
.woocommerce div.product .product_title {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0 0 0.4rem;
}
.play-trust-ic {
  flex: 0 0 auto;
  line-height: 1;
  margin-top: 0.05rem;
}
/* Quantity: label + compact stepper on one row, above the button */
.woocommerce div.product form.cart {
  margin-top: 1.25rem;
}
/* Quantity: blue label + one connected rounded stepper pill */
.woocommerce div.product form.cart .quantity {
  display: inline-flex;
  align-items: center;
  float: none;
  gap: 0;
  margin: 0 0 1.25rem !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.woocommerce div.product form.cart .quantity::before {
  content: "Quantity";
  margin-right: 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2B6CB0;
}
.woocommerce div.product form.cart .quantity button, .woocommerce div.product form.cart .quantity [class*="minus"], .woocommerce div.product form.cart .quantity [class*="plus"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: #f3f5f8 !important;
  border: 1px solid #e1e6ee !important;
  border-radius: 0 !important;
  color: #0e1116 !important;
  font-size: 1.15rem;
  line-height: 1;
  margin: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}
.woocommerce div.product form.cart .quantity input.qty {
  height: 2.75rem;
  width: 3.25rem;
  text-align: center;
  border: 1px solid #e1e6ee !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: #fff;
  box-shadow: none;
}
.woocommerce div.product form.cart .quantity button:first-of-type, .woocommerce div.product form.cart .quantity [class*="minus"] {
  border-right: 0 !important;
  border-radius: 8px 0 0 8px !important;
}
.woocommerce div.product form.cart .quantity button:last-of-type, .woocommerce div.product form.cart .quantity [class*="plus"] {
  border-left: 0 !important;
  border-radius: 0 8px 8px 0 !important;
}
.woocommerce div.product form.cart .quantity button:hover, .woocommerce div.product form.cart .quantity [class*="minus"]:hover, .woocommerce div.product form.cart .quantity [class*="plus"]:hover {
  background: #e9eef5 !important;
}
/* Hide the default SKU/Category/Brand meta (SKU already shows in the rating line) */
.woocommerce div.product .product_meta {
  display: none;
}
/* Gallery: kill magnifier, round the main image, lay thumbnails in a styled row */
.woocommerce-product-gallery {
  margin-bottom: 0;
}
.woocommerce-product-gallery__trigger {
  display: none !important;
}
.woocommerce-product-gallery__image img {
  border-radius: 14px;
}
.woocommerce-product-gallery .flex-control-thumbs {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.85rem 0 0 !important;
  padding: 0;
  list-style: none;
  width: 100% !important;
}
.woocommerce-product-gallery .flex-control-thumbs li {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  float: none !important;
}
.woocommerce-product-gallery .flex-control-thumbs img {
  width: 5rem !important;
  height: 5rem !important;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e1e6ee;
  background: #fff;
  opacity: 0.6;
  cursor: pointer;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover {
  opacity: 1;
  border-color: #2B6CB0;
}
/* ---- Single product: cart spacing + Tyche total + breadcrumb top ---- */
.single_add_to_cart_button.button {
  margin: 0 0 0.75rem !important;
}
.single-product .product-title.product-above {
  padding-top: 0 !important;
  margin: 0 !important;
}
#bkap-price-box {
  margin: 1rem 0 1.4rem;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#bkap_no_of_days {
  display: inline;
  font-size: 0.95rem;
  font-weight: 600;
  color: #3a4452;
  margin: 0;
}
#bkap_price {
  display: inline;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0e1116;
}
#bkap_no_of_days:not(:empty) + #bkap_price::before {
  content: "·";
  margin: 0 0.45rem;
  font-weight: 400;
  color: #8a93a1;
}
/* availability confirmation line (dates pulled from Tyche) */
.play-avail {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: #3a4452;
  line-height: 1.5;
  margin: 0.2rem 0 1.2rem;
}
.play-avail[hidden] {
  display: none;
}
.play-avail-ic {
  flex: 0 0 auto;
  color: #2e9e5b;
  margin-top: 0.12rem;
}
.play-avail strong {
  color: #2e9e5b;
  font-weight: 700;
}
/* ---- Rounded corners on the Kadence Shop Kit (Splide) gallery ---- */
.ksk-gallery .kadence-product-gallery-main {
  border-radius: 14px;
  overflow: hidden;
}
.ksk-gallery .kadence-product-gallery-main img, .ksk-gallery .woo-main-slide img {
  border-radius: 14px;
}
.ksk-gallery img:not(.attachment-shop-single) {
  border-radius: 10px;
}
/* ---- Up-sells ("Complete the Rig") — heading + baseline cards (full card = Batch 7B) ---- */
.up-sells.upsells {
  margin-top: 3rem;
  clear: both;
}
.up-sells.upsells > h2 {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.92;
  color: var(--play-graphite);
  margin: 0.35rem 0 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.up-sells.upsells > h2 .play-accent {
  color: var(--play-blue);
}
.up-sells.upsells > h2::before {
  content: "Goes well with";
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--play-blue);
  margin-bottom: 0.625rem;
}
/* up-sell cards use the unified archive product card (see "Archive product card" below) */
/* ---- Tyche date-picker calendar (jQuery UI) ---- */
.ui-datepicker.ui-widget {
  width: auto;
  padding: 0.55rem;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(14, 17, 22, 0.14);
  font-family: "Montserrat", sans-serif;
  z-index: 100000;
}
.ui-datepicker .ui-datepicker-header {
  background: transparent;
  border: 0;
  padding: 0.25rem 0 0.5rem;
  font-weight: 700;
}
.ui-datepicker .ui-datepicker-title {
  color: var(--play-graphite);
  font-size: 0.9rem;
  font-weight: 700;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  cursor: pointer;
  top: 0.4rem;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 6px;
}
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover {
  background: #eef4fb;
  border: 0;
}
.ui-datepicker table.ui-datepicker-calendar {
  margin: 0;
  border-collapse: separate;
  border-spacing: 2px;
}
.ui-datepicker .ui-datepicker-calendar th {
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a93a1;
  font-weight: 700;
  padding: 0.3rem 0;
}
.ui-datepicker .ui-datepicker-calendar td {
  padding: 0;
  border: 0;
}
.ui-datepicker .ui-datepicker-calendar td a, .ui-datepicker .ui-datepicker-calendar td span {
  display: block;
  text-align: center;
  padding: 0.45rem 0;
  min-width: 2rem;
  border: 0;
  background: transparent;
  border-radius: 7px;
  font-size: 0.82rem;
  color: var(--play-graphite);
}
.ui-datepicker .ui-datepicker-calendar td a:hover {
  background: #eef4fb;
}
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active, .ui-datepicker .ui-datepicker-calendar td a.ui-state-highlight {
  background: var(--play-blue);
  color: #fff;
}
.ui-datepicker .ui-datepicker-calendar td.ui-state-disabled span, .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable span {
  color: #cdd3dd;
}
/* ---- Bound the sticky gallery to the columns (stops it before "Complete the Rig") ---- */
.single-product .play-cols {
  display: flow-root;
}
/* =========================================================
   BATCH 7B — Archive product card
   Applies to shop, category, related, AND up-sell loops
   (every ul.products li.product). Matches mockup .pcard.
   ========================================================= */
ul.products li.product {
  position: relative;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
ul.products li.product:hover {
  box-shadow: 0 14px 34px -18px rgba(14, 17, 22, 0.25);
}
/* image panel — square, padded, contained */
ul.products li.product .woocommerce-loop-image-link {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: #fff;
  padding: 22px;
  border-bottom: 1px solid var(--play-line);
}
ul.products li.product .woocommerce-loop-image-link img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0;
  object-fit: contain;
  border-radius: 0;
  transition: transform 0.4s ease;
}
ul.products li.product:hover .woocommerce-loop-image-link img {
  transform: scale(1.05);
}
/* available badge (injected) */
.play-card-avail {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #2f9e6b;
  background: #fff;
  border: 1px solid #d6eade;
  border-radius: 20px;
  padding: 5px 9px;
}
.play-card-avail::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2f9e6b;
}
/* body */
ul.products li.product .product-details {
  padding: 4px 18px 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: transparent !important;
}
.play-card-cat {
  display: block;
  padding: 16px 18px 0;
  margin: 0;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--play-blue);
  font-weight: 700;
}
ul.products li.product .woocommerce-loop-product__title {
  font-family: "Montserrat", sans-serif;
  font-size: 0.96rem !important;
  font-weight: 600 !important;
  line-height: 1.3;
  margin: 2px 0 8px !important;
  padding: 0 !important;
}
ul.products li.product .woocommerce-loop-product__title a {
  color: var(--play-graphite);
  text-decoration: none;
}
/* spec strip (injected) */
.play-card-spec {
  font-family: var(--play-mono);
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8a93a1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.play-card-spec span + span::before {
  content: "·";
  margin-right: 5px;
  color: #c0c7d1;
}
/* price — Bebas with /day suffix, pinned to bottom of body */
ul.products li.product .price {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.7rem !important;
  font-weight: 400 !important;
  color: var(--play-graphite) !important;
  margin: 0;
  margin-top: auto;
  margin-bottom: 0 !important;
  display: block;
}
ul.products li.product .price .woocommerce-Price-amount {
  font-weight: 400;
}
ul.products li.product .price::after {
  content: " /day";
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #5b6675;
}
/* actions: reservation button + quote link (link styled as button; injected quote) */
ul.products li.product .play-card-add, ul.products li.product .add_to_cart_button, ul.products li.product .button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  box-sizing: border-box;
  margin: 14px 0 0;
  padding: 12px 18px;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
ul.products li.product .play-card-add:hover, ul.products li.product .add_to_cart_button:hover, ul.products li.product .button:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
.play-card-quote {
  display: block;
  text-align: center;
  margin: 6px 0 0;
  padding: 4px 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--play-blue) !important;
  text-decoration: none;
}
.play-card-quote:hover {
  text-decoration: underline;
}
/* disable Kadence "reveal actions on hover": keep button + quote always visible, no roll-up */
ul.products li.product .product-action-wrap {
  position: static !important;
  opacity: 1 !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  padding: 0 18px 18px !important;
  transition: none !important;
}
ul.products li.product:hover .entry-content-wrap, ul.products li.product:focus-within .entry-content-wrap {
  transform: none !important;
}
/* hide Kadence archive excerpt — the card doesn't show it */
ul.products li.product .product-excerpt {
  display: none;
}
/* =========================================================
   BATCH 7C — Category tiles (Rental Shop landing)
   Shop landing shows category tiles, not products.
   WooCommerce gives each tile BOTH .product-category and
   .product, so the 7B shell (border + radius) already
   applies; these rules override only what differs.
   Matches mockup .ccard (play2-shop.html).
   ========================================================= */
/* tile shell — override 7B padding:0 with the mockup's 24px inset + lift-on-hover */
ul.products li.product-category {
  padding: 24px;
  background: #fff;
}
ul.products li.product-category:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -28px rgba(43, 108, 176, 0.35);
  border-color: #c9d4e6;
}
/* the whole tile is one link wrapping image + title + injected blurb/arrow */
ul.products li.product-category a {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* contained category image, no full-bleed panel (categories have no .woocommerce-loop-image-link) */
ul.products li.product-category img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0 0 14px;
  transition: transform 0.4s ease;
}
/* title — Bebas, uppercase, graphite (beats Kadence's 1em/500 category-title rule) */
ul.products li.product-category .woocommerce-loop-category__title {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 1.45rem !important;
  font-weight: 400 !important;
  line-height: 1;
  text-transform: uppercase;
  color: var(--play-graphite) !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* hide the product count after the title (mockup shows none) */
ul.products li.product-category .woocommerce-loop-category__title .count, ul.products li.product-category mark.count {
  display: none !important;
}
/* injected blurb + View arrow */
.play-cat-blurb {
  font-size: 0.76rem;
  color: #5b6675;
  line-height: 1.5;
  margin: 4px 0 0;
}
.play-cat-go {
  margin-top: 12px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
}
/* on the category-tile landing there are no products to count or sort */
.post-type-archive-product .woocommerce-result-count, .post-type-archive-product .woocommerce-ordering {
  display: none;
}
/* --- 7C follow-ons: backgrounds + responsive --- */
/* shop + category archives: light-gray page everywhere, seamless hero (mockup --paper #f3f5f8) */
body.woocommerce-shop, body.tax-product_cat, body.woocommerce-shop .content-area, body.tax-product_cat .content-area, body.woocommerce-shop .content-container, body.tax-product_cat .content-container {
  background: #f3f5f8;
}
/* --- 7C follow-ups: hover line, seamless gray canvas, intro line --- */
/* 3px blue line that wipes across the top of each tile on hover (mockup .ccard::before) */
ul.products li.product-category::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--play-blue);
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 4;
}
ul.products li.product-category:hover::before {
  width: 100%;
}
/* Shop landing: DARK hero band (mockup .pb #0e1116) over a light-gray content
   canvas so the white tiles/cards pop. Covers shop + category archives. */
.woocommerce.archive .product-archive-hero-section, .woocommerce.archive .product-archive-hero-section .entry-hero-container-inner, .woocommerce.archive .product-archive-hero-section .hero-section-overlay {
  background: #0e1116 !important;
}
.woocommerce.archive .product-archive-title .page-title {
  color: #fff !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: clamp(2.8rem, 6vw, 5rem) !important;
}
.woocommerce.archive .kadence-breadcrumbs, .woocommerce.archive .kadence-breadcrumbs a, .woocommerce.archive .kadence-breadcrumbs span {
  color: #7d8a9b !important;
}
/* hero spacing — match mockup .pb (no 200px min-height centering; padding 58/50,
   breadcrumb margin-bottom 10, title margin 0). The breadcrumb inherits Kadence's
   1.65 line-height, which was inflating the gap below it — zero it on the nav and
   container so the 10px margin is the actual gap. */
.woocommerce.archive .entry-hero-container-inner .entry-header {
  min-height: 0 !important;
  justify-content: flex-start;
  padding: 58px 0 50px !important;
  margin-bottom: 0 !important;
}
.woocommerce.archive .product-archive-title .kadence-breadcrumbs {
  margin: 0 0 14px !important;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1 !important;
}
.woocommerce.archive .product-archive-title .kadence-breadcrumb-container {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
/* content below the hero = brand-gray canvas (flatten the boxed shadow/border) */
.woocommerce.archive main.wrap, .woocommerce.archive .content-area, .woocommerce.archive .content-container {
  background: #f3f5f8 !important;
}
.woocommerce.archive .content-container {
  box-shadow: none !important;
  border: 0 !important;
}
/* intro line — inserted under the title in the hero header, grey on dark */
.play-shop-intro {
  max-width: 62ch;
  margin: 10px 0 0;
  color: #b7c0cd;
  font-size: 1.05rem;
  line-height: 1.6;
}
/* =========================================================
   Batch 8F — Cart + Checkout chrome  (rev 2)
   Authority: play2-cart.html. Kadence lays both pages out
   two-column; this styles components to the mockup: white
   .summary card, clean inputs, .pay radio cards, blue block
   CTAs, mono dates, redundant plugin rows hidden.
   Home: ASE → Custom Code → Custom CSS. Purge FlyingPress.
   ========================================================= */
/* ---- seamless light-gray canvas (same move as 7C archives) ---- */
body.woocommerce-cart, body.woocommerce-checkout {
  background: #f3f5f8;
}
.woocommerce-cart .entry-content-wrap, .woocommerce-checkout .entry-content-wrap {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* ---- clean form inputs (cart coupon + checkout billing/venue/times) ---- */
.woocommerce-page .input-text, .woocommerce-page select, .woocommerce-page textarea, .woocommerce-page .select2-selection {
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--play-graphite);
}
.woocommerce-page .input-text {
  padding: 0.7rem 0.85rem;
}
.woocommerce-page .input-text:focus, .woocommerce-page select:focus, .woocommerce-page textarea:focus {
  border-color: var(--play-blue) !important;
  outline: none;
  box-shadow: 0 0 0 1px var(--play-blue);
}
.woocommerce-checkout .form-row label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--play-graphite);
}
/* =========================================================
   Shared summary card — Cart Totals + Checkout "Your Order"
   ========================================================= */
.woocommerce-cart .cart_totals, .woocommerce-checkout #order_review {
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 16px;
  padding: 26px;
  position: sticky;
  top: 96px;
}
.woocommerce-cart .cart_totals h2, .woocommerce-checkout #order_review h3, .woocommerce-checkout #order_review_heading {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--play-graphite);
}
/* summary rows → .sline (WooCommerce totals are <tr><th>label</th><td>value</td>) */
.woocommerce-cart .cart_totals table, .woocommerce-checkout .woocommerce-checkout-review-order-table {
  border: 0;
  margin: 0;
  background: transparent;
}
.woocommerce-cart .cart_totals th, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
  font-weight: 400;
  color: #5b6675;
  font-size: 0.88rem;
  text-align: left;
  padding: 8px 0;
  border: 0;
  background: transparent;
}
.woocommerce-cart .cart_totals td, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  color: var(--play-graphite);
  font-weight: 600;
  font-size: 0.88rem;
  text-align: right;
  padding: 8px 0;
  border: 0;
  background: transparent;
}
/* the real Total row (first .order-total) gets the ruled emphasis */
.woocommerce-cart .cart_totals tr.order-total th, .woocommerce-cart .cart_totals tr.order-total td, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-top: 1px solid var(--play-line);
  padding-top: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--play-graphite);
}
/* HIDE the plugin's redundant injected rows: Payable Today / Future Payments /
   the phantom "Total Cart Amounts" all render as tr.order-total, so hide every
   .order-total that FOLLOWS the first (real Total). The split shows in the
   pay-choice card instead, per mockup. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total ~ tr.order-total {
  display: none !important;
}
/* =========================================================
   Shared booking meta (cart items + checkout review line):
   mono dates, hide the wrong "Per Day Price" line
   ========================================================= */
.woocommerce-page dl.variation {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  color: #5b6675;
  line-height: 1.55;
}
.woocommerce-page dl.variation dt {
  font-weight: 600;
  display: inline;
  margin-right: 0.35rem;
}
.woocommerce-page dl.variation dd {
  display: inline;
  margin: 0;
}
.woocommerce-page dl.variation dd::after {
  content: "";
  display: block;
}
.woocommerce-page dl.variation .variation-StartDate, .woocommerce-page dl.variation .variation-EndDate, .woocommerce-page dl.variation .variation-NoofDays {
  font-family: var(--play-mono);
}
.woocommerce-page .variation-PerDayPrice {
  display: none !important;
}
/* wrong figure; not in mockup */
/* No. of Days is derivable from the two dates directly above it, and it reads
   as a third fact rather than a restatement. Cart and checkout only - the
   emails and My Account render .wc-item-meta, governed separately. */
.woocommerce-cart .variation-NoofDays, .woocommerce-checkout .variation-NoofDays {
  display: none !important;
}
/* Edit Booking trigger (bkap) → compact outline, not a big blue button */
.woocommerce-page a.bkap_edit_bookings_class, .woocommerce-page .bkap_edit_bookings_class, .woocommerce-page a.bkap-edit-bookings {
  display: inline-block !important;
  width: auto !important;
  margin: 0.4rem 0 0 !important;
  padding: 0.4rem 0.8rem !important;
  height: auto !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--play-blue) !important;
  background: #fff !important;
  border: 1.5px solid var(--play-line) !important;
  border-radius: 8px !important;
}
.woocommerce-page a.bkap_edit_bookings_class:hover {
  border-color: var(--play-blue) !important;
}
/* =========================================================
   CART: line items (styled in place — no grid restructure)
   ========================================================= */
.woocommerce-cart table.cart {
  border: 0;
  background: transparent;
}
.woocommerce-cart table.cart thead {
  display: none;
}
.woocommerce-cart table.cart tr.cart_item {
  border-bottom: 1px solid var(--play-line);
}
.woocommerce-cart table.cart tr.cart_item td {
  border: 0;
  vertical-align: middle;
  padding: 16px 10px;
}
.woocommerce-cart td.product-thumbnail img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 10px;
  padding: 8px;
}
.woocommerce-cart td.product-name a {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--play-graphite);
}
.woocommerce-cart td.product-price {
  display: none;
}
.woocommerce-cart td.product-subtotal {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.5rem;
  color: var(--play-graphite);
  text-align: right;
}
/* =========================================================
   CHECKOUT: order-review line item — de-gray, match card
   ========================================================= */
.woocommerce-checkout-review-order-table thead {
  display: none;
}
/* mockup has no Product/Subtotal header */
.woocommerce-checkout-review-order-table tbody td, .woocommerce-checkout-review-order-table tbody th, .woocommerce-checkout-review-order-table tbody tr {
  background: transparent !important;
  border: 0 !important;
}
.woocommerce-checkout-review-order-table tbody td.product-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--play-graphite);
  padding: 0 0 14px;
}
.woocommerce-checkout-review-order-table tbody td.product-total {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.35rem;
  color: var(--play-graphite);
  text-align: right;
  padding: 0 0 14px;
}
.woocommerce-checkout-review-order-table tbody tr.cart_item {
  border-bottom: 1px solid var(--play-line) !important;
}
/* 9A Event Dates box → white card, consistent with summary */
.play-event-dates {
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 1.25rem;
}
/* =========================================================
   Blue block CTAs — Proceed to Checkout + Place Order
   ========================================================= */
.woocommerce-cart .checkout-button.button.alt, .woocommerce-checkout #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  height: 3.15rem;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.woocommerce-checkout #place_order {
  margin-top: 1rem;
}
.woocommerce-cart .checkout-button.button.alt:hover, .woocommerce-checkout #place_order:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
/* =========================================================
   CHECKOUT: deposit pay-choice → .pay cards + split + balance note
   ========================================================= */
ul.payment-plan-options {
  list-style: none;
  margin: 1.1rem 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
ul.payment-plan-options li.payment-plan {
  border: 1px solid var(--play-line);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  transition: 0.2s;
}
ul.payment-plan-options li.payment-plan:has(input:checked) {
  border-color: var(--play-blue);
  box-shadow: 0 0 0 1px var(--play-blue);
  background: #f7fbff;
}
ul.payment-plan-options li.payment-plan input {
  accent-color: var(--play-blue);
  margin-top: 2px;
}
/* split amounts (Payable Today / Future Payments) */
.deposit-info {
  margin: 1rem 0 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: #5b6675;
}
.deposit-info strong {
  color: var(--play-graphite);
}
.deposit-info #pay-today {
  margin: 0.15rem 0 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.4rem;
  color: var(--play-graphite);
}
.deposit-info #pay-future {
  margin: 0.15rem 0 0;
  background: #fdf6e9;
  border: 1px solid #f0e0bf;
  border-radius: 8px;
  padding: 10px 12px;
  color: #8a6516;
  font-size: 0.78rem;
  line-height: 1.5;
}
/* Stripe element + save-card note */
.woocommerce-checkout .wc-stripe-upe-element {
  margin-top: 0.6rem;
}
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew {
  font-size: 0.8rem;
  color: #5b6675;
}
/* =========================================================
   Batch 8F.2 — Checkout field styling + summary row hides
   Adds: designed form fields (was raw gray blocks), hide the
   3 redundant deposit rows the plugin renders as extra
   tr.order-total (Payable Today / Future Payments / phantom
   Total Cart Amounts), and hide the wrong per-day line.
   ========================================================= */
/* ---- Form fields: white fill, line border, blue focus ---- */
/* Covers billing, venue (.play-venue-times), and the type="time" pickers —
   all render as .input-text; plus selects and the order notes textarea. */
.woocommerce-checkout .input-text, .woocommerce-checkout textarea.input-text, .woocommerce-checkout select, .woocommerce-checkout .select2-selection {
  width: 100%;
  box-sizing: border-box;
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
  padding: 0.72rem 0.85rem !important;
  font-size: 0.92rem;
  color: var(--play-graphite);
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.woocommerce-checkout textarea.input-text {
  min-height: 6.5rem;
  line-height: 1.5;
}
/* select2 (State) matches height */
.woocommerce-checkout .select2-container .select2-selection--single {
  height: auto !important;
  padding: 0.5rem 0.85rem !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5;
  color: var(--play-graphite);
  padding: 0;
}
/* focus ring */
.woocommerce-checkout .input-text:focus, .woocommerce-checkout textarea.input-text:focus, .woocommerce-checkout select:focus, .woocommerce-checkout .select2-container--open .select2-selection--single {
  border-color: var(--play-blue) !important;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.25) !important;
  outline: 0;
}
/* placeholders */
.woocommerce-checkout .input-text::placeholder {
  color: #9aa4b2;
}
/* field labels + spacing */
.woocommerce-checkout .form-row label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin-bottom: 0.4rem;
}
.woocommerce-checkout .form-row {
  margin-bottom: 1.1rem;
}
/* section headings — scoped to our sections only (NOT a blanket h3, which
   was catching Stripe's injected "Payment options" title). 8F.4 refines these. */
.woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout .woocommerce-additional-fields > h3 {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 1.75rem 0 1rem;
}
/* time pickers keep the native clock icon but sit in the styled box */
.woocommerce-checkout input[type="time"].input-text {
  min-height: 2.9rem;
}
/* ---- Summary: hide the 3 redundant deposit rows ----
   Plugin reuses tr.order-total for Total + Payable Today + Future Payments
   + Total Cart Amounts. Keep the first (real Total); hide the rest.
   The split shows in the pay-choice card instead, per mockup. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total ~ tr.order-total {
  display: none !important;
}
/* ---- Per-day line hide (reinforce; bkap dl.variation) ---- */
.woocommerce-cart .variation-PerDayPrice, .woocommerce-checkout .variation-PerDayPrice {
  display: none !important;
}
/* =========================================================
   Batch 8F.3 — Checkout "Your Order" table: kill Kadence's
   gray fill so the white summary card shows through, and
   style the review line item + booking dates to match.
   ========================================================= */
/* Kadence paints .shop_table cells with --global-palette8 (gray).
   Make the review table + all its cells transparent. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table, .woocommerce-checkout table.woocommerce-checkout-review-order-table thead th, .woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr, .woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td, .woocommerce-checkout table.woocommerce-checkout-review-order-table tbody th, .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr, .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td, .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
  background: transparent !important;
  background-color: transparent !important;
  border: 0;
}
/* header row (Product / Subtotal) → small grey caps with a hairline */
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b6675;
  padding: 0 0 0.7rem;
  border-bottom: 1px solid var(--play-line) !important;
}
/* line item */
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--play-graphite);
  padding: 14px 0;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.35rem;
  color: var(--play-graphite);
  text-align: right;
  vertical-align: top;
  padding: 14px 0;
}
/* booking dates in the review item → mono, grey (per-day already hidden) */
.woocommerce-checkout dl.variation {
  margin: 0.35rem 0 0;
  font-size: 0.74rem;
  color: #5b6675;
  line-height: 1.55;
}
.woocommerce-checkout dl.variation dt {
  font-weight: 600;
  display: inline;
  margin-right: 0.35rem;
}
.woocommerce-checkout dl.variation dd {
  display: inline;
  margin: 0;
}
.woocommerce-checkout dl.variation .variation-StartDate, .woocommerce-checkout dl.variation .variation-EndDate, .woocommerce-checkout dl.variation .variation-NoofDays {
  font-family: var(--play-mono);
}
/* Edit Booking button in the review → compact outline (matches cart) */
.woocommerce-checkout .bkap_edit_bookings, .woocommerce-checkout a.bkap_edit_bookings_class {
  display: inline-block;
  margin: 0.5rem 0 0.2rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--play-blue);
  border: 1.5px solid var(--play-line);
  border-radius: 8px;
  background: #fff;
}
.woocommerce-checkout .bkap_edit_bookings:hover {
  border-color: var(--play-blue);
}
/* =========================================================
   Batch 8F.4 — Checkout field layout + polish, cart line item
   Replaces WooCommerce float columns with a flex grid (fixes
   venue contact name, phone/email pairing, time grid), dedupes
   the card-saved message, restyles login/coupon prompts,
   unifies headings, and restructures the cart line item.
   ========================================================= */
/* ---- Two-column field grid (kills float bugs) ---- */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper, .woocommerce-checkout .play-venue-times {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4%;
  row-gap: 0;
  align-items: flex-start;
}
.woocommerce-checkout .play-venue-times > h3 {
  flex: 0 0 100%;
  max-width: 100%;
}
.woocommerce-checkout .form-row {
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto;
}
.woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last {
  flex: 0 0 48%;
  max-width: 48%;
}
.woocommerce-checkout .form-row-wide, .woocommerce-checkout .form-row.notes, .woocommerce-checkout .form-row.form-row-wide, .woocommerce-checkout .play-venue-times .form-row.notes {
  flex: 0 0 100%;
  max-width: 100%;
}
/* wrapping labels (venue + times) get a reserved height so inputs align */
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row label, .woocommerce-checkout .play-venue-times .form-row label {
  min-height: 2.5em;
  line-height: 1.25;
}
/* time pickers: full-width inside their 48% column */
.woocommerce-checkout input[type="time"].input-text {
  width: 100%;
}
/* ---- Card-saved: keep the visible checkbox (Tony's preference). Styled as a
   clean row in 8F.5. Stripe's own mandate stays as the fine print below it. ---- */
/* ---- Returning-customer + coupon prompts → clean notice cards ---- */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info, .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: #fff;
  border: 1px solid var(--play-line);
  border-left: 3px solid var(--play-blue);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 0 1.1rem;
  color: #3a4452;
  font-size: 0.9rem;
  box-shadow: 0 1px 2px rgba(14, 17, 22, 0.04);
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a, .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--play-blue);
  font-weight: 700;
  text-decoration: none;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a:hover, .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a:hover {
  color: var(--play-blue-hover);
  text-decoration: underline;
}
/* ---- Section headings: one treatment, consistent spacing ---- */
.woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout .woocommerce-shipping-fields > h3, .woocommerce-checkout #ship-to-different-address, .woocommerce-checkout .play-venue-times > h3, .woocommerce-checkout #order_review_heading {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 2rem 0 1.1rem;
  line-height: 1;
}
.woocommerce-checkout .woocommerce-billing-fields > h3 {
  margin-top: 0;
}
/* =========================================================
   Cart line item → mockup .citem row (deferred restructure)
   ========================================================= */
.woocommerce-cart table.cart tr.cart_item {
  display: grid;
  grid-template-columns: 22px 84px 1fr auto auto;
  gap: 0 16px;
  align-items: center;
  padding: 18px 0;
}
.woocommerce-cart table.cart tr.cart_item td {
  padding: 0;
  border: 0;
}
.woocommerce-cart td.product-remove {
  grid-column: 1;
}
.woocommerce-cart td.product-remove a {
  color: #b23;
  font-size: 1.1rem;
  text-decoration: none;
}
.woocommerce-cart td.product-thumbnail {
  grid-column: 2;
}
.woocommerce-cart td.product-name {
  grid-column: 3;
}
.woocommerce-cart td.product-quantity {
  grid-column: 4;
}
.woocommerce-cart td.product-subtotal {
  grid-column: 5;
  text-align: right;
}
.woocommerce-cart td.product-price {
  display: none;
}
/* compact qty stepper in the row */
.woocommerce-cart td.product-quantity .quantity {
  display: inline-flex;
  align-items: center;
}
.woocommerce-cart td.product-quantity .quantity input.qty {
  width: 2.6rem;
  height: 2.4rem;
  text-align: center;
  border: 1px solid var(--play-line);
  border-radius: 6px;
  background: #fff;
}
/* (8F.4's mobile cart stack removed - superseded by 8G.6 in PLAY - CSS Responsive) */
/* =========================================================
   Batch 8F.5 — Cart qty stepper (match product page),
   shipping row cleanup, order-summary type hierarchy,
   visible save-card checkbox row.
   ========================================================= */
/* ---- Cart quantity → the product page's connected pill stepper ---- */
.woocommerce-cart td.product-quantity .quantity {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.woocommerce-cart td.product-quantity .quantity button, .woocommerce-cart td.product-quantity .quantity [class*="minus"], .woocommerce-cart td.product-quantity .quantity [class*="plus"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: #f3f5f8 !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 0 !important;
  color: var(--play-graphite) !important;
  font-size: 1.1rem;
  line-height: 1;
  margin: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}
.woocommerce-cart td.product-quantity .quantity input.qty {
  height: 2.5rem;
  width: 3rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--play-line) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
}
.woocommerce-cart td.product-quantity .quantity button:first-of-type, .woocommerce-cart td.product-quantity .quantity [class*="minus"] {
  border-right: 0 !important;
  border-radius: 8px 0 0 8px !important;
}
.woocommerce-cart td.product-quantity .quantity button:last-of-type, .woocommerce-cart td.product-quantity .quantity [class*="plus"] {
  border-left: 0 !important;
  border-radius: 0 8px 8px 0 !important;
}
.woocommerce-cart td.product-quantity .quantity button:hover, .woocommerce-cart td.product-quantity .quantity [class*="minus"]:hover, .woocommerce-cart td.product-quantity .quantity [class*="plus"]:hover {
  background: #e9eef5 !important;
}
/* ---- Shipping row: hide the address readout + "Change address" link ---- */
.woocommerce .woocommerce-shipping-destination, .woocommerce a.shipping-calculator-button, .woocommerce .shipping-calculator-button {
  display: none !important;
}
/* ---- Order-summary type hierarchy ----
   Only "Your Order" (#order_review_heading) is the big Bebas heading.
   Retainer option = normal bold; Stripe "Payment options" = small label. */
.woocommerce-checkout ul.payment-plan-options li.payment-plan, .woocommerce-checkout ul.payment-plan-options li.payment-plan label {
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: var(--play-graphite);
}
/* Stripe's injected "Payment options" title → small grey label (best-effort
   selectors; if one misses, grab the live class and we lock it) */
.woocommerce-checkout #payment h3, .woocommerce-checkout #payment h4, .woocommerce-checkout #payment .wc-stripe-checkout-heading, .woocommerce-checkout #payment [class*="ClassicTitle"], .woocommerce-checkout #payment [class*="classic-title"] {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #5b6675 !important;
  margin: 1.25rem 0 0.6rem !important;
}
.woocommerce-checkout .deposit-info strong {
  font-size: 0.82rem;
  font-weight: 700;
}
/* keep Payable Today amount prominent but not heading-sized */
.woocommerce-checkout .deposit-info #pay-today {
  font-size: 1.3rem;
}
/* ---- Save-card checkbox: clean visible row ---- */
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew {
  display: flex !important;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding: 12px 14px;
  background: #f7fbff;
  border: 1px solid #d6e4f5;
  border-radius: 10px;
}
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew input {
  margin-top: 2px;
  accent-color: var(--play-blue);
}
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew label {
  font-size: 0.82rem;
  color: #3a4452;
  line-height: 1.5;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
/* =========================================================
   Batch 8F.6 — Cart page polish
   Hero spacing to match Rental Shop, white date fields,
   readable coupon field, shipping amount alignment, tax code
   on one line, booking dates back to Montserrat, cart intro.
   ========================================================= */
/* ---- Page-title hero spacing is now handled by the ONE canonical title-bar
   block at the end of this file (8F.8), applied site-wide. ---- */
/* intro blurb under the title (injected by snippet; styled like .play-shop-intro) */
.play-cart-intro {
  max-width: 62ch;
  margin: 10px 0 0;
  color: #b7c0cd;
  font-size: 1.05rem;
  line-height: 1.6;
}
/* ---- Booking meta: Montserrat, not mono (we only use Bebas + Montserrat) ---- */
.woocommerce dl.variation, .woocommerce dl.variation dt, .woocommerce dl.variation dd, .woocommerce dl.variation .variation-StartDate, .woocommerce dl.variation .variation-EndDate, .woocommerce dl.variation .variation-NoofDays {
  font-family: "Montserrat", sans-serif !important;
}
/* ---- 9A Event Dates: white bordered fields + Title Case labels ---- */
.play-event-dates input[type="date"] {
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  color: var(--play-graphite);
  font-size: 0.95rem;
  box-shadow: none;
}
.play-event-dates input[type="date"]:focus {
  border-color: var(--play-blue) !important;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.25);
  outline: 0;
}
.play-event-dates label {
  text-transform: capitalize;
}
/* ---- Coupon field: white, bordered, darker placeholder ---- */
.woocommerce-cart #coupon_code {
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 8px;
  padding: 0.72rem 0.85rem;
}
.woocommerce-cart #coupon_code::placeholder {
  color: #6b7480;
  opacity: 1;
}
/* ---- Shipping row: right-align the amount, normal weight (it lives in a ul>li>label) ---- */
.woocommerce-cart .cart_totals tr.shipping td, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping td {
  text-align: right;
}
.woocommerce-cart .cart_totals tr.shipping .woocommerce-shipping-methods, .woocommerce-cart .cart_totals tr.shipping .woocommerce-shipping-methods li, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping .woocommerce-shipping-methods, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping .woocommerce-shipping-methods li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
.woocommerce-cart .cart_totals tr.shipping label, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping label {
  display: inline;
  font-weight: 400 !important;
  color: var(--play-graphite);
}
.woocommerce-cart .cart_totals tr.shipping .amount, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping .amount {
  font-weight: 400;
}
/* ---- Sales Tax (2711) on one line ---- */
.woocommerce-cart .cart_totals tr.tax-rate th, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.tax-rate th {
  white-space: nowrap;
}
/* ---- Hidden native shipping name fields (from the venue snippet) ---- */
.woocommerce-checkout .play-hidden-field {
  display: none !important;
}
/* =========================================================
   Batch 8F.7 — Cart notices, empty state, coupon button
   ========================================================= */
/* ---- Cart notices (added / removed) → clean cards, no overflow ---- */
.woocommerce-cart .woocommerce-message, .woocommerce-cart .woocommerce-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  background: #fff;
  border: 1px solid var(--play-line);
  border-left: 3px solid var(--play-blue);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 1.5rem;
  color: #3a4452;
  font-size: 0.95rem;
  box-shadow: 0 1px 2px rgba(14, 17, 22, 0.04);
  list-style: none;
  overflow: hidden;
}
.woocommerce-cart .woocommerce-message {
  border-left-color: var(--play-blue);
}
.woocommerce-cart .woocommerce-message::before, .woocommerce-cart .woocommerce-info::before {
  content: none !important;
  display: none !important;
}
/* the notice's button (Continue Shopping / Undo) sits inline on the right, never floats off */
.woocommerce-cart .woocommerce-message .button, .woocommerce-cart .woocommerce-info .button {
  float: none !important;
  margin: 0 0 0 auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  padding: 0.55rem 1.1rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  white-space: nowrap;
}
.woocommerce-cart .woocommerce-message .button:hover, .woocommerce-cart .woocommerce-info .button:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
/* inline "Undo?" link stays a text link, not a button */
.woocommerce-cart .woocommerce-message a.restore-item {
  background: none !important;
  border: 0 !important;
  color: var(--play-blue) !important;
  padding: 0 !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  margin-left: 0.3rem;
}
/* ---- Empty cart: readable message + blue Return to Shop ---- */
.woocommerce-cart .cart-empty, .woocommerce-cart .wc-empty-cart-message {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--play-graphite);
  margin: 2.5rem 0 1.25rem;
  background: none;
  border: 0;
  padding: 0;
}
.woocommerce-cart .cart-empty::before, .woocommerce-cart .wc-empty-cart-message::before {
  content: none !important;
  display: none !important;
}
.woocommerce-cart .return-to-shop {
  text-align: center;
  margin: 0 0 3rem;
}
.woocommerce-cart .return-to-shop .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  padding: 0.8rem 1.6rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
}
.woocommerce-cart .return-to-shop .button:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
/* ---- Apply Coupon button: muted until >3 chars, then blue (active) ---- */
.woocommerce-cart button[name="apply_coupon"] {
  background: #eef1f5 !important;
  color: #5b6675 !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
  padding: 0.72rem 1.1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  box-shadow: none;
}
.woocommerce-cart button[name="apply_coupon"].play-coupon-ready {
  background: var(--play-blue) !important;
  color: #fff !important;
  border-color: var(--play-blue) !important;
}
.woocommerce-cart button[name="apply_coupon"].play-coupon-ready:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
/* =========================================================
   Batch 8F.8 — ONE canonical page-title bar, site-wide.
   Every page + archive uses Kadence's .entry-hero component;
   this is the single source of truth so cart, checkout, shop,
   Our Process, About — every title bar — is identical.
   Spacing = Rental Shop's (58/50, top-aligned). Title = the
   Reservation Cart Bebas clamp. Supersedes the scoped copies.
   ========================================================= */
/* dark band everywhere */
.entry-hero.page-hero-section, .entry-hero.page-hero-section .entry-hero-container-inner, .entry-hero .hero-section-overlay, .woocommerce.archive .product-archive-hero-section, .woocommerce.archive .product-archive-hero-section .entry-hero-container-inner, .woocommerce.archive .product-archive-hero-section .hero-section-overlay {
  background: #0e1116 !important;
}
/* header: tight top/bottom padding (Rental Shop spacing). Horizontal alignment
   is left to Kadence's own title-align setting so the title sits at the content
   margin like the shop — forcing it here shoved it to the container edge. */
.entry-hero-container-inner .entry-header, .woocommerce.archive .entry-hero-container-inner .entry-header {
  min-height: 0 !important;
  padding: 58px 0 50px !important;
  margin-bottom: 0 !important;
}
/* breadcrumb: one spacing everywhere */
.entry-hero-container-inner .kadence-breadcrumb-container, .woocommerce.archive .product-archive-title .kadence-breadcrumb-container, .woocommerce.archive .product-archive-title .kadence-breadcrumbs {
  margin: 0 0 12px !important;
  padding: 0 !important;
  line-height: 1 !important;
}
/* title: the Reservation Cart Bebas clamp look */
.entry-hero .entry-title, .entry-header.page-title .entry-title, .woocommerce.archive .product-archive-title .page-title, .woocommerce.archive .product-archive-title .entry-title {
  font-family: "Bebas Neue", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(2.8rem, 6vw, 5rem) !important;
  letter-spacing: 0.01em !important;
  line-height: 0.92 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* intro line identical on cart + shop */
.play-cart-intro, .play-shop-intro {
  max-width: 62ch !important;
  margin: 14px 0 0 !important;
  color: #b7c0cd !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}
/* =========================================================
   Batch 8F.9 — content shadow, shipping amount alignment,
   breadcrumb hover scoping
   ========================================================= */
/* ---- Remove Kadence's boxed content shadow at the page bottom ---- */
.woocommerce-cart .content-bg, .woocommerce-cart article.content-bg.single-entry, .woocommerce-checkout .content-bg, .woocommerce-checkout article.content-bg.single-entry {
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
}
/* ---- Shipping amount: force right-aligned + normal weight (it lives in a
   ul>li>label, which dodged the earlier rules) ---- */
.woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals td, .woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals td *, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td * {
  text-align: right !important;
  font-weight: 600 !important;
  float: none !important;
}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals ul, .woocommerce-cart .cart_totals tr.woocommerce-shipping-totals li, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals ul, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
/* ---- Breadcrumb hover: WHITE only inside the page-title hero (dark band).
   Everywhere else (e.g. single product on light bg) stays blue + readable. ---- */
.entry-hero-container-inner .kadence-breadcrumb-container a:hover, .entry-hero-container-inner .kadence-breadcrumb-container a:hover span, .woocommerce.archive .product-archive-title .kadence-breadcrumb-container a:hover, .woocommerce.archive .product-archive-title .kadence-breadcrumb-container a:hover span {
  color: #ffffff !important;
}
/* =========================================================
   Batch 8F.10 — Hero breadcrumb readability
   HOME link was using a grey meant for light backgrounds;
   lighten links + current within the dark page-title band.
   (Hover-to-white is handled in 8F.9; non-hero breadcrumbs
   keep their darker grey + blue hover.)
   ========================================================= */
.entry-hero-container-inner .kadence-breadcrumb-container a, .entry-hero-container-inner .kadence-breadcrumb-container a span, .entry-hero-container-inner .kadence-breadcrumb-container .kadence-bread-current, .woocommerce.archive .product-archive-title .kadence-breadcrumb-container a, .woocommerce.archive .product-archive-title .kadence-breadcrumb-container a span, .woocommerce.archive .product-archive-title .kadence-breadcrumb-container .kadence-bread-current {
  color: #9aa4b2 !important;
}
/* =========================================================
   Batch 8F.11 — shipping label one line + empty-cart centering
   ========================================================= */
/* "Delivery & Takeaway" stays on one line */
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th {
  white-space: nowrap;
}
/* Empty cart message: the text is in a DIV.cart-empty.woocommerce-info inside
   .wc-empty-cart-message (not a <p>) — earlier p.cart-empty rules missed it.
   Center it, make it readable, strip the notice-card box. */
.woocommerce-cart .wc-empty-cart-message, .woocommerce-cart .cart-empty, .woocommerce-cart .cart-empty.woocommerce-info {
  display: block !important;
  text-align: center !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  line-height: 1.4 !important;
  color: var(--play-graphite) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.woocommerce-cart .wc-empty-cart-message {
  margin: 3rem 0 1.25rem !important;
}
.woocommerce-cart .cart-empty {
  margin: 0 !important;
}
.woocommerce-cart .cart-empty::before, .woocommerce-cart .wc-empty-cart-message::before {
  content: none !important;
  display: none !important;
}
/* =========================================================
   Batch 8F.12 — breadcrumb margin (the fix for the title jump)
   The inner .kadence-breadcrumbs on non-archive pages carried a
   different default margin than the shop's, shifting the title
   down/right. Match it site-wide. (Diagnosed by Tony.)
   ========================================================= */
.kadence-breadcrumbs {
  margin: 0 0 12px;
}
/* =========================================================
   Batch 8G — Checkout polish (pairs with the fields snippet)
   ========================================================= */
/* Section headings read as headings */
.woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout .woocommerce-additional-fields > h3, .woocommerce-checkout .woocommerce-shipping-fields > h3, .woocommerce-checkout #ship-to-different-address, .woocommerce-checkout .play-venue-times > h3, .woocommerce-checkout .play-notes-heading, .woocommerce-checkout #order_review_heading {
  font-size: 1.95rem !important;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 2.4rem 0 1.15rem !important;
}
.woocommerce-checkout .woocommerce-billing-fields > h3 {
  margin-top: 0 !important;
}
/* Uniform field spacing across all sections (drop the min-height hack) */
.woocommerce-checkout .form-row {
  margin: 0 0 1.15rem !important;
  padding: 0;
}
.woocommerce-checkout .form-row label {
  min-height: 0 !important;
  margin: 0 0 0.42rem !important;
  line-height: 1.3;
}
/* US-only: hide the country selector (store default country must be US) */
.woocommerce-checkout #billing_country_field, .woocommerce-checkout #shipping_country_field {
  display: none !important;
}
/* Drop the auto "(optional)" suffix */
.woocommerce-checkout .optional {
  display: none !important;
}
/* Coupon prompt off on checkout — coupons are entered on the cart */
.woocommerce-checkout .checkout_coupon, .woocommerce-checkout .woocommerce-form-coupon-toggle {
  display: none !important;
}
/* Returning-customer prompt: sleeker tinted bar */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
  background: #f7fbff;
  border: 1px solid #d6e4f5;
  border-left: 3px solid var(--play-blue);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
  box-shadow: none;
}
/* Lost your password → a button */
.woocommerce-checkout .woocommerce-form-login .lost_password {
  margin: 0.5rem 0 0;
}
.woocommerce-checkout .woocommerce-form-login .lost_password a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--play-blue);
  border: 1.5px solid var(--play-line);
  border-radius: 8px;
  text-decoration: none;
  background: #fff;
}
.woocommerce-checkout .woocommerce-form-login .lost_password a:hover {
  border-color: var(--play-blue);
}
/* Event & Access times: "?" tooltip icon + hover bubble */
.play-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid #9aa4b2;
  color: #5b6675;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  position: relative;
  vertical-align: middle;
  margin-left: 0.3rem;
}
.play-tip::before {
  content: "?";
}
.play-tip:hover, .play-tip:focus {
  border-color: var(--play-blue);
  color: var(--play-blue);
  outline: 0;
}
.play-tip:hover::after, .play-tip:focus::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--play-graphite);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  width: max-content;
  max-width: 220px;
  z-index: 30;
  box-shadow: 0 6px 16px rgba(14, 17, 22, 0.22);
  pointer-events: none;
}
/* Save-card: strip the outer payment-box border/fill; keep the blue row (8F.5) */
.woocommerce-checkout #payment .payment_box.payment_method_stripe {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
}
/* Payable Today / Balance — uniform, clean (no Bebas-vs-amber mismatch) */
.woocommerce-checkout .deposit-info {
  margin: 1.1rem 0 0;
  display: grid;
  gap: 0.5rem;
}
.woocommerce-checkout .deposit-info, .woocommerce-checkout .deposit-info * {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.92rem !important;
  line-height: 1.5;
  color: #3a4452 !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce-checkout .deposit-info strong {
  color: var(--play-graphite) !important;
  font-weight: 700;
}
.woocommerce-checkout .deposit-info #pay-today, .woocommerce-checkout .deposit-info #pay-future {
  color: var(--play-graphite) !important;
  font-weight: 700;
}
/* Checkout review amounts uniform weight (subtotal / delivery / tax all 600) */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td *, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td *, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.tax-rate td, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.tax-rate td * {
  font-weight: 600 !important;
}
/* =========================================================
   Batch 8H — "Setup & Strike — Included" summary row
   ========================================================= */
.woocommerce-cart .cart_totals tr.play-setup-strike th, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.play-setup-strike th {
  font-weight: 400;
  color: #5b6675;
  font-size: 0.88rem;
  text-align: left;
  border: 0;
  white-space: nowrap;
}
.woocommerce-cart .cart_totals tr.play-setup-strike td, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.play-setup-strike td {
  text-align: right;
  padding: 8px 0;
  border: 0;
}
.play-included {
  font-weight: 600;
  color: var(--play-graphite);
  font-size: 0.88rem;
}
/* =========================================================
   Batch 8I — Checkout returning-customer login box
   Centered, cleaner: Remember me above, Log in + Lost password
   on one row at equal height.
   ========================================================= */
/* Center the whole login box as a tidy card */
.woocommerce-checkout .woocommerce-form-login {
  max-width: 520px;
  margin: 1.25rem auto 0;
}
/* Remember me on its own line — full-width flex row so the checkbox + label
   actually center. (It was inline-flex, which only hugs its own content, so
   justify-content/margin-auto had nothing to center against and it read as
   left-stuck.) Adding .woocommerce-form-login to the selector raises specificity
   so this is the single authoritative rememberme rule — the old 8K/8M copies
   were removed in this consolidation. */
.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__rememberme {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.25rem 0 1rem;
  font-size: 0.85rem;
  color: #3a4452;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__rememberme input {
  margin: 0;
  accent-color: var(--play-blue);
}
/* Log in + Lost password on one row, same height */
.woocommerce-checkout .play-login-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.woocommerce-checkout .woocommerce-form-login button[name="login"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  padding: 0.62rem 1.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  box-shadow: none;
}
.woocommerce-checkout .woocommerce-form-login button[name="login"]:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
.woocommerce-checkout .play-login-actions .lost_password {
  margin: 0;
  display: flex;
}
.woocommerce-checkout .play-login-actions .lost_password a {
  margin: 0;
  padding: 0.62rem 1.4rem;
  line-height: 1;
  border: 1.5px solid var(--play-line);
  /* match the login button height */
  border-radius: 8px;
  background: #fff;
  color: var(--play-blue);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.woocommerce-checkout .play-login-actions .lost_password a:hover {
  border-color: var(--play-blue);
}
/* =========================================================
   Batch 8J — Full-payment (within 7 days) notice
   ========================================================= */
.woocommerce-checkout .play-fullpay-noticerow td {
  padding: 0.6rem 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.play-fullpay-notice {
  background: #fdf6e9;
  border: 1px solid #f0e0bf;
  border-radius: 8px;
  padding: 11px 13px;
  color: #8a6516;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: left;
}
/* =========================================================
   Batch 8K — Login box: full-width box, centered content
   ========================================================= */
.woocommerce-checkout .woocommerce-form-login {
  max-width: none !important;
  margin: 1.25rem 0 0;
  text-align: center;
}
.woocommerce-checkout .woocommerce-form-login p, .woocommerce-checkout .woocommerce-form-login .form-row {
  text-align: center;
}
.woocommerce-checkout .woocommerce-form-login label {
  display: block;
  text-align: center;
}
.woocommerce-checkout .woocommerce-form-login .input-text {
  max-width: 460px;
  margin: 0 auto;
  display: block;
  text-align: left;
}
.woocommerce-checkout .play-login-actions {
  justify-content: center;
}
/* =========================================================
   Batch 8L — Checkout polish round: login centering, deposit
   split card, save-card cleanup, agreement checkbox, weights
   ========================================================= */
/* ---- Login form: rows full-width so centered inputs actually center ---- */
.woocommerce-checkout .woocommerce-form-login .form-row {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
/* ---- Full-payment orders: CSS hide driven by body class (survives Stripe re-renders) ---- */
body.play-fullpay .woocommerce-SavedPaymentMethods-saveNew, body.play-fullpay ul.woocommerce-SavedPaymentMethods, body.play-fullpay li.woocommerce-SavedPaymentMethods-new {
  display: none !important;
}
/* ---- Save-card row: strip the amateur outer wrappers, keep the blue row ---- */
.woocommerce-checkout ul.woocommerce-SavedPaymentMethods, .woocommerce-checkout li.woocommerce-SavedPaymentMethods-new {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.woocommerce-checkout fieldset#wc-stripe-upe-form, .woocommerce-checkout .wc-stripe-upe-element fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* ---- Deposit split: designed card (label left, amount right) ---- */
.woocommerce-checkout .deposit-info {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.55rem;
  margin: 1rem 0 0 !important;
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
}
.woocommerce-checkout .deposit-info > span {
  justify-self: start;
}
.woocommerce-checkout .deposit-info > span strong {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5b6675 !important;
}
.woocommerce-checkout .deposit-info #pay-today {
  justify-self: end;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--play-graphite) !important;
}
.woocommerce-checkout .deposit-info #pay-future {
  justify-self: end;
  text-align: right;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--play-graphite) !important;
  line-height: 1.45;
}
/* ---- Setup & Strike row: match the other summary labels/values exactly ---- */
.woocommerce-cart .cart_totals tr.play-setup-strike th, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.play-setup-strike th {
  font-weight: 600 !important;
  color: #5b6675 !important;
}
.play-included {
  font-weight: 600;
  color: var(--play-graphite);
  font-size: 0.88rem;
}
/* ---- Agreement checkbox: normal case, readable, aligned ---- */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0 0 1.1rem !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: 0.6rem;
  text-transform: none !important;
  letter-spacing: 0 !important;
  min-height: 0 !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: #3a4452;
  line-height: 1.55;
  text-align: left;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  margin: 3px 0 0;
  flex: 0 0 auto;
  accent-color: var(--play-blue);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
  color: var(--play-blue);
  font-weight: 700;
  text-decoration: none;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a:hover {
  text-decoration: underline;
}
/* =========================================================
   Batch 8M — Login centering (robust), full-width contact
   fields, time-input styling
   ========================================================= */
/* ---- Login form: WooCommerce's toggle controls visibility; center via block
   methods (the old display:flex !important was overriding the toggle). ---- */
.woocommerce-checkout .woocommerce-form-login {
  text-align: center;
  max-width: none !important;
  margin: 1.25rem 0 0;
}
.woocommerce-checkout .woocommerce-form-login p, .woocommerce-checkout .woocommerce-form-login .form-row {
  float: none !important;
  width: 100% !important;
  max-width: 480px !important;
  text-align: center;
}
.woocommerce-checkout .woocommerce-form-login .input-text {
  width: 100%;
  text-align: left;
  margin: 0;
}
.woocommerce-checkout .woocommerce-form-login label {
  display: block;
  text-align: center;
}
.woocommerce-checkout .play-login-actions {
  justify-content: center;
  width: 100%;
  max-width: 480px;
}
/* ---- Force the contact fields full width (belt-and-suspenders for the class) ---- */
.woocommerce-checkout #billing_email_field, .woocommerce-checkout #billing_phone_field, .woocommerce-checkout #shipping_email_field, .woocommerce-checkout #shipping_phone_field {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
/* ---- Time inputs: field + clock icon in the brand palette ---- */
.woocommerce-checkout input[type="time"].input-text {
  color: var(--play-graphite);
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
}
.woocommerce-checkout input[type="time"].input-text:focus {
  border-color: var(--play-blue) !important;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.25) !important;
  outline: 0;
}
.woocommerce-checkout input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  padding: 2px;
  filter: invert(34%) sepia(58%) saturate(560%) hue-rotate(176deg) brightness(92%) contrast(88%);
  /* tint the native clock glyph toward the brand blue */
}
.woocommerce-checkout input[type="time"]:hover::-webkit-calendar-picker-indicator {
  opacity: 0.85;
}
/* =========================================================
   Batch 8N — Checkout: login actions on ONE row (undo the
   8M regression) + "Your Order" heading pulled INTO the
   sticky summary card so the panel top lines up with Billing
   Details and the heading sticks with the order.
   Pairs with the fields snippet (JS item 16 moves the heading).
   ========================================================= */
/* ---- Login: Log in + Lost password on one row, equal height ----
   8M forced every `.woocommerce-form-login p` to width:100%, which blew the
   lost-password <p> out to full width inside .play-login-actions and wrapped
   the button onto its own line. Re-assert the flex row and size the children
   to their content. */
.woocommerce-checkout .play-login-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 480px;
  margin: 0.35rem auto 0;
}
.woocommerce-checkout .play-login-actions > p, .woocommerce-checkout .play-login-actions .lost_password {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
}
/* equal height: fix the height, center vertically, keep only horizontal padding */
.woocommerce-checkout .play-login-actions button[name="login"], .woocommerce-checkout .play-login-actions .lost_password a {
  height: 2.9rem;
  box-sizing: border-box;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ---- "Your Order" heading now lives INSIDE #order_review (moved by JS) ----
   It becomes the card's title, exactly like "Cart Totals" on the cart page.
   That aligns the panel top with Billing Details and keeps it stuck with the
   order. Kill the 2.4rem top margin it carried when it sat above the card.
   (Higher specificity — #order_review #order_review_heading — so it beats the
   earlier 8G/8I heading rules without needing to touch them.) */
.woocommerce-checkout #order_review #order_review_heading {
  margin: 0 0 1.1rem !important;
}
/* =========================================================
   Batch 8O — Checkout payment area polish
   1) Hide Stripe's mandate paragraph
   2) Save-card row: borderless, checkbox centered on the text
   3) Agreement row: hide the asterisk, checkbox centered
   4) Single retainer option: hide the radio, center as a
      full-width banner
   5) Redesigned Payable Today / Future Payments split panel
   6) Cleaned "Credit / Debit Card" title (white-bg icon chip)
   ========================================================= */
/* --- 1) Stripe's injected mandate text ("By providing your card information…") --- */
.woocommerce-checkout .p-Grid.u-mt-grid {
  display: none !important;
}
/* --- 2) Save-card checkbox: no box, checkbox vertically centered on the label --- */
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  margin: 1rem 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew input {
  margin: 0 !important;
  flex: 0 0 auto;
}
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew label {
  margin: 0 !important;
  font-size: 0.85rem;
  font-weight: 400;
  color: #3a4452;
  line-height: 1.55;
}
/* strip any remaining outer border/box around the whole card element */
.woocommerce-checkout #payment .payment_box, .woocommerce-checkout #payment .payment_box.payment_method_stripe, .woocommerce-checkout #payment fieldset, .woocommerce-checkout #wc-stripe-upe-form, .woocommerce-checkout .wc-stripe-upe-element, .woocommerce-checkout .wc-stripe-upe-element fieldset, .woocommerce-checkout ul.woocommerce-SavedPaymentMethods, .woocommerce-checkout li.woocommerce-SavedPaymentMethods-new {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* --- 3) Agreement (terms) row: hide the required asterisk, center checkbox --- */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper abbr.required, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .required, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .optional {
  display: none !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
  align-items: center !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  margin: 0 !important;
}
/* --- 4) Single retainer option: hide the radio, center as a full-width banner --- */
.woocommerce-checkout ul.payment-plan-options {
  margin: 1.1rem 0;
}
.woocommerce-checkout ul.payment-plan-options li.payment-plan input {
  display: none !important;
}
.woocommerce-checkout ul.payment-plan-options li.payment-plan {
  display: block !important;
  width: 100%;
  padding: 16px !important;
  gap: 0 !important;
  text-align: center !important;
  border: 1.5px solid var(--play-blue) !important;
  background: #f7fbff !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}
.woocommerce-checkout ul.payment-plan-options li.payment-plan label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-weight: 700 !important;
  color: var(--play-graphite) !important;
}
/* --- 5) Deposit split: refined two-panel (Payable Today | Future Payments) --- */
.woocommerce-checkout .deposit-info {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0 !important;
  margin: 1.1rem 0 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(14, 17, 22, 0.05) !important;
}
.woocommerce-checkout .deposit-info > span {
  display: flex !important;
  flex-direction: column;
  gap: 0.4rem;
  justify-self: stretch;
  padding: 16px 18px !important;
  margin: 0 !important;
  text-align: left !important;
  background: none !important;
}
.woocommerce-checkout .deposit-info > span:first-child {
  background: #f7fbff !important;
  border-right: 1px solid var(--play-line);
}
.woocommerce-checkout .deposit-info > span strong {
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #5b6675 !important;
  margin: 0 !important;
}
.woocommerce-checkout .deposit-info #pay-today {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 2.1rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--play-blue) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}
.woocommerce-checkout .deposit-info #pay-future {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--play-graphite) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  text-align: left !important;
  justify-self: start !important;
}
.woocommerce-checkout .deposit-info #pay-future strong {
  font-size: 0.9rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--play-blue) !important;
  font-weight: 700 !important;
}
/* --- 6) "Credit / Debit Card" title: drop the gray bar (reveals the white
   card so the white-bg icon blends), style the label, give the icon a clean
   bordered chip so it reads as intentional. If the gray persists, inspect the
   bar and send me its class and I'll lock it precisely. --- */
.woocommerce-checkout #payment, .woocommerce-checkout #payment .wc_payment_methods, .woocommerce-checkout #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods > li, .woocommerce-checkout #payment .wc_payment_method, .woocommerce-checkout #payment .wc_payment_method > label {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.woocommerce-checkout #payment .wc_payment_method > label {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0 0.5rem !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--play-graphite) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.woocommerce-checkout #payment .wc_payment_method > label img {
  display: none !important;
}
/* =========================================================
   Batch 8P — Checkout column top-alignment + summary weights
   1) Drop Billing Details to meet "Your Order" (the card's
      title sits inset by the card padding, so pad the billing
      column down by the same amount → headings line up).
   2) "Your Order" flush-left with the line items in the card.
   3) Itemized summary labels all 700 so Setup & Strike matches
      Delivery & Takeaway and Sales Tax.
   ========================================================= */
/* 1) Top-align Billing Details with the "Your Order" card title.
   The card has 26px top padding + 1px border; match it on the billing
   column so both headings sit at the same height. (Nudge this value if the
   two aren't perfectly level on your screen.) */
.woocommerce-checkout #customer_details {
  padding-top: 27px;
}
/* 2) "Your Order" flush-left with the order lines inside the card */
.woocommerce-checkout #order_review #order_review_heading {
  margin: 0 0 1.1rem !important;
  padding: 0 !important;
  text-align: left !important;
}
/* 3) Itemized summary labels → 700, so Setup & Strike matches the siblings.
   (Total keeps its own graphite/heavier treatment; these stay grey.) */
.woocommerce-cart .cart_totals tr.cart-subtotal th, .woocommerce-cart .cart_totals tr.shipping th, .woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th, .woocommerce-cart .cart_totals tr.tax-rate th, .woocommerce-cart .cart_totals tr.play-setup-strike th, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.tax-rate th, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.play-setup-strike th {
  font-weight: 700 !important;
  color: #5b6675 !important;
}
/* =========================================================
   Batch 8Q — Login toggle, "Credit Card" heading, save-card
   left-align.
   ========================================================= */
/* ---- Login: hidden on load, revealed by "Click here to login", collapses on
   re-click. WooCommerce's slideToggle drives it now that no !important display
   fights it. Children centered as blocks (overrides 8L's max-width:100%). ---- */
.woocommerce-checkout .woocommerce-form-login {
  display: none;
}
.woocommerce-checkout .woocommerce-form-login .form-row, .woocommerce-checkout .woocommerce-form-login p {
  float: none !important;
  width: 100% !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
.woocommerce-checkout .woocommerce-form-login .input-text {
  width: 100%;
  text-align: left;
}
.woocommerce-checkout .play-login-actions {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 480px;
}
/* ---- "Credit Card" title → section heading in the Your Order (Bebas) face ---- */
.woocommerce-checkout #payment .wc_payment_method > label {
  font-family: "Bebas Neue", sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: var(--play-graphite) !important;
  line-height: 1 !important;
  display: block !important;
  margin: 0 0 0.9rem !important;
  padding: 0 !important;
}
/* ---- Save-card checkbox: strip the inherited left indent so it lines up with
   the agreement checkbox below it (was indented → sore thumb). ---- */
.woocommerce-checkout #payment .payment_box, .woocommerce-checkout #payment .wc_payment_method, .woocommerce-checkout .woocommerce-checkout-payment, .woocommerce-checkout .wc-stripe-upe-element, .woocommerce-checkout ul.woocommerce-SavedPaymentMethods, .woocommerce-checkout li.woocommerce-SavedPaymentMethods-new {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.woocommerce-checkout ul.woocommerce-SavedPaymentMethods, .woocommerce-checkout li.woocommerce-SavedPaymentMethods-new {
  list-style: none !important;
}
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew {
  margin: 1.1rem 0 0 !important;
  padding: 0 !important;
  justify-content: flex-start;
}
/* =========================================================
   Batch 8R — Payment consent block: match checkboxes + tighten
   The save-card and agreement checkboxes now render identically
   (same size, accent, row layout), the leftover left indent on
   the save-card row (a Stripe fieldset's padding) is removed,
   and the vertical rhythm between the mandate, save-card, and
   agreement is closed to an even gap.
   ========================================================= */
/* strip padding/margin from the Stripe payment wrappers — removes the save-card
   indent AND the oversized gaps (leaves .wc-stripe-upe-element internals alone) */
.woocommerce-checkout #payment .payment_box, .woocommerce-checkout #payment .payment_box.payment_method_stripe {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.woocommerce-checkout #payment fieldset, .woocommerce-checkout #wc-stripe-upe-form, .woocommerce-checkout ul.woocommerce-SavedPaymentMethods, .woocommerce-checkout li.woocommerce-SavedPaymentMethods-new {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  list-style: none !important;
}
/* identical checkboxes: save-card + agreement (same size + accent) */
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"], .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  margin: 0 !important;
  transform: none !important;
  accent-color: var(--play-blue);
  cursor: pointer;
}
/* identical rows: flex, vertically-centered checkbox, same label type */
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0 !important;
  text-align: left;
}
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew label, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: #3a4452 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* even, tight spacing: mandate → save-card → agreement */
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew {
  margin: 1rem 0 0 !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin: 1rem 0 0 !important;
  padding: 0 !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0 !important;
}
/* =========================================================
   Batch 8S — Deposit panel symmetry + identical checkboxes
   1) Payable Today matches Future Payments (same font, size,
      600 weight, graphite) so both sides read the same and the
      label->value gap is equal.
   2) Save-card + agreement checkboxes rendered as ONE identical
      custom control so their sizes match and left edges line up.
   ========================================================= */
/* 1) Deposit values: identical treatment both sides, equal gap */
.woocommerce-checkout .deposit-info > span {
  gap: 0.5rem !important;
}
.woocommerce-checkout .deposit-info #pay-today, .woocommerce-checkout .deposit-info #pay-future {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--play-graphite) !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
}
/* 2) One identical checkbox for both consent rows (fixes size + left alignment) */
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"], .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 1.5px solid #c4ccd8 !important;
  border-radius: 4px !important;
  background: #fff !important;
  display: inline-grid !important;
  place-content: center;
  cursor: pointer;
}
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"]::before, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]::before {
  content: "";
  width: 5px;
  height: 9px;
  margin-bottom: 2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.1s;
}
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"]:checked, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked {
  background: var(--play-blue) !important;
  border-color: var(--play-blue) !important;
}
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"]:checked::before, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked::before {
  transform: rotate(45deg) scale(1);
}
/* =========================================================
   Batch 8T — Save-card row: one more sweep of the residual
   left indent so its checkbox lines up with the agreement.
   (Setup & Strike alignment is handled by removing the padding
   override in Batch 8H above.)
   ========================================================= */
.woocommerce-checkout #payment fieldset, .woocommerce-checkout #payment legend, .woocommerce-checkout #payment [class*="SavedPaymentMethods"], .woocommerce-checkout #payment p.woocommerce-SavedPaymentMethods-saveNew {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
/* =========================================================
   Batch 8U — Save-card consent as an intentional callout
   The row can't be pulled into alignment with the agreement
   checkbox, so make it a deliberate tinted note (soft blue
   fill, blue left-accent bar). As a distinct styled element
   the slight inset reads as design, not misalignment — and it
   gives the auto-charge consent the weight it deserves.
   ========================================================= */
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew {
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
  margin: 1.1rem 0 0 !important;
  padding: 14px 16px !important;
  background: #f7fbff !important;
  border: 1px solid #d6e4f5 !important;
  border-left: 3px solid var(--play-blue) !important;
  border-radius: 10px !important;
}
.woocommerce-checkout p.woocommerce-SavedPaymentMethods-saveNew label {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #3a4452 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
/* =========================================================
   Batch 7D — Category filter rail (archive)
   Two-column category archive from play2-audio.html: sticky
   filter rail (Your Dates / Type / Brand / Price) + toolbar
   (unit count + sort) + active-filter chips. Pairs with
   PLAY-Category-Filter-Rail.php. Scope: product category
   archives (the shop landing keeps its category tiles).
   ========================================================= */
/* ---- two-column shell ---- */
.tax-product_cat .play-shoplayout {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 34px;
  align-items: start;
  margin-top: 4px;
}
/* ---- the rail ---- */
.tax-product_cat .play-rail {
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 14px;
  padding: 6px 20px 18px;
  position: sticky;
  top: 96px;
}
.tax-product_cat .play-rail-grp {
  padding: 18px 0;
  border-bottom: 1px solid var(--play-line);
}
.tax-product_cat .play-rail-grp:last-child {
  border-bottom: none;
}
.tax-product_cat .play-rail h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #39414e;
  margin: 0 0 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* checkbox rows */
.tax-product_cat .play-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 0.85rem;
  color: #5b6675;
  margin: 0;
}
.tax-product_cat .play-opt input[type="checkbox"] {
  accent-color: var(--play-blue);
  width: 15px;
  height: 15px;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.tax-product_cat .play-opt .play-opt-lab {
  flex: 1 1 auto;
}
.tax-product_cat .play-opt .play-ct {
  margin-left: auto;
  font-family: var(--play-mono);
  font-size: 0.7rem;
  color: #9aa3af;
}
.tax-product_cat .play-opt:hover {
  color: var(--play-blue);
}
/* your dates */
.tax-product_cat .play-daterail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tax-product_cat .play-daterail label {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #39414e;
}
.tax-product_cat .play-daterail input[type="date"] {
  border: 1px solid var(--play-line);
  border-radius: 8px;
  padding: 10px;
  font: 0.85rem "Montserrat", sans-serif;
  color: var(--play-graphite);
  background: #fff;
}
.tax-product_cat .play-daterail input[type="date"]:focus {
  border-color: var(--play-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.2);
}
.tax-product_cat .play-daterail-note {
  font-family: var(--play-mono);
  font-size: 0.66rem;
  color: #9aa3af;
  margin: 4px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* ---- toolbar (count + sort) ---- */
.tax-product_cat .play-toolbar-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tax-product_cat .play-count {
  font-family: var(--play-mono);
  font-size: 0.72rem;
  color: #5b6675;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tax-product_cat .play-toolbar-wrap .woocommerce-ordering {
  margin: 0;
}
.tax-product_cat .woocommerce-ordering select.orderby {
  border: 1px solid var(--play-line);
  border-radius: 8px;
  padding: 11px 14px;
  font: 0.78rem "Montserrat", sans-serif;
  font-weight: 600;
  background: #fff;
  color: var(--play-graphite);
  cursor: pointer;
}
/* Kadence renders its own archive top-row (result count + sort + grid/list
   toggle) inside our toolbar wrap. Hide its result count and view toggle
   (grid is forced by the product-grid rule below), keep only its sort, and
   align the row: our availability text left, sort right. */
.tax-product_cat .kadence-woo-results-count, .tax-product_cat .kadence-woo-toggle {
  display: none !important;
}
.tax-product_cat .kadence-shop-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.tax-product_cat .play-toolbar-wrap > .kadence-shop-top-row {
  margin-left: auto;
}
/* ---- active-filter chips ---- */
.tax-product_cat .play-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.tax-product_cat .play-fchip {
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(43, 108, 176, 0.1);
  color: var(--play-blue);
  border: 1px solid rgba(43, 108, 176, 0.3);
  border-radius: 20px;
  padding: 7px 11px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.tax-product_cat .play-fchip:hover {
  background: var(--play-blue);
  color: #fff;
}
.tax-product_cat .play-fchip-clear {
  background: #eef2f7;
  color: #5b6675;
  border-color: var(--play-line);
}
.tax-product_cat .play-fchip-clear:hover {
  background: #e2e8f0;
  color: var(--play-graphite);
}
/* ---- product grid inside the main column ---- */
.tax-product_cat .play-shopmain ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px;
  margin: 0;
}
/* ---- mobile: rail collapses behind a Filters button ---- */
.tax-product_cat .play-filters-btn {
  display: none;
  align-items: center;
  justify-content: center;
  height: 2.6rem;
  padding: 0 1.2rem;
  margin-bottom: 16px;
  background: transparent;
  border: 2px solid var(--play-blue);
  border-radius: 8px;
  color: var(--play-blue);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.tax-product_cat .play-filters-btn:hover {
  background: var(--play-blue);
  color: #fff;
}
/* =========================================================
   Batch 8V - Order received (confirmation) page
   Styles the thank-you page to the PLAY card aesthetic: white
   summary card, white address cards, clean meta strip, and the
   title-bar intro blurb. Pairs with PLAY-Order-Received.php.
   Scope: body.woocommerce-order-received.
   ========================================================= */
/* intro blurb in the title bar (matches the cart / shop intros) */
.play-checkout-intro {
  max-width: 62ch !important;
  margin: 14px 0 0 !important;
  color: #b7c0cd !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}
/* lead "thank you" line */
.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-family: "Montserrat", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--play-graphite);
  margin: 0 0 1.75rem;
}
/* overview meta strip (order #, date, email, total, payment) -> one white card */
.woocommerce-order-received ul.woocommerce-order-overview {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--play-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.woocommerce-order-received ul.woocommerce-order-overview li {
  flex: 1 1 auto;
  min-width: 150px;
  margin: 0;
  padding: 16px 20px;
  border-right: 1px solid var(--play-line);
  border-bottom: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a93a1;
  line-height: 1.35;
}
.woocommerce-order-received ul.woocommerce-order-overview li:last-child {
  border-right: 0;
}
.woocommerce-order-received ul.woocommerce-order-overview li strong {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--play-graphite);
  margin: 0.35rem 0 0;
}
/* section headings */
.woocommerce-order-received .woocommerce-order-details__title, .woocommerce-order-received .woocommerce-column__title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 1rem;
}
/* order details -> white summary card */
.woocommerce-order-received .woocommerce-order-details {
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 16px;
  padding: 26px;
  margin-bottom: 2.5rem;
}
.woocommerce-order-received table.woocommerce-table--order-details {
  border: 0;
  margin: 0;
  background: transparent;
  width: 100%;
}
.woocommerce-order-received table.woocommerce-table--order-details th, .woocommerce-order-received table.woocommerce-table--order-details td {
  border: 0;
  padding: 12px 0;
  background: transparent;
  text-align: left;
}
.woocommerce-order-received table.woocommerce-table--order-details thead th {
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a93a1;
  font-weight: 700;
  border-bottom: 1px solid var(--play-line);
  padding-bottom: 0.7rem;
}
.woocommerce-order-received table.woocommerce-table--order-details thead th.product-total, .woocommerce-order-received table.woocommerce-table--order-details tfoot td, .woocommerce-order-received table.woocommerce-table--order-details td.product-total {
  text-align: right;
}
.woocommerce-order-received table.woocommerce-table--order-details td.product-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: var(--play-graphite);
}
.woocommerce-order-received table.woocommerce-table--order-details td.product-name a {
  color: var(--play-graphite);
  text-decoration: none;
}
.woocommerce-order-received table.woocommerce-table--order-details td.product-name a:hover {
  color: var(--play-blue);
}
.woocommerce-order-received table.woocommerce-table--order-details tbody tr {
  border-bottom: 1px solid var(--play-line);
}
.woocommerce-order-received table.woocommerce-table--order-details tfoot th {
  font-weight: 400;
  color: #5b6675;
  font-size: 0.9rem;
  padding: 10px 0;
}
.woocommerce-order-received table.woocommerce-table--order-details tfoot td {
  font-weight: 700;
  color: var(--play-graphite);
  font-size: 0.9rem;
  padding: 10px 0;
}
/* Total row emphasized */
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr.order-total th, .woocommerce-order-received table.woocommerce-table--order-details tfoot tr.order-total td {
  border-top: 1px solid var(--play-line);
  padding-top: 14px;
  font-size: 1.05rem;
  color: var(--play-graphite);
}
/* Future Payments (last row) -> amber, so the balance reads as a heads-up */
/* (Future Payments amber highlight removed: as :last-child it wrongly hit the
   Payment method row on paid-in-full orders. Re-add targeted to the deposit
   balance row once we have its class from a deposit-order receipt.) */
/* booking dates / item meta under the product */
.woocommerce-order-received table.woocommerce-table--order-details .wc-item-meta {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: #5b6675;
  line-height: 1.6;
}
.woocommerce-order-received table.woocommerce-table--order-details .wc-item-meta strong {
  font-weight: 600;
}
/* customer details -> two white address cards */
.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0;
  float: none !important;
  width: auto !important;
}
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 16px;
  padding: 24px 26px;
}
.woocommerce-order-received .woocommerce-customer-details address {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #3a4452;
  border: 0;
  padding: 0;
}
/* =========================================================
   Batch 8W - After-hours service note (checkout time fields)
   ========================================================= */
.woocommerce-checkout .play-venue-times .play-times-note {
  flex: 0 0 100%;
  max-width: 100%;
  margin: 0.5rem 0 0;
  padding: 12px 14px;
  background: #fdf6e9;
  border: 1px solid #f0e0bf;
  border-radius: 10px;
  color: #8a6516;
  font-size: 0.8rem;
  line-height: 1.55;
}
/* =========================================================
   Batch 8X - Terms checkbox inline validation message
   #terms_description was rendering as large unstyled body
   text under the agreement checkbox. Render it as a small,
   red inline error so it reads as intentional field feedback.
   ========================================================= */
.woocommerce-checkout #terms_description {
  display: block;
  margin: 0.5rem 0 0 !important;
  padding: 0;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #dc2626 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* =========================================================
   Batch 8Y - Order received: custom Your Info / Venue Info
   cards (replaces the default billing/shipping address blocks,
   which are hidden). Two equal cards on one row, labeled rows.
   Pairs with PLAY-Order-Received.php.
   ========================================================= */
.woocommerce-order-received .woocommerce-customer-details {
  display: none !important;
}
.woocommerce-order-received .play-order-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 2.5rem;
  align-items: stretch;
}
.woocommerce-order-received .play-info-card {
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 16px;
  padding: 24px 26px;
}
.woocommerce-order-received .play-info-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 1.2rem;
}
.woocommerce-order-received .play-info-row {
  margin: 0 0 1rem;
}
.woocommerce-order-received .play-info-row:last-child {
  margin-bottom: 0;
}
.woocommerce-order-received .play-info-label {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a93a1;
  margin: 0 0 0.3rem;
}
.woocommerce-order-received .play-info-val {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  color: #3a4452;
  line-height: 1.6;
}
/* =========================================================
   Batch 8Z - Order received: hide the per-item booking dates
   (now shown once in the overview strip as "Event Dates").
   ========================================================= */
.woocommerce-order-received table.woocommerce-table--order-details .wc-item-meta {
  display: none;
}
/* Order received: drop the Email column from the overview strip - it's shown
   in the Your Info card below. */
.woocommerce-order-received ul.woocommerce-order-overview li.woocommerce-order-overview__email {
  display: none !important;
}
/* =========================================================
   Batch 11 - Request a Quote form (Gravity Forms, ID 1)
   Styles GF #1 to the play2-quote mockup: white card, Bebas
   section headings, Montserrat labels, checkout-style inputs,
   radio rows, drop zone, full-width blue submit. Scoped to
   #gform_wrapper_1 so no other Gravity Form is affected.
   ========================================================= */
/* white card container */
#gform_wrapper_1 {
  background: #fff !important;
  border: 1px solid var(--play-line);
  border-radius: 16px;
  padding: 30px 34px !important;
  max-width: 860px;
  margin: 0 auto;
}
/* form title + description both duplicate the page hero now -> hide both */
#gform_wrapper_1 .gform_title {
  display: none !important;
}
#gform_wrapper_1 .gform_description {
  display: none !important;
}
#gform_wrapper_1 .gform_heading {
  margin: 0 !important;
}
/* vertical rhythm between fields (grid row gap, not per-field margins) */
#gform_wrapper_1 .gform_fields {
  row-gap: 1.15rem !important;
  grid-row-gap: 1.15rem !important;
}
/* section headings -> Bebas with a hairline under */
#gform_wrapper_1 .gsection {
  border: 0 !important;
  border-bottom: 1px solid var(--play-line) !important;
  margin: 1.4rem 0 0.4rem !important;
  padding: 0 0 0.55rem !important;
}
#gform_wrapper_1 .gsection_title {
  font-family: "Bebas Neue", sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.55rem !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--play-graphite) !important;
  margin: 0 !important;
}
/* labels */
#gform_wrapper_1 .gfield_label {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #39414e !important;
  margin: 0 0 8px !important;
}
#gform_wrapper_1 .gfield_required {
  text-transform: none !important;
  letter-spacing: 0;
  font-size: 0.82em;
  font-weight: 600;
  color: #dc2626 !important;
  margin-left: 0.3rem;
}
/* sub-labels for address / name parts */
#gform_wrapper_1 .ginput_complex label, #gform_wrapper_1 .gform-field-label--type-sub, #gform_wrapper_1 .ginput_container_address label, #gform_wrapper_1 .ginput_container_name label {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #8a93a1 !important;
  margin-top: 6px;
}
/* inputs / selects / textareas -> checkout aesthetic */
#gform_wrapper_1 input[type="text"], #gform_wrapper_1 input[type="email"], #gform_wrapper_1 input[type="tel"], #gform_wrapper_1 input[type="number"], #gform_wrapper_1 input[type="date"], #gform_wrapper_1 .gfield select, #gform_wrapper_1 textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
  padding: 0.72rem 0.85rem !important;
  font-size: 0.92rem !important;
  color: var(--play-graphite) !important;
  font-family: "Montserrat", sans-serif !important;
  box-shadow: none !important;
  line-height: 1.4;
}
#gform_wrapper_1 input:focus, #gform_wrapper_1 select:focus, #gform_wrapper_1 textarea:focus {
  border-color: var(--play-blue) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.25) !important;
}
#gform_wrapper_1 textarea {
  min-height: 7rem !important;
  line-height: 1.5;
}
/* radio rows */
#gform_wrapper_1 .gfield_radio .gchoice {
  display: flex !important;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.5rem !important;
}
#gform_wrapper_1 .gfield_radio input[type="radio"] {
  accent-color: var(--play-blue);
  width: 16px;
  height: 16px;
  margin: 0;
}
#gform_wrapper_1 .gfield_radio label {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.9rem !important;
  color: #3a4452 !important;
  margin: 0 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* file upload drop zone */
#gform_wrapper_1 .gform_drop_area {
  border: 1.5px dashed #c4ccd8 !important;
  border-radius: 12px !important;
  background: #f7fbff !important;
  padding: 26px !important;
  text-align: center;
}
#gform_wrapper_1 .gform_button_select_files {
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0.55rem 1.1rem !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.74rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
#gform_wrapper_1 .gform_button_select_files:hover {
  background: var(--play-blue-hover) !important;
}
/* submit button -> full-width blue block */
#gform_wrapper_1 .gform_footer {
  margin: 1.6rem 0 0 !important;
  padding: 0 !important;
}
#gform_wrapper_1 .gform_button, #gform_wrapper_1 input[type="submit"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  box-sizing: border-box;
  height: 3.15rem !important;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  cursor: pointer;
}
#gform_wrapper_1 .gform_button:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
/* validation messages in brand red */
#gform_wrapper_1 .validation_message, #gform_wrapper_1 .gfield_description.validation_message {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.78rem !important;
  color: #dc2626 !important;
  font-weight: 600;
}
/* hero sub-title blurb under a page title (pairs with PLAY-Page-Hero-Intro.php) */
.play-page-intro {
  max-width: 64ch !important;
  margin: 14px 0 0 !important;
  color: #b7c0cd !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}
/* =========================================================
   Batch 11.1 - Request a Quote page content (callout + steps)
   Intro callout above the form, the reassurance line, and the
   three "what happens next" boxes below it, from play2-quote.
   HTML goes in Custom HTML blocks around the GF block (see the
   Batch 11.1 doc). Scoped to the play-quote-* classes.
   ========================================================= */
.play-quote-callout {
  max-width: 860px;
  margin: 0 auto 22px;
  background: #f3f5f8;
  border: 1px solid var(--play-line);
  border-radius: 10px;
  padding: 15px 17px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #5b6675;
}
.play-quote-callout .play-quote-callout-icon {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 7px;
  color: #5b6675;
}
.play-quote-callout strong {
  color: var(--play-graphite);
  font-weight: 700;
}
.play-quote-callout a {
  color: var(--play-blue);
  font-weight: 600;
  text-decoration: none;
}
.play-quote-callout a:hover {
  text-decoration: underline;
}
.play-quote-reassure {
  max-width: 860px;
  margin: 14px auto 0;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  line-height: 1.6;
  color: #9aa3af;
}
.play-quote-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 860px;
  margin: 34px auto 0;
}
.play-quote-steps .play-quote-step {
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 12px;
  padding: 22px;
}
.play-quote-steps .play-quote-step-n {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--play-blue);
  margin: 0;
}
.play-quote-steps .play-quote-step p {
  margin: 6px 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #5b6675;
}
/* Quote form: darker placeholder text (GF/browser default is too faint) */
#gform_wrapper_1 input::placeholder, #gform_wrapper_1 textarea::placeholder {
  color: #737d8c !important;
  opacity: 1 !important;
}
/* =========================================================
   Batch 13 - Staff Quote-Cart panel (Model B, Phase 2 + 3)
   Only rendered for Administrator / Shop Manager on the cart.
   Full-width card, amber "staff" accent, copy-link success box.
   ========================================================= */
.play-quote-save {
  grid-column: 1 / -1;
  clear: both;
  float: none;
  width: 100%;
  box-sizing: border-box;
  margin: 24px 0 0;
  background: #fff;
  border: 1px solid var(--play-line);
  border-top: 3px solid #d9a441;
  border-radius: 12px;
  padding: 22px 24px;
}
.play-quote-save-head {
  white-space: nowrap;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--play-graphite);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.play-quote-save-badge {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--play-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a6516;
  background: #f5e6c8;
  border-radius: 5px;
  padding: 3px 7px;
}
/* status notes after a load */
.play-quote-note {
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  border-radius: 9px;
  padding: 10px 13px;
  margin: 0 0 16px;
}
.play-quote-note-ok {
  background: #eefaf3;
  border: 1px solid #bfe8d1;
  color: #237a4e;
}
.play-quote-note-warn {
  background: #fdf0ee;
  border: 1px solid #f2c9c1;
  color: #b23a2a;
}
/* saved -> customer link success box */
.play-quote-linkbox {
  background: #eefaf3;
  border: 1px solid #bfe8d1;
  border-radius: 11px;
  padding: 14px 16px;
  margin: 0 0 18px;
}
.play-quote-linkbox-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: #237a4e;
  margin: 0 0 10px;
}
.play-quote-linkbox-label svg {
  color: #2f9e6b;
}
.play-quote-linkrow {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
.play-quote-link {
  flex: 1 1 320px;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.62rem 0.8rem;
  border: 1px solid #bfe8d1;
  border-radius: 8px;
  font: 0.82rem var(--play-mono);
  color: var(--play-graphite) !important;
  background: #fff !important;
}
.play-quote-copy {
  flex: 0 0 auto;
  background: var(--play-blue);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 0 1.2rem;
  min-height: 2.6rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.play-quote-copy:hover {
  background: var(--play-blue-hover);
}
.play-quote-copy.is-copied {
  background: #2f9e6b;
}
/* the save/load form */
.play-quote-save-form {
  max-width: 780px;
}
.play-quote-save-form label {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #39414e;
  margin: 0 0 6px;
}
.play-quote-save-form label span {
  font-weight: 400;
  color: #8a93a1;
}
.play-quote-save-form input[type="text"] {
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--play-line);
  border-radius: 8px;
  font: 0.9rem "Montserrat", sans-serif;
  color: var(--play-graphite);
  background: #fff;
}
.play-quote-save-form input[type="text"]:focus {
  border-color: var(--play-blue);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.2);
}
.play-quote-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
}
.play-quote-btn-primary, .play-quote-btn-ghost {
  border-radius: 8px;
  padding: 0.7rem 1.3rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.play-quote-btn-primary {
  background: var(--play-blue);
  color: #fff;
  border: 0;
}
.play-quote-btn-primary:hover {
  background: var(--play-blue-hover);
}
.play-quote-btn-ghost {
  background: #fff;
  color: var(--play-blue);
  border: 1.5px solid var(--play-blue);
}
.play-quote-btn-ghost:hover {
  background: #f0f6ff;
}
/* =========================================================
   Batch 14 - Cart totals: uniform right edge
   The amounts and the plain-text values (Setup & Strike
   "Included", Delivery "Calculated at Checkout") were drifting
   apart on the right. Zero any residual right padding/margin so
   they all align to the same edge.
   ========================================================= */
.woocommerce-cart .cart_totals td, .woocommerce-cart .cart_totals tr.play-setup-strike td, .woocommerce-cart .cart_totals tr.shipping td, .woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td {
  text-align: right !important;
  padding-right: 0 !important;
}
.woocommerce-cart .cart_totals td .woocommerce-Price-amount, .woocommerce-cart .cart_totals td .woocommerce-Price-amount bdi, .woocommerce-cart .cart_totals td .amount, .woocommerce-cart .cart_totals td .play-included {
  margin-right: 0 !important;
  padding-right: 0 !important;
}
/* =========================================================
   Cart summary compaction + cart cross-sell polish
   ========================================================= */
/* ---- Cart line items. The grid compaction (20px/56px tracks, 56px thumb)
   is DESKTOP-ONLY and lives in PLAY - CSS Responsive under (min-width:783px),
   so it can never tie with the mobile grid. Only the shared bits are here. ---- */
.woocommerce-cart td.product-thumbnail img {
  padding: 6px !important;
}
.woocommerce-cart td.product-name a {
  font-size: 0.88rem !important;
}
.woocommerce-cart td.product-name .wc-item-meta, .woocommerce-cart td.product-name .wc-item-meta *, .woocommerce-cart td.product-name dl {
  font-size: 0.72rem !important;
  line-height: 1.45 !important;
}
/* ---- Prices in Montserrat. Bebas is a display face: headings, not figures
   a customer reads carefully. Supersedes the 1.5rem / 1.35rem Bebas rules
   on these two cells earlier in the file. ---- */
.woocommerce-cart td.product-subtotal, .woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total, .woocommerce-checkout-review-order-table tbody td.product-total {
  font-family: "Montserrat", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--play-graphite) !important;
}
.woocommerce-cart td.product-quantity .quantity button, .woocommerce-cart td.product-quantity .quantity [class*="minus"], .woocommerce-cart td.product-quantity .quantity [class*="plus"] {
  width: 2.1rem !important;
  height: 2.1rem !important;
  font-size: 1rem !important;
}
.woocommerce-cart td.product-quantity .quantity input.qty {
  height: 2.1rem !important;
  width: 2.4rem !important;
}
/* ---- "CART SUMMARY" heading (div.cart-summary > h2): match the Cart Totals heading ---- */
.woocommerce-cart .cart-summary h2 {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 1.6rem !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  margin: 1.5rem 0 0.9rem !important;
}
/* ---- Cart cross-sell ("You may be interested in") → compact, on-brand ---- */
.cross-sells {
  margin: 2.75rem 0 0;
}
.cross-sells > h2 {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem) !important;
  line-height: 0.95 !important;
  color: var(--play-graphite) !important;
  text-transform: uppercase;
  letter-spacing: 0.01em !important;
  margin: 0 0 1.1rem !important;
}
.cross-sells > h2::before {
  content: "Add to your kit";
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--play-blue);
  margin-bottom: 0.5rem;
}
/* tidy grid of small cards instead of one shop-sized tile */
.cross-sells ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
  float: none !important;
}
.cross-sells ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  border-radius: 12px !important;
}
.cross-sells ul.products li.product .woocommerce-loop-image-link {
  padding: 14px !important;
  aspect-ratio: auto !important;
}
.cross-sells ul.products li.product .woocommerce-loop-image-link img {
  max-height: 110px !important;
}
.cross-sells ul.products li.product .product-details {
  padding: 6px 14px 0 !important;
}
.cross-sells ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.85rem !important;
  margin: 2px 0 6px !important;
}
.cross-sells ul.products li.product .price {
  font-size: 1.25rem !important;
}
.cross-sells ul.products li.product .price::after {
  font-size: 0.6rem !important;
}
.cross-sells ul.products li.product .play-card-add, .cross-sells ul.products li.product .add_to_cart_button, .cross-sells ul.products li.product .button {
  margin-top: 10px !important;
  padding: 9px 12px !important;
  font-size: 0.64rem !important;
  letter-spacing: 0.12em !important;
}
.cross-sells ul.products li.product .product-action-wrap {
  padding: 0 14px 14px !important;
}
/* "or request a quote" makes no sense in the cart cross-sell - hide it here only */
.cross-sells ul.products li.product .play-card-quote {
  display: none !important;
}
/* =========================================================
   State select2 dropdown (the OPEN list) - on-brand.
   The dropdown is appended to <body>, so it can't be scoped
   under .woocommerce-page; these target select2 directly.
   Only loads on the frontend, so admin select2 is untouched.
   ========================================================= */
.select2-container--open .select2-dropdown, .select2-dropdown {
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 36px rgba(14, 17, 22, 0.16) !important;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
}
.select2-dropdown .select2-search--dropdown {
  padding: 8px 8px 4px;
}
.select2-dropdown .select2-search__field {
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
  padding: 0.55rem 0.7rem !important;
  font-size: 0.92rem;
  color: var(--play-graphite);
  outline: none !important;
  box-shadow: none !important;
}
.select2-dropdown .select2-search__field:focus {
  border-color: var(--play-blue) !important;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.22) !important;
}
.select2-results {
  background: #fff;
}
.select2-results__options {
  padding: 4px !important;
  background: #fff;
}
.select2-results__option {
  padding: 0.55rem 0.75rem !important;
  margin: 1px 0;
  border-radius: 7px;
  font-size: 0.92rem;
  color: var(--play-graphite) !important;
  background: #fff !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted {
  background: var(--play-blue) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: #eef4fb !important;
  color: var(--play-graphite) !important;
  font-weight: 600;
}
/* =========================================================
   HOME PAGE  ([play_home]) - built band by band.
   All rules scoped under .play-home; ph- classes so nothing
   collides with the theme's generic .hero/.btn/.wrap/etc.
   ========================================================= */
/* ---- shared home utilities ---- */
.play-home .ph-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.play-home .ph-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
}
.play-home .ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 8px;
  transition: 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.play-home .ph-btn-blue {
  background: var(--play-blue);
  color: #fff;
}
.play-home .ph-btn-blue:hover {
  background: var(--play-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(59, 134, 214, 0.7);
}
.play-home .ph-btn-out {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.play-home .ph-btn-out:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
/* ---- hero ---- */
.play-home .ph-hero {
  position: relative;
  background: var(--play-graphite);
  color: #fff;
  overflow: hidden;
}
.play-home .ph-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(75, 134, 214, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 134, 214, 0.07) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 72% 42%, #000, transparent 75%);
  mask-image: radial-gradient(circle at 72% 42%, #000, transparent 75%);
}
.play-home .ph-glow {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 134, 214, 0.4), transparent 65%);
  top: -170px;
  right: -130px;
  filter: blur(22px);
  animation: phPulse 7s ease-in-out infinite;
}
@keyframes phPulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}
.play-home .ph-hero .ph-wrap {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 50px;
  align-items: stretch;
  padding-top: 74px;
  padding-bottom: 74px;
  min-height: 68vh;
}
.play-home .ph-hero .ph-wrap > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.play-home .ph-hero .ph-eyebrow {
  color: var(--play-blue-glow);
}
.play-home .ph-hero h1 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(3.4rem, 7vw, 6.4rem);
  line-height: 0.92;
  margin: 0.14em 0 0.26em;
  text-transform: uppercase;
  max-width: 13ch;
  color: #fff;
}
.play-home .ph-hero p {
  max-width: 460px;
  color: #b7c0cd;
  font-size: 1.05rem;
  line-height: 1.6;
}
.play-home .ph-hero p b {
  color: #fff;
  font-weight: 600;
}
.play-home .ph-hcta {
  margin-top: 30px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.play-home .ph-reveal {
  opacity: 0;
  transform: translateY(28px);
  animation: phRise 0.9s forwards;
}
.play-home .ph-r1 {
  animation-delay: 0.05s;
}
.play-home .ph-r2 {
  animation-delay: 0.15s;
}
.play-home .ph-r3 {
  animation-delay: 0.28s;
}
.play-home .ph-r4 {
  animation-delay: 0.4s;
}
@keyframes phRise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.play-home .ph-herocard {
  position: relative;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #242c38;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
  opacity: 0;
  animation: phRise 1s 0.5s forwards;
}
.play-home .ph-herocard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.play-home .ph-tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: rgba(14, 17, 22, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid #242c38;
  border-radius: 10px;
  padding: 13px 17px;
}
.play-home .ph-tag .k {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--play-blue-glow);
  font-weight: 700;
}
.play-home .ph-tag .v {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.5rem;
  color: #fff;
}
/* ---- process strip ---- */
.play-home .ph-proc {
  background: var(--play-graphite);
  color: #fff;
  border-top: 1px solid #242c38;
}
.play-home .ph-proc .ph-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-left: 0;
  padding-right: 0;
}
.play-home .ph-pstep {
  padding: 42px 30px;
  border-right: 1px solid #242c38;
  transition: 0.4s;
}
.play-home .ph-pstep:last-child {
  border-right: none;
}
.play-home .ph-pstep:hover {
  background: #151a22;
}
.play-home .ph-pstep .n {
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.4rem;
  color: var(--play-blue-glow);
  line-height: 0.8;
}
.play-home .ph-pstep h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.7rem;
  margin: 10px 0 6px;
  text-transform: uppercase;
  color: #fff;
}
.play-home .ph-pstep p {
  font-size: 0.85rem;
  color: #9aa3af;
  line-height: 1.6;
  margin: 0;
}
/* ---- light sections + section heading ---- */
.play-home {
  background: #f3f5f8;
}
.play-home .ph-sec {
  padding: 88px 0;
}
.play-home .ph-shead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 38px;
  gap: 20px;
  flex-wrap: wrap;
}
.play-home .ph-shead h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0;
}
.play-home .ph-shead h2 .ph-blue {
  color: var(--play-blue);
}
.play-home .ph-shead .ph-e {
  display: block;
  margin-bottom: 10px;
}
.play-home .ph-viewall {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
  border-bottom: 2px solid var(--play-blue);
  padding-bottom: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.play-home .ph-viewall:hover {
  color: var(--play-blue-hover);
}
/* ---- category grid ---- */
.play-home .ph-cgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.play-home .ph-ccard {
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 14px;
  padding: 24px;
  transition: 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
}
.play-home .ph-ccard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--play-blue);
  transition: 0.4s;
}
.play-home .ph-ccard:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -28px rgba(43, 108, 176, 0.35);
  border-color: #c9d4e6;
}
.play-home .ph-ccard:hover::before {
  width: 100%;
}
.play-home .ph-ccard img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  margin-bottom: 14px;
  transition: 0.4s;
  display: block;
}
.play-home .ph-ccard:hover img {
  transform: scale(1.05);
}
.play-home .ph-ccard h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.45rem;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0;
}
.play-home .ph-ccard p {
  font-size: 0.76rem;
  color: #5b6675;
  margin-top: 4px;
  line-height: 1.5;
}
.play-home .ph-ccard .ph-go {
  margin-top: 12px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
}
/* ---- Most Reserved: featured products use the archive card; just set the grid ---- */
.play-home ul.products.ph-featured {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  margin: 0 !important;
  list-style: none;
  padding: 0;
}
.play-home ul.products.ph-featured li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
/* ---- split CTA cards ---- */
.play-home .ph-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.play-home .ph-scta {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  text-decoration: none;
}
.play-home .ph-scta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.7s;
}
.play-home .ph-scta:hover img {
  transform: scale(1.06);
}
.play-home .ph-scta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 17, 22, 0.12), rgba(14, 17, 22, 0.9));
}
.play-home .ph-scta .c {
  position: relative;
  z-index: 2;
  padding: 34px;
}
.play-home .ph-scta h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 2rem;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.play-home .ph-scta p {
  font-size: 0.88rem;
  color: #cfd6e0;
  margin: 8px 0 16px;
  max-width: 34ch;
  line-height: 1.55;
}
.play-home .ph-scta .lk {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  border-bottom: 2px solid var(--play-blue-glow);
  padding-bottom: 4px;
}
/* ---- brands row ---- */
.play-home .ph-brands {
  text-align: center;
}
.play-home .ph-brands .ph-eyebrow {
  margin-bottom: 26px;
}
.play-home .ph-brow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 46px;
  align-items: center;
}
.play-home .ph-brow span {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  color: #aab2bf;
  transition: 0.2s;
  cursor: default;
}
.play-home .ph-brow span:hover {
  color: var(--play-blue);
}
.play-home .ph-brandnote {
  margin-top: 22px;
  font-size: 0.82rem;
  color: #5b6675;
}
.play-home .ph-brandnote b {
  color: var(--play-graphite);
  font-weight: 600;
}
/* ---- support band ---- */
.play-home .ph-support {
  position: relative;
  background: var(--play-graphite);
  color: #fff;
  overflow: hidden;
  padding: 96px 0;
}
.play-home .ph-support .ph-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 134, 214, 0.26), transparent 65%);
  top: -200px;
  left: 42%;
  filter: blur(14px);
}
.play-home .ph-support .ph-wrap {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 760px;
}
.play-home .ph-support h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 14px 0;
  color: #fff;
}
.play-home .ph-support h2 .ph-blue {
  color: var(--play-blue-glow);
}
.play-home .ph-support p {
  color: #b7c0cd;
  margin-bottom: 30px;
  line-height: 1.7;
}
.play-home .ph-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
/* =========================================================
   OUR PROCESS PAGE  ([play_process]) - scoped under .play-process.
   Reuses the Home patterns (ph- classes); shared utilities are
   duplicated here so the page is self-contained.
   ========================================================= */
.play-process {
  background: #f3f5f8;
}
.play-process .ph-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.play-process .ph-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
}
/* page hero (breadcrumb banner) - reusable inner-page header */
.play-process .ph-pb {
  position: relative;
  background: var(--play-graphite);
  color: #fff;
  overflow: hidden;
  padding: 58px 0 50px;
}
.play-process .ph-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(75, 134, 214, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 134, 214, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 85% 10%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 85% 10%, #000, transparent 72%);
}
.play-process .ph-pb .ph-wrap {
  position: relative;
  z-index: 2;
}
.play-process .ph-crumb {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7d8a9b;
  margin-bottom: 14px;
}
.play-process .ph-crumb a {
  color: #7d8a9b;
  text-decoration: none;
}
.play-process .ph-crumb a:hover {
  color: #fff;
}
.play-process .ph-crumb span {
  color: #4b5666;
}
.play-process .ph-pb h1 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}
.play-process .ph-pb p {
  color: #b7c0cd;
  max-width: 62ch;
  margin-top: 10px;
  line-height: 1.6;
}
/* process strip (shared look with Home) */
.play-process .ph-proc {
  background: var(--play-graphite);
  color: #fff;
  border-top: 1px solid #242c38;
}
.play-process .ph-proc .ph-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-left: 0;
  padding-right: 0;
}
.play-process .ph-pstep {
  padding: 42px 30px;
  border-right: 1px solid #242c38;
  transition: 0.4s;
}
.play-process .ph-pstep:last-child {
  border-right: none;
}
.play-process .ph-pstep:hover {
  background: #151a22;
}
.play-process .ph-pstep .n {
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.4rem;
  color: var(--play-blue-glow);
  line-height: 0.8;
}
.play-process .ph-pstep h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.7rem;
  margin: 10px 0 6px;
  text-transform: uppercase;
  color: #fff;
}
.play-process .ph-pstep p {
  font-size: 0.85rem;
  color: #9aa3af;
  line-height: 1.6;
  margin: 0;
}
/* sections */
.play-process .ph-sec {
  padding: 88px 0;
}
.play-process .ph-sec-alt {
  background: #fff;
  border-top: 1px solid var(--play-line);
  padding: 56px 0;
}
.play-process .ph-shead {
  margin-bottom: 38px;
}
.play-process .ph-shead h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0;
}
.play-process .ph-shead .ph-e {
  display: block;
  margin-bottom: 10px;
}
.play-process .ph-blue {
  color: var(--play-blue);
}
/* icon chip + cards */
.play-process .ph-icon {
  color: var(--play-blue);
  margin-bottom: 14px;
  line-height: 0;
  display: block;
}
.play-process .ph-icon svg {
  width: 30px;
  height: 30px;
}
/* two-paths split */
.play-process .ph-splitc {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.play-process .ph-splitc-h {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 8px 0 14px;
  color: var(--play-graphite);
}
.play-process .ph-muted {
  color: #5b6675;
  line-height: 1.7;
}
.play-process .ph-twocards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}
.play-process .ph-icard {
  border: 1px solid var(--play-line);
  border-radius: 12px;
  padding: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: 0.25s;
}
.play-process a.ph-icard:hover {
  border-color: var(--play-blue);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(43, 108, 176, 0.4);
}
.play-process .ph-icard-go {
  margin-top: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
}
.play-process .ph-icard h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 4px;
}
.play-process .ph-icard p {
  font-size: 0.84rem;
  color: #5b6675;
  margin: 0;
  line-height: 1.55;
}
.play-process .ph-aimg {
  border: 1px solid var(--play-line);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1.3333333333;
}
.play-process .ph-aimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* terms cards */
.play-process .ph-tgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.play-process .ph-tcard {
  border: 1px solid var(--play-line);
  border-radius: 12px;
  padding: 24px;
  background: #fff;
}
.play-process .ph-tcard h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 6px;
}
.play-process .ph-tcard p {
  font-size: 0.84rem;
  color: #5b6675;
  margin: 0;
  line-height: 1.6;
}
/* light-section buttons + terms CTA row */
.play-process .ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 8px;
  transition: 0.25s;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.play-process .ph-btn-outd {
  border-color: var(--play-line);
  color: var(--play-graphite);
}
.play-process .ph-btn-outd:hover {
  border-color: var(--play-blue);
  color: var(--play-blue);
}
.play-process .ph-btn-dark {
  background: var(--play-graphite);
  color: #fff;
  border-color: var(--play-graphite);
}
.play-process .ph-btn-dark:hover {
  background: #1b212b;
  border-color: #1b212b;
  transform: translateY(-2px);
}
.play-process .ph-btn-blue {
  background: var(--play-blue);
  color: #fff;
  border-color: var(--play-blue);
}
.play-process .ph-btn-blue:hover {
  background: var(--play-blue-hover);
  border-color: var(--play-blue-hover);
  transform: translateY(-2px);
}
.play-process .ph-terms-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
}
/* =========================================================
   ABOUT PAGE  ([play_about]) - scoped under .play-about.
   ========================================================= */
.play-about {
  background: #f3f5f8;
}
.play-about .ph-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.play-about .ph-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
}
.play-about .ph-blue {
  color: var(--play-blue);
}
/* page hero */
.play-about .ph-pb {
  position: relative;
  background: var(--play-graphite);
  color: #fff;
  overflow: hidden;
  padding: 58px 0 50px;
}
.play-about .ph-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(75, 134, 214, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 134, 214, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 85% 10%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 85% 10%, #000, transparent 72%);
}
.play-about .ph-pb .ph-wrap {
  position: relative;
  z-index: 2;
}
.play-about .ph-crumb {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7d8a9b;
  margin-bottom: 14px;
}
.play-about .ph-crumb a {
  color: #7d8a9b;
  text-decoration: none;
}
.play-about .ph-crumb a:hover {
  color: #fff;
}
.play-about .ph-crumb span {
  color: #4b5666;
}
.play-about .ph-pb h1 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}
.play-about .ph-pb p {
  color: #b7c0cd;
  max-width: 62ch;
  margin-top: 10px;
  line-height: 1.6;
}
/* sections + buttons */
.play-about .ph-sec {
  padding: 88px 0;
}
.play-about .ph-sec-alt {
  background: #fff;
  border-top: 1px solid var(--play-line);
  border-bottom: 1px solid var(--play-line);
  padding: 0;
}
.play-about .ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 8px;
  transition: 0.25s;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.play-about .ph-btn-blue {
  background: var(--play-blue);
  color: #fff;
}
.play-about .ph-btn-blue:hover {
  background: var(--play-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(59, 134, 214, 0.7);
}
.play-about .ph-btn-out {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.play-about .ph-btn-out:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.play-about .ph-btn-outd {
  border-color: var(--play-line);
  color: var(--play-graphite);
}
.play-about .ph-btn-outd:hover {
  border-color: var(--play-blue);
  color: var(--play-blue);
}
.play-about .ph-btnrow {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* Why PLAY split */
.play-about .ph-splitc {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.play-about .ph-splitc-h {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 8px 0 14px;
  color: var(--play-graphite);
}
.play-about .ph-muted {
  color: #5b6675;
  line-height: 1.7;
}
.play-about .ph-aimg {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1.3333333333;
}
.play-about .ph-aimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* stat band */
.play-about .ph-statband {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--play-line);
  border-bottom: 1px solid var(--play-line);
}
.play-about .ph-st {
  padding: 30px 18px;
  border-right: 1px solid var(--play-line);
  text-align: center;
}
.play-about .ph-st:last-child {
  border-right: none;
}
.play-about .ph-st .n {
  font-family: "Bebas Neue", sans-serif;
  font-size: 3.2rem;
  color: var(--play-blue);
  line-height: 0.85;
}
.play-about .ph-st .l {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5b6675;
  margin-top: 8px;
}
/* stats + brands section */
.play-about .ph-sec-stats {
  padding: 76px 0;
}
.play-about .ph-brands {
  text-align: center;
  margin-top: 48px;
}
.play-about .ph-brands .ph-eyebrow {
  margin-bottom: 26px;
}
.play-about .ph-brow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 46px;
  align-items: center;
}
.play-about .ph-brow span {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  color: #aab2bf;
  transition: 0.2s;
}
.play-about .ph-brow span:hover {
  color: var(--play-blue);
}
/* support band */
.play-about .ph-support {
  position: relative;
  background: var(--play-graphite);
  color: #fff;
  overflow: hidden;
  padding: 96px 0;
}
.play-about .ph-support .ph-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 134, 214, 0.26), transparent 65%);
  top: -200px;
  left: 42%;
  filter: blur(14px);
}
.play-about .ph-support .ph-wrap {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 760px;
}
.play-about .ph-support h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 14px 0;
  color: #fff;
}
.play-about .ph-support h2 .ph-blue {
  color: var(--play-blue-glow);
}
.play-about .ph-support p {
  color: #b7c0cd;
  margin-bottom: 30px;
  line-height: 1.7;
}
.play-about .ph-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
/* =========================================================
   CONTACT PAGE  ([play_contact]) - scoped under .play-contact.
   ========================================================= */
.play-contact {
  background: #f3f5f8;
}
.play-contact .ph-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.play-contact .ph-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
}
/* page hero */
.play-contact .ph-pb {
  position: relative;
  background: var(--play-graphite);
  color: #fff;
  overflow: hidden;
  padding: 58px 0 50px;
}
.play-contact .ph-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(75, 134, 214, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 134, 214, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 85% 10%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 85% 10%, #000, transparent 72%);
}
.play-contact .ph-pb .ph-wrap {
  position: relative;
  z-index: 2;
}
.play-contact .ph-crumb {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7d8a9b;
  margin-bottom: 14px;
}
.play-contact .ph-crumb a {
  color: #7d8a9b;
  text-decoration: none;
}
.play-contact .ph-crumb a:hover {
  color: #fff;
}
.play-contact .ph-crumb span {
  color: #4b5666;
}
.play-contact .ph-pb h1 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}
.play-contact .ph-pb p {
  color: #b7c0cd;
  max-width: 62ch;
  margin-top: 10px;
  line-height: 1.6;
}
/* triage layout */
.play-contact .ph-sec {
  padding: 88px 0;
}
.play-contact .ph-triage {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 46px;
  align-items: start;
}
/* form card */
.play-contact .ph-form {
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 16px;
  padding: 30px 32px;
}
.play-contact .ph-form > h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.7rem;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 18px;
}
/* the contact Gravity Form (any GF on this page) - reuse the quote-form look */
.play-contact .gform_wrapper .gform_title, .play-contact .gform_wrapper .gform_description {
  display: none !important;
}
.play-contact .gform_wrapper .gform_heading {
  margin: 0 !important;
}
.play-contact .gform_wrapper .gform_fields {
  row-gap: 1.05rem !important;
  grid-row-gap: 1.05rem !important;
}
.play-contact .gform_wrapper .gfield_label {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #39414e !important;
  margin: 0 0 8px !important;
}
.play-contact .gform_wrapper .gfield_required {
  text-transform: none !important;
  letter-spacing: 0;
  font-size: 0.82em;
  font-weight: 600;
  color: #dc2626 !important;
  margin-left: 0.3rem;
}
.play-contact .gform_wrapper input[type="text"], .play-contact .gform_wrapper input[type="email"], .play-contact .gform_wrapper input[type="tel"], .play-contact .gform_wrapper .gfield select, .play-contact .gform_wrapper textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
  padding: 0.72rem 0.85rem !important;
  font-size: 0.92rem !important;
  color: var(--play-graphite) !important;
  font-family: "Montserrat", sans-serif !important;
  box-shadow: none !important;
  line-height: 1.4;
}
.play-contact .gform_wrapper input:focus, .play-contact .gform_wrapper select:focus, .play-contact .gform_wrapper textarea:focus {
  border-color: var(--play-blue) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.25) !important;
}
.play-contact .gform_wrapper textarea {
  min-height: 8rem !important;
  line-height: 1.5;
}
.play-contact .gform_wrapper .gfield select {
  height: auto !important;
  min-height: 2.95rem !important;
  line-height: 1.6 !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}
.play-contact .gform_wrapper .gform_footer {
  margin: 1.4rem 0 0 !important;
  padding: 0 !important;
}
.play-contact .gform_wrapper .gform_button, .play-contact .gform_wrapper input[type="submit"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  box-sizing: border-box;
  height: 3.15rem !important;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  cursor: pointer;
}
.play-contact .gform_wrapper .gform_button:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
.play-contact .gform_wrapper .validation_message {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.78rem !important;
  color: #dc2626 !important;
  font-weight: 600;
}
/* route-to-quote note */
.play-contact .ph-routebox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 14px 16px;
  background: #eef4fb;
  border: 1px solid #d7e5f6;
  border-radius: 10px;
  color: #3a4452;
  font-size: 0.86rem;
  line-height: 1.5;
}
.play-contact .ph-routebox svg {
  color: var(--play-blue);
  flex: 0 0 auto;
  margin-top: 1px;
}
.play-contact .ph-routebox a {
  color: var(--play-blue);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--play-blue);
}
/* reach-us column */
.play-contact .ph-contact-h {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 2.2rem;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 8px 0 22px;
}
.play-contact .ph-contactlist .it {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--play-line);
}
.play-contact .ph-contactlist .it:first-child {
  padding-top: 0;
}
.play-contact .ph-contactlist .ic {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #eef4fb;
  color: var(--play-blue);
  display: grid;
  place-items: center;
}
.play-contact .ph-contactlist h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a93a1;
  margin: 2px 0 4px;
}
.play-contact .ph-contactlist p {
  margin: 0;
  color: var(--play-graphite);
  font-size: 0.95rem;
}
.play-contact .ph-contactlist a {
  color: var(--play-graphite);
  text-decoration: none;
}
.play-contact .ph-contactlist a:hover {
  color: var(--play-blue);
}
.play-contact .ph-aimg {
  margin-top: 24px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1.6;
}
.play-contact .ph-aimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* =========================================================
   PACKAGES PAGE  ([play_packages]) - scoped under .play-packages.
   ========================================================= */
.play-packages {
  background: #f3f5f8;
}
.play-packages .ph-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.play-packages .ph-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
}
.play-packages .ph-blue {
  color: var(--play-blue);
}
/* page hero */
.play-packages .ph-pb {
  position: relative;
  background: var(--play-graphite);
  color: #fff;
  overflow: hidden;
  padding: 58px 0 50px;
}
.play-packages .ph-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(75, 134, 214, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 134, 214, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 85% 10%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 85% 10%, #000, transparent 72%);
}
.play-packages .ph-pb .ph-wrap {
  position: relative;
  z-index: 2;
}
.play-packages .ph-crumb {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7d8a9b;
  margin-bottom: 14px;
}
.play-packages .ph-crumb a {
  color: #7d8a9b;
  text-decoration: none;
}
.play-packages .ph-crumb a:hover {
  color: #fff;
}
.play-packages .ph-crumb span {
  color: #4b5666;
}
.play-packages .ph-pb h1 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}
.play-packages .ph-pb p {
  color: #b7c0cd;
  max-width: 64ch;
  margin-top: 10px;
  line-height: 1.6;
}
/* buttons */
.play-packages .ph-sec {
  padding: 88px 0;
}
.play-packages .ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 8px;
  transition: 0.25s;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.play-packages .ph-btn-blue {
  background: var(--play-blue);
  color: #fff;
}
.play-packages .ph-btn-blue:hover {
  background: var(--play-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(59, 134, 214, 0.7);
}
.play-packages .ph-btn-out {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.play-packages .ph-btn-out:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.play-packages .ph-btn-block {
  width: 100%;
}
/* package grid + cards */
.play-packages .ph-kgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.play-packages .ph-kcard {
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 16px;
  overflow: hidden;
  transition: 0.4s;
  display: flex;
  flex-direction: column;
}
.play-packages .ph-kcard:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -28px rgba(43, 108, 176, 0.32);
  border-color: #c9d4e6;
}
.play-packages .ph-kcard .head {
  position: relative;
  overflow: hidden;
  background: var(--play-graphite);
  color: #fff;
  padding: 24px;
}
.play-packages .ph-kcard .head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 130% at 88% 0%, rgba(43, 108, 176, 0.5), transparent 60%);
}
.play-packages .ph-kcard .head > * {
  position: relative;
  z-index: 2;
}
/* featured image as a clean banner in the body */
.play-packages .ph-kcard .ph-kimg {
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--play-line);
}
.play-packages .ph-kcard .ph-kimg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.play-packages .ph-kcard:hover .ph-kimg img {
  transform: scale(1.05);
}
.play-packages .ph-kcard .tier {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--play-blue-glow);
  font-weight: 700;
}
.play-packages .ph-kcard .head h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.9rem;
  text-transform: uppercase;
  margin: 6px 0;
  color: #fff;
}
.play-packages .ph-kcard .price {
  font-family: "Bebas Neue", sans-serif;
  font-size: 2rem;
  color: #fff;
}
.play-packages .ph-kcard .price small {
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  color: #c0c0c0;
  letter-spacing: 0.06em;
}
.play-packages .ph-kcard .price .woocommerce-Price-amount {
  font-family: "Bebas Neue", sans-serif;
  color: #fff;
}
.play-packages .ph-kcard .kc {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.play-packages .ph-kcard .feat {
  margin-bottom: 18px;
}
.play-packages .ph-kcard .feat ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
}
.play-packages .ph-kcard .feat li {
  position: relative;
  padding-left: 26px;
  font-size: 0.86rem;
  color: #5b6675;
  line-height: 1.4;
}
.play-packages .ph-kcard .feat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232B6CB0' stroke-width='2.2'%3E%3Cpath d='m5 12 5 5 9-11'/%3E%3C/svg%3E") no-repeat center;
}
.play-packages .ph-kcard .feat p {
  font-size: 0.86rem;
  color: #5b6675;
  line-height: 1.55;
  margin: 0;
}
.play-packages .ph-kcard .foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* empty state */
.play-packages .ph-empty {
  text-align: center;
  color: #5b6675;
  font-size: 1rem;
  padding: 30px 0;
}
.play-packages .ph-empty a {
  color: var(--play-blue);
  font-weight: 600;
  text-decoration: none;
}
/* build your own band */
.play-packages .ph-byo {
  position: relative;
  overflow: hidden;
  background: var(--play-graphite);
  color: #fff;
  border-radius: 16px;
  padding: 52px 28px;
}
.play-packages .ph-byo .ph-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 134, 214, 0.26), transparent 65%);
  top: -260px;
  left: 40%;
  filter: blur(14px);
}
.play-packages .ph-byo-in {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.play-packages .ph-byo h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 12px 0;
  color: #fff;
}
.play-packages .ph-byo h2 .ph-blue {
  color: var(--play-blue-glow);
}
.play-packages .ph-byo p {
  color: #b7c0cd;
  margin-bottom: 26px;
  line-height: 1.7;
}
.play-packages .ph-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
/* =========================================================
   BUNDLE "WHAT'S INCLUDED" section (PLAY-Bundle-Includes.php)
   Shows the bundle's real components below the summary.
   ========================================================= */
.play-includes {
  border-top: 1px solid var(--play-line);
  margin-top: 10px;
  padding: 54px 0;
}
.play-includes-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.play-includes .pi-head {
  margin-bottom: 26px;
}
.play-includes .pi-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
  display: block;
  margin-bottom: 8px;
}
.play-includes .pi-head h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0;
}
.play-includes .pi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.play-includes .pi-item {
  position: relative;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 14px;
  overflow: hidden;
  transition: 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.play-includes .pi-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--play-blue);
  z-index: 3;
  transition: 0.4s;
}
.play-includes .pi-item:hover::before {
  width: 100%;
}
.play-includes .pi-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 50px -30px rgba(43, 108, 176, 0.4);
  border-color: #c9d4e6;
}
.play-includes .pi-thumb {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
  overflow: hidden;
  border-bottom: 1px solid var(--play-line);
}
.play-includes .pi-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
  box-sizing: border-box;
  display: block;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.play-includes .pi-item:hover .pi-thumb img {
  transform: scale(1.06);
}
.play-includes .pi-qty {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--play-graphite);
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.05rem;
  line-height: 1;
  padding: 6px 10px 4px;
  border-radius: 8px;
  letter-spacing: 0.02em;
}
.play-includes .pi-info {
  padding: 14px 16px 16px;
}
.play-includes .pi-name {
  font-family: "Montserrat", sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--play-graphite);
  line-height: 1.35;
}
/* =========================================================
   BUNDLE spec row (PLAY-Bundle-Specs.php) - attributes as chips
   in the buy area, since bundles don't show them in the tab.
   ========================================================= */
.play-bspecs {
  margin: 16px 0 20px;
  border-top: 1px solid var(--play-line);
  border-bottom: 1px solid var(--play-line);
}
.play-bspec {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 22px;
  align-items: start;
  padding: 9px 0;
}
.play-bspec .ps-l {
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
  padding-top: 3px;
}
.play-bspec .ps-v {
  font-family: "Montserrat", sans-serif;
  font-size: 0.94rem;
  font-weight: 400;
  text-transform: none;
  color: var(--play-graphite);
  line-height: 1.5;
}
/* =========================================================
   REUSABLE PAGE HERO ([play_pagehero]) + LEGAL (hub + body)
   ========================================================= */
.play-pagehero {
  position: relative;
  background: var(--play-graphite);
  color: #fff;
  overflow: hidden;
  padding: 58px 0 50px;
}
.play-pagehero .ph-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(75, 134, 214, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 134, 214, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 85% 10%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 85% 10%, #000, transparent 72%);
}
.play-pagehero .ph-wrap {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.play-pagehero .ph-crumb {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7d8a9b;
  margin-bottom: 14px;
}
.play-pagehero .ph-crumb a {
  color: #7d8a9b;
  text-decoration: none;
}
.play-pagehero .ph-crumb a:hover {
  color: #fff;
}
.play-pagehero .ph-crumb span {
  color: #4b5666;
}
.play-pagehero h1 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}
.play-pagehero p {
  color: #b7c0cd;
  max-width: 64ch;
  margin-top: 10px;
  line-height: 1.6;
}
/* shared card hub (Legal, Rental Info, Locations...) */
.play-hub {
  background: #f3f5f8;
}
.play-hub .hub-sec {
  padding: 70px 0 84px;
}
.play-hub .hub-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 22px;
}
.play-hub .hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.play-hub .hub-card {
  display: block;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 14px;
  padding: 28px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.play-hub .hub-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--play-blue);
  transition: 0.4s;
}
.play-hub a.hub-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px -30px rgba(43, 108, 176, 0.35);
  border-color: #c9d4e6;
}
.play-hub a.hub-card:hover::before {
  width: 100%;
}
.play-hub .hub-card h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.7rem;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 8px;
}
.play-hub .hub-card p {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  color: #5b6675;
  line-height: 1.55;
  margin: 0 0 16px;
}
.play-hub .hub-go {
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
}
/* hub variants */
.play-hub .hub-card--wide {
  grid-column: 1 / -1;
}
.play-hub .hub-card--cta .hub-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.play-hub .hub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 8px;
  border: 2px solid transparent;
  text-decoration: none;
  transition: 0.25s;
}
.play-hub .hub-btn-blue {
  background: var(--play-blue);
  color: #fff;
}
.play-hub .hub-btn-blue:hover {
  background: var(--play-blue-hover);
}
.play-hub .hub-btn-out {
  border-color: var(--play-line);
  color: var(--play-graphite);
}
.play-hub .hub-btn-out:hover {
  border-color: var(--play-blue);
  color: var(--play-blue);
}
.play-hub .hub-card--how {
  padding: 34px 32px;
}
.play-hub .hub-card--how h2 {
  margin-bottom: 18px;
}
.play-hub .hub-how {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.play-hub .hub-step h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--play-graphite);
  margin: 0 0 6px;
}
.play-hub .hub-step p {
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
  color: #5b6675;
  line-height: 1.6;
  margin: 0;
}
/* readable legal / policy body (wrap the policy text in <div class="play-legal">) */
.play-legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 22px 84px;
  font-family: "Montserrat", sans-serif;
  color: #39414e;
  line-height: 1.75;
}
.play-legal .legal-updated {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: #8a93a1;
  margin: 0 0 2.2rem;
}
.play-legal h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 2.4rem 0 0.8rem;
}
.play-legal h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--play-graphite);
  margin: 1.6rem 0 0.5rem;
}
.play-legal p {
  margin: 0 0 1.1rem;
  font-size: 0.98rem;
}
.play-legal ul, .play-legal ol {
  margin: 0 0 1.2rem 1.2rem;
  padding: 0;
}
.play-legal li {
  margin-bottom: 0.5rem;
  font-size: 0.98rem;
}
.play-legal a {
  color: var(--play-blue);
  text-decoration: underline;
}
.play-legal strong {
  color: var(--play-graphite);
}
.play-legal hr {
  border: 0;
  border-top: 1px solid var(--play-line);
  margin: 2.4rem 0;
}
/* =========================================================
   FOOTER legal links bar (add the HTML in the Kadence footer,
   beneath the copyright line).
   ========================================================= */
.play-foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px 8px;
  margin-top: 0;
  width: 100%;
}
.play-foot-legal a {
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  color: #9aa3af;
  text-decoration: none;
  transition: 0.2s;
  white-space: nowrap;
}
.play-foot-legal a:hover {
  color: #fff;
}
.play-foot-legal a:not(:last-child)::after {
  content: "·";
  margin-left: 8px;
  color: #5b6675;
}
/* =========================================================
   FAQs page (.play-faqs) - native <details> accordion
   ========================================================= */
.play-faqs {
  max-width: 860px;
  margin: 0 auto;
  padding: 52px 22px 84px;
  font-family: "Montserrat", sans-serif;
}
.play-faqs .faq-cat {
  margin-bottom: 42px;
}
.play-faqs .faq-cat > h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.9rem;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--play-line);
}
.play-faqs .faq-q {
  border-bottom: 1px solid var(--play-line);
}
.play-faqs .faq-q summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px 2px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--play-graphite);
  transition: color 0.2s;
}
.play-faqs .faq-q summary::-webkit-details-marker {
  display: none;
}
.play-faqs .faq-q summary:hover, .play-faqs .faq-q[open] summary {
  color: var(--play-blue);
}
.play-faqs .faq-q summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid var(--play-blue);
  border-bottom: 2px solid var(--play-blue);
  transform: rotate(45deg);
  transition: transform 0.25s;
}
.play-faqs .faq-q[open] summary::after {
  transform: rotate(-135deg);
}
.play-faqs .faq-a {
  padding: 0 2px 18px;
  font-size: 0.95rem;
  color: #5b6675;
  line-height: 1.65;
}
.play-faqs .faq-a p {
  margin: 0 0 0.7rem;
}
.play-faqs .faq-a p:last-child {
  margin-bottom: 0;
}
.play-faqs .faq-a a {
  color: var(--play-blue);
  text-decoration: underline;
}
.play-faqs .faq-a ul {
  margin: 0;
  padding-left: 1.2rem;
}
.play-faqs .faq-a li {
  margin-bottom: 0.45rem;
}
.play-faqs .faq-a strong {
  color: var(--play-graphite);
}
.play-faqs .faq-cta {
  margin-top: 16px;
  text-align: center;
  background: #f3f5f8;
  border: 1px solid var(--play-line);
  border-radius: 14px;
  padding: 34px 28px;
}
.play-faqs .faq-cta h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 6px;
}
.play-faqs .faq-cta p {
  color: #5b6675;
  margin: 0 0 18px;
}
.play-faqs .faq-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.play-faqs .faq-btn {
  display: inline-flex;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: 0.2s;
}
.play-faqs .faq-btn-blue {
  background: var(--play-blue);
  color: #fff;
}
.play-faqs .faq-btn-blue:hover {
  background: var(--play-blue-hover);
}
.play-faqs .faq-btn-out {
  border-color: var(--play-line);
  color: var(--play-graphite);
}
.play-faqs .faq-btn-out:hover {
  border-color: var(--play-blue);
  color: var(--play-blue);
}
/* =========================================================
   REVIEWS PAGE ([play_reviews]) - scoped under .play-reviews
   ========================================================= */
.play-reviews {
  background: #f3f5f8;
}
.play-reviews .rv-sec {
  padding: 56px 0 84px;
}
.play-reviews .rv-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}
.play-reviews .rv-lead {
  max-width: 66ch;
  margin: 0 auto 40px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 1.02rem;
  color: #5b6675;
  line-height: 1.6;
}
/* masonry-ish grid */
.play-reviews .rv-grid {
  column-count: 3;
  column-gap: 20px;
}
.play-reviews .rv-card {
  break-inside: avoid;
  margin: 0 0 20px;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 14px;
  padding: 24px 24px 20px;
  transition: 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.play-reviews .rv-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -32px rgba(43, 108, 176, 0.4);
  border-color: #c9d4e6;
}
.play-reviews .rv-stars {
  display: flex;
  gap: 2px;
  color: #f6b01e;
  margin-bottom: 12px;
}
.play-reviews .rv-stars svg {
  width: 17px;
  height: 17px;
}
.play-reviews .rv-title {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 10px;
}
.play-reviews .rv-quote {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  color: #4a5361;
  line-height: 1.6;
  margin: 0 0 16px;
  border: 0;
  padding: 0;
}
.play-reviews .rv-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--play-line);
  padding-top: 12px;
}
.play-reviews .rv-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--play-graphite);
}
.play-reviews .rv-src {
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  color: #8a93a1;
}
/* platform totals band */
.play-reviews .rv-platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 44px 0 0;
}
.play-reviews .rv-plat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 14px;
  padding: 26px 20px;
  text-decoration: none;
  transition: 0.25s;
}
.play-reviews .rv-plat:hover {
  border-color: var(--play-blue);
  transform: translateY(-3px);
}
.play-reviews .rv-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.8rem;
  line-height: 0.9;
  color: var(--play-blue);
}
.play-reviews .rv-lbl {
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5b6675;
  margin-top: 8px;
}
.play-reviews .rv-on {
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--play-graphite);
  margin-top: 12px;
}
.play-reviews .rv-plat:hover .rv-on {
  color: var(--play-blue);
}
/* cta */
.play-reviews .rv-cta {
  text-align: center;
  margin-top: 46px;
  background: var(--play-graphite);
  color: #fff;
  border-radius: 16px;
  padding: 46px 28px;
}
.play-reviews .rv-cta h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 22px;
  color: #fff;
}
.play-reviews .rv-cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.play-reviews .rv-btn {
  display: inline-flex;
  padding: 14px 26px;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: 0.25s;
}
.play-reviews .rv-btn-blue {
  background: var(--play-blue);
  color: #fff;
}
.play-reviews .rv-btn-blue:hover {
  background: var(--play-blue-hover);
}
.play-reviews .rv-btn-out {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.play-reviews .rv-btn-out:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
/* =========================================================
   JOBS / CAREERS PAGE ([play_jobs]) - scoped under .play-jobs
   ========================================================= */
.play-jobs {
  background: #f3f5f8;
}
.play-jobs .jb-sec {
  padding: 70px 0;
}
.play-jobs .jb-sec-alt {
  background: #fff;
  border-top: 1px solid var(--play-line);
  border-bottom: 1px solid var(--play-line);
}
.play-jobs .jb-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
}
.play-jobs .jb-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
  display: block;
  margin-bottom: 10px;
}
.play-jobs .jb-h {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 10px;
}
.play-jobs .jb-sub {
  font-family: "Montserrat", sans-serif;
  color: #5b6675;
  max-width: 70ch;
  line-height: 1.6;
  margin: 0 0 28px;
}
/* intro */
.play-jobs .jb-intro {
  max-width: 760px;
}
.play-jobs .jb-intro h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 16px;
}
.play-jobs .jb-intro p {
  font-family: "Montserrat", sans-serif;
  color: #4a5361;
  line-height: 1.75;
  margin: 0 0 1.1rem;
}
/* value cards */
.play-jobs .jb-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 26px;
}
.play-jobs .jb-value {
  background: #f7f9fc;
  border: 1px solid var(--play-line);
  border-radius: 14px;
  padding: 26px;
}
.play-jobs .jb-value h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--play-blue);
  margin: 0 0 8px;
}
.play-jobs .jb-value p {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  color: #5b6675;
  line-height: 1.6;
  margin: 0;
}
/* role cards */
.play-jobs .jb-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.play-jobs .jb-role {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 14px;
  padding: 26px 28px;
  transition: 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.play-jobs .jb-role::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--play-blue);
  transition: 0.4s;
}
.play-jobs .jb-role:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 52px -32px rgba(43, 108, 176, 0.4);
  border-color: #c9d4e6;
}
.play-jobs .jb-role:hover::before {
  width: 100%;
}
.play-jobs .jb-role h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 8px;
}
.play-jobs .jb-role p {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  color: #5b6675;
  line-height: 1.6;
  margin: 0;
}
/* apply cta */
.play-jobs .jb-cta {
  position: relative;
  overflow: hidden;
  background: var(--play-graphite);
  color: #fff;
  border-radius: 16px;
  padding: 52px 28px;
  text-align: center;
}
.play-jobs .jb-cta .jb-glow {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 134, 214, 0.26), transparent 65%);
  top: -240px;
  left: 42%;
  filter: blur(14px);
}
.play-jobs .jb-cta-in {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}
.play-jobs .jb-cta h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 8px 0 14px;
  color: #fff;
}
.play-jobs .jb-cta p {
  font-family: "Montserrat", sans-serif;
  color: #b7c0cd;
  line-height: 1.7;
  margin: 0 0 26px;
}
.play-jobs .jb-btn {
  display: inline-flex;
  padding: 15px 30px;
  background: var(--play-blue);
  color: #fff;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  transition: 0.25s;
}
.play-jobs .jb-btn:hover {
  background: var(--play-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(59, 134, 214, 0.7);
}
/* =========================================================
   JOBS application form (Gravity Form) - reuse the contact look
   ========================================================= */
.play-jobs .jb-apply {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.play-jobs .jb-form {
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 16px;
  padding: 30px 32px;
  text-align: left;
  margin-top: 26px;
}
.play-jobs .gform_wrapper .gform_title, .play-jobs .gform_wrapper .gform_description {
  display: none !important;
}
.play-jobs .gform_wrapper .gform_heading {
  margin: 0 !important;
}
.play-jobs .gform_wrapper .gform_fields {
  row-gap: 1.05rem !important;
  grid-row-gap: 1.05rem !important;
}
.play-jobs .gform_wrapper .gfield_label {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #39414e !important;
  margin: 0 0 8px !important;
}
.play-jobs .gform_wrapper .gfield_required {
  text-transform: none !important;
  letter-spacing: 0;
  font-size: 0.82em;
  font-weight: 600;
  color: #dc2626 !important;
  margin-left: 0.3rem;
}
.play-jobs .gform_wrapper input[type="text"], .play-jobs .gform_wrapper input[type="email"], .play-jobs .gform_wrapper input[type="tel"], .play-jobs .gform_wrapper .gfield select, .play-jobs .gform_wrapper textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
  padding: 0.72rem 0.85rem !important;
  font-size: 0.92rem !important;
  color: var(--play-graphite) !important;
  font-family: "Montserrat", sans-serif !important;
  box-shadow: none !important;
  line-height: 1.4;
}
.play-jobs .gform_wrapper input:focus, .play-jobs .gform_wrapper select:focus, .play-jobs .gform_wrapper textarea:focus {
  border-color: var(--play-blue) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.25) !important;
}
.play-jobs .gform_wrapper textarea {
  min-height: 8rem !important;
  line-height: 1.5;
}
.play-jobs .gform_wrapper .gfield select {
  height: auto !important;
  min-height: 2.95rem !important;
  line-height: 1.6 !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}
.play-jobs .gform_wrapper .gform_footer {
  margin: 1.4rem 0 0 !important;
  padding: 0 !important;
}
.play-jobs .gform_wrapper .gform_button, .play-jobs .gform_wrapper input[type="submit"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  box-sizing: border-box;
  height: 3.15rem !important;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  cursor: pointer;
}
.play-jobs .gform_wrapper .gform_button:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
.play-jobs .gform_wrapper .validation_message {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.78rem !important;
  color: #dc2626 !important;
  font-weight: 600;
}
/* file upload field */
.play-jobs .gform_wrapper .gform_fileupload_rules, .play-jobs .gform_wrapper .gfield_description {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.74rem !important;
  color: #8a93a1 !important;
  margin-top: 6px !important;
}
.play-jobs .gform_wrapper input[type="file"] {
  width: 100% !important;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.86rem !important;
  color: #39414e !important;
  border: 1px dashed var(--play-line) !important;
  border-radius: 8px !important;
  padding: 0.7rem 0.85rem !important;
  background: #f7f9fc !important;
  cursor: pointer;
}
.play-jobs .gform_wrapper input[type="url"] {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
  padding: 0.72rem 0.85rem !important;
  font-size: 0.92rem !important;
  font-family: "Montserrat", sans-serif !important;
  color: var(--play-graphite) !important;
}
.play-jobs .gform_wrapper input[type="url"]:focus {
  border-color: var(--play-blue) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.25) !important;
}
/* jobs: "we're hiring now" banner (toggleable) */
.play-jobs .jb-hiring {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--play-blue);
  border-radius: 16px;
  padding: 24px 28px 20px;
  box-shadow: 0 22px 54px -32px rgba(43, 108, 176, 0.5);
}
.play-jobs .jb-hiring::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--play-blue);
}
.play-jobs .jb-hiring-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
  margin-bottom: 12px;
}
.play-jobs .jb-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
}
.play-jobs .jb-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  animation: jbpulse 1.8s ease-out infinite;
}
@keyframes jbpulse {
  0% {
    transform: scale(1);
    opacity: 0.65;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}
.play-jobs .jb-hiring-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--play-line);
}
.play-jobs .jb-hiring-item:first-child {
  border-top: 0;
  padding-top: 0;
}
.play-jobs .jb-hiring-txt h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 5px;
}
.play-jobs .jb-hiring-type {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: var(--play-blue);
  padding: 3px 8px;
  border-radius: 6px;
  margin-left: 8px;
  vertical-align: middle;
}
.play-jobs .jb-hiring-txt p {
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
  color: #5b6675;
  line-height: 1.55;
  margin: 0;
  max-width: 62ch;
}
.play-jobs .jb-hiring-btn {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 11px 22px;
  background: var(--play-blue);
  color: #fff;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s;
}
.play-jobs .jb-hiring-btn:hover {
  background: var(--play-blue-hover);
  transform: translateY(-2px);
}
/* =========================================================
   LOCATIONS - hub ([play_locations]) + city pages ([play_location])
   ========================================================= */
.play-locations, .play-loc {
  background: #f3f5f8;
}
.loc-sec {
  padding: 64px 0;
}
.play-loc .loc-sec-alt {
  background: #fff;
  border-top: 1px solid var(--play-line);
  border-bottom: 1px solid var(--play-line);
}
.loc-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
}
.loc-narrow {
  max-width: 820px;
}
.loc-eyebrow {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
  margin-bottom: 10px;
}
.loc-h {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 22px;
}
/* hub cards */
.loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.loc-card {
  position: relative;
  overflow: hidden;
  display: block;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 16px;
  padding: 30px;
  text-decoration: none;
  transition: 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.loc-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--play-blue);
  transition: 0.4s;
}
.loc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -34px rgba(43, 108, 176, 0.4);
  border-color: #c9d4e6;
}
.loc-card:hover::before {
  width: 100%;
}
.loc-card--home {
  grid-column: 1 / -1;
  background: var(--play-graphite);
  border-color: var(--play-graphite);
}
.loc-card--home::before {
  width: 100%;
  background: var(--play-blue);
}
.loc-tag {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
  margin-bottom: 8px;
}
.loc-card h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 10px;
}
.loc-card--home .loc-tag {
  color: var(--play-blue-glow);
}
.loc-card--home h2 {
  color: #fff;
  font-size: 2.9rem;
}
.loc-card--home p {
  font-family: "Montserrat", sans-serif;
  color: #b7c0cd;
  margin: 0 0 14px;
  max-width: 52ch;
  line-height: 1.6;
}
.loc-go {
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
}
.loc-card--home .loc-go {
  color: var(--play-blue-glow);
}
/* city page */
.loc-lead {
  font-family: "Montserrat", sans-serif;
  font-size: 1.14rem;
  line-height: 1.7;
  color: #39414e;
  margin: 0;
}
.loc-gear {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.loc-chip {
  display: inline-flex;
  align-items: center;
  background: #f7f9fc;
  border: 1px solid var(--play-line);
  border-radius: 10px;
  padding: 12px 18px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--play-graphite);
  text-decoration: none;
  transition: 0.2s;
}
.loc-chip:hover {
  border-color: var(--play-blue);
  color: var(--play-blue);
  transform: translateY(-2px);
}
.loc-why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.loc-wcard {
  background: #f7f9fc;
  border: 1px solid var(--play-line);
  border-radius: 14px;
  padding: 24px;
}
.loc-wcard h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--play-blue);
  margin: 0 0 8px;
}
.loc-wcard p {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  color: #5b6675;
  line-height: 1.6;
  margin: 0;
}
.loc-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.loc-area {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--play-graphite);
}
.loc-note {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  color: #5b6675;
  margin: 0;
}
.loc-note a {
  color: var(--play-blue);
  text-decoration: underline;
}
.loc-cta {
  position: relative;
  overflow: hidden;
  background: var(--play-graphite);
  color: #fff;
  border-radius: 16px;
  padding: 48px 28px;
  text-align: center;
}
.loc-glow {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 134, 214, 0.26), transparent 65%);
  top: -240px;
  left: 42%;
  filter: blur(14px);
}
.loc-cta-in {
  position: relative;
  z-index: 2;
}
.loc-cta h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 22px;
}
.loc-cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.loc-btn {
  display: inline-flex;
  padding: 14px 26px;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: 0.25s;
}
.loc-btn-blue {
  background: var(--play-blue);
  color: #fff;
}
.loc-btn-blue:hover {
  background: var(--play-blue-hover);
}
.loc-btn-out {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.loc-btn-out:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
/* locations city page - lead split, easy pitch, venue showcase */
.loc-lead-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: center;
}
.loc-lead-grid--solo {
  grid-template-columns: 1fr;
  max-width: 820px;
}
.loc-lead-img {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 0.8;
}
.loc-lead-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.loc-serving {
  font-family: "Montserrat", sans-serif;
  font-size: 0.86rem;
  color: #5b6675;
  margin: 16px 0 20px;
  line-height: 1.6;
}
.loc-serving strong {
  color: var(--play-graphite);
}
.loc-center {
  text-align: center;
  margin: 0 auto;
}
.loc-easy {
  font-family: "Montserrat", sans-serif;
  font-size: 1.02rem;
  color: #5b6675;
  line-height: 1.7;
  margin: 0 auto 26px;
  max-width: 64ch;
}
.loc-venues {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.loc-venue {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 16px;
  overflow: hidden;
  transition: 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.loc-venue:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -34px rgba(43, 108, 176, 0.4);
  border-color: #c9d4e6;
}
.loc-venue-img {
  aspect-ratio: 1.6;
  overflow: hidden;
  background: #f7f9fc;
}
.loc-venue-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.loc-venue:hover .loc-venue-img img {
  transform: scale(1.05);
}
.loc-venue-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}
.loc-venue-body h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 6px;
}
.loc-venue-addr {
  font-family: "Montserrat", sans-serif;
  font-size: 0.76rem;
  color: #8a93a1;
  margin: 0 0 12px;
}
.loc-venue-desc {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  color: #5b6675;
  line-height: 1.6;
  margin: 0 0 16px;
}
.loc-venue-link {
  margin-top: auto;
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
  text-decoration: none;
}
.loc-venue-link:hover {
  text-decoration: underline;
}
/* locations city page - lead redesign + spacing fix + logos */
.play-loc .loc-eyebrow {
  margin-bottom: 6px;
}
.play-loc .loc-h, .play-loc .loc-lead-h {
  margin-top: 0;
}
.loc-lead-h {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 16px;
}
.loc-lead-txt .loc-lead {
  margin-bottom: 16px;
}
.play-loc .loc-center .loc-gear {
  justify-content: center;
  margin-top: 6px;
}
/* client logos strip */
.loc-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 34px 46px;
  margin-top: 26px;
}
.loc-logo {
  height: 46px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: 0.25s;
}
.loc-logo:hover {
  filter: grayscale(0);
  opacity: 1;
}
/* =========================================================
   FOLLOW (link-in-bio) PAGE ([play_follow]) - dark link hub
   ========================================================= */
.play-follow {
  position: relative;
  overflow: hidden;
  background: var(--play-graphite);
  min-height: 78vh;
  padding: 56px 20px 76px;
}
.play-follow .fl-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(75, 134, 214, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 134, 214, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%);
}
.play-follow .fl-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 134, 214, 0.22), transparent 65%);
  top: -280px;
  left: 50%;
  transform: translateX(-50%);
  filter: blur(14px);
}
.play-follow .fl-wrap {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.play-follow .fl-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue-glow);
}
.play-follow .fl-h {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  margin: 12px 0;
}
.play-follow .fl-intro {
  font-family: "Montserrat", sans-serif;
  color: #b7c0cd;
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 44ch;
}
.play-follow .fl-social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 30px;
}
.play-follow .fl-soc {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  transition: 0.25s;
}
.play-follow .fl-soc:hover {
  border-color: var(--play-blue-glow);
  color: var(--play-blue-glow);
  background: rgba(79, 155, 238, 0.1);
  transform: translateY(-2px);
}
.play-follow .fl-soc svg {
  width: 20px;
  height: 20px;
}
.play-follow .fl-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.play-follow .fl-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  transition: 0.25s;
}
.play-follow .fl-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}
.play-follow .fl-arrow {
  flex: 0 0 auto;
  color: var(--play-blue-glow);
  transition: transform 0.25s;
}
.play-follow .fl-link:hover .fl-arrow {
  transform: translateX(4px);
}
.play-follow .fl-link--primary {
  background: var(--play-blue);
  border-color: var(--play-blue);
}
.play-follow .fl-link--primary:hover {
  background: var(--play-blue-hover);
  border-color: var(--play-blue-hover);
}
.play-follow .fl-link--primary .fl-arrow {
  color: #fff;
}
/* =========================================================
   MY ACCOUNT - brand style pass (scoped to .woocommerce-account)
   Pairs with PLAY-Account-Menu.php (endpoints, labels, order).
   Supersedes the earlier first-pass account block.
   ========================================================= */
/* ---- Layout: nav left, content right ---- */
.woocommerce-account .woocommerce {
  display: flex;
  align-items: flex-start;
  gap: 2.75rem;
}
/* Kadence puts a border-left on this wrapper; we don't want it. */
.woocommerce-account .account-navigation-wrap {
  order: 0;
  flex: 0 0 20rem;
  max-width: 20rem;
  border-left: 0;
  padding-left: 0;
}
.woocommerce-account .woocommerce-MyAccount-content {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}
/* ---- Avatar + name card ---- */
/* Kadence's avatar block is built to stack centered; we want a left-aligned row.
   Children get position/float/margin reset so nothing escapes normal flow. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--play-blue);
  color: #fff;
  border-radius: 8px;
  padding: 0.95rem 1.1rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: 0.2s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--play-blue-hover);
  color: #fff;
  transform: translateX(3px);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--play-graphite);
  box-shadow: inset 4px 0 0 var(--play-blue);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover {
  transform: none;
}
/* ---- Nav icons (inline-SVG masks, tinted by currentColor) ---- */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='21'%20r='1'/%3E%3Ccircle%20cx='20'%20cy='21'%20r='1'/%3E%3Cpath%20d='M1%201h4l2.68%2013.39a2%202%200%200%200%202%201.61h9.72a2%202%200%200%200%202-1.61L23%206H6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='21'%20r='1'/%3E%3Ccircle%20cx='20'%20cy='21'%20r='1'/%3E%3Cpath%20d='M1%201h4l2.68%2013.39a2%202%200%200%200%202%201.61h9.72a2%202%200%200%200%202-1.61L23%206H6'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--esign-card-authorization-agreement a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z'/%3E%3Cpolyline%20points='14%202%2014%208%2020%208'/%3E%3Cline%20x1='16'%20y1='13'%20x2='8'%20y2='13'/%3E%3Cline%20x1='16'%20y1='17'%20x2='8'%20y2='17'/%3E%3Cpolyline%20points='10%209%209%209%208%209'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z'/%3E%3Cpolyline%20points='14%202%2014%208%2020%208'/%3E%3Cline%20x1='16'%20y1='13'%20x2='8'%20y2='13'/%3E%3Cline%20x1='16'%20y1='17'%20x2='8'%20y2='17'/%3E%3Cpolyline%20points='10%209%209%209%208%209'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--upload-document a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4'/%3E%3Cpolyline%20points='17%208%2012%203%207%208'/%3E%3Cline%20x1='12'%20y1='3'%20x2='12'%20y2='15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4'/%3E%3Cpolyline%20points='17%208%2012%203%207%208'/%3E%3Cline%20x1='12'%20y1='3'%20x2='12'%20y2='15'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='12'%20cy='7'%20r='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='12'%20cy='7'%20r='4'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%209l9-7%209%207v11a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z'/%3E%3Cpolyline%20points='9%2022%209%2012%2015%2012%2015%2022'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%209l9-7%209%207v11a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z'/%3E%3Cpolyline%20points='9%2022%209%2012%2015%2012%2015%2022'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--payment-methods a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='1'%20y='4'%20width='22'%20height='16'%20rx='2'%20ry='2'/%3E%3Cline%20x1='1'%20y1='10'%20x2='23'%20y2='10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='1'%20y='4'%20width='22'%20height='16'%20rx='2'%20ry='2'/%3E%3Cline%20x1='1'%20y1='10'%20x2='23'%20y2='10'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--tax-exempt a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2'/%3E%3Crect%20x='8'%20y='2'%20width='8'%20height='4'%20rx='1'%20ry='1'/%3E%3Cline%20x1='8'%20y1='11'%20x2='16'%20y2='11'/%3E%3Cline%20x1='8'%20y1='15'%20x2='13'%20y2='15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2'/%3E%3Crect%20x='8'%20y='2'%20width='8'%20height='4'%20rx='1'%20ry='1'/%3E%3Cline%20x1='8'%20y1='11'%20x2='16'%20y2='11'/%3E%3Cline%20x1='8'%20y1='15'%20x2='13'%20y2='15'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4'/%3E%3Cpolyline%20points='16%2017%2021%2012%2016%207'/%3E%3Cline%20x1='21'%20y1='12'%20x2='9'%20y2='12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4'/%3E%3Cpolyline%20points='16%2017%2021%2012%2016%207'/%3E%3Cline%20x1='21'%20y1='12'%20x2='9'%20y2='12'/%3E%3C/svg%3E");
}
/* ---- Content typography ---- */
.woocommerce-account .woocommerce-MyAccount-content {
  font-family: "Montserrat", sans-serif;
  color: #39414e;
  line-height: 1.65;
}
.woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--play-graphite);
  letter-spacing: 0.01em;
}
.woocommerce-account .woocommerce-MyAccount-content a {
  color: var(--play-blue);
}
.woocommerce-account .woocommerce-MyAccount-content mark {
  background: transparent;
  color: var(--play-graphite);
  font-weight: 700;
}
/* ---- Orders / generic tables ---- */
.woocommerce-account .woocommerce-orders-table, .woocommerce-account .shop_table {
  border: 1px solid var(--play-line);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
}
.woocommerce-account .woocommerce-orders-table th, .woocommerce-account .shop_table th {
  background: #f3f5f8;
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5b6675;
  padding: 14px 16px;
}
.woocommerce-account .woocommerce-orders-table td, .woocommerce-account .shop_table td {
  padding: 14px 16px;
  border-top: 1px solid var(--play-line);
  font-size: 0.9rem;
}
/* ---- Forms ---- */
.woocommerce-account .woocommerce-MyAccount-content label {
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #39414e;
}
.woocommerce-account .woocommerce-MyAccount-content input[type="text"], .woocommerce-account .woocommerce-MyAccount-content input[type="email"], .woocommerce-account .woocommerce-MyAccount-content input[type="tel"], .woocommerce-account .woocommerce-MyAccount-content input[type="password"], .woocommerce-account .woocommerce-MyAccount-content select, .woocommerce-account .woocommerce-MyAccount-content textarea {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 8px;
  padding: 0.72rem 0.85rem;
  font-size: 0.92rem;
  font-family: "Montserrat", sans-serif;
  color: var(--play-graphite);
}
.woocommerce-account .woocommerce-MyAccount-content input:focus, .woocommerce-account .woocommerce-MyAccount-content select:focus, .woocommerce-account .woocommerce-MyAccount-content textarea:focus {
  border-color: var(--play-blue);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.25);
}
.woocommerce-account .woocommerce-MyAccount-content .required {
  color: var(--play-blue);
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-content em {
  font-size: 0.78rem;
  color: #6b7280;
  font-style: normal;
  display: inline-block;
  margin-top: 0.35rem;
}
/* ---- Buttons ---- */
.woocommerce-account .woocommerce-MyAccount-content .button, .woocommerce-account .woocommerce-Button, .woocommerce-account .woocommerce-MyAccount-content button[type="submit"], .woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--play-blue);
  color: #fff;
  border: 2px solid var(--play-blue);
  border-radius: 8px;
  padding: 12px 24px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover, .woocommerce-account .woocommerce-Button:hover, .woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover, .woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
  background: var(--play-blue-hover);
  border-color: var(--play-blue-hover);
  color: #fff;
}
/* ---- Notices (empty orders, no saved cards) → clean cards ---- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--play-line);
  border-left: 4px solid var(--play-blue);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.5rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  color: #39414e;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before {
  content: none;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button {
  margin-left: auto;
}
/* ---- Update Address ----
   Woo ships col2-set/u-column1 with float + percentage widths, and Kadence
   adds its own. We were losing on specificity, so the card sat in a right-hand
   column and the Edit link overlapped the heading. Scope through
   .woocommerce-MyAccount-content and force the layout properties.
   ------------------------------------------------------------------------ */
/* Shipping is removed from this screen, so there is only ever one address.
   auto-fit was creating a second (empty) track and halving the card. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses, .woocommerce-account .woocommerce-MyAccount-content .u-columns.woocommerce-Addresses {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column1, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column2 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 1.5rem !important;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 12px;
}
/* Kadence's generic .title centres text; add the element selector for weight. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title, .woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title.title {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  flex-wrap: nowrap !important;
  float: none !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  position: static !important;
  text-align: left !important;
  border: 0 !important;
}
/* Kadence's generic .title carries a decorative pseudo-element. Inside a flex
   row it becomes a third flex item, so space-between pushed the heading to the
   middle. Suppress it. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title::before, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title::after, .woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title.title::before, .woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title.title::after {
  content: none !important;
  display: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2, .woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title.title h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.9rem;
  line-height: 1;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  position: static !important;
  text-align: left !important;
  width: auto !important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: static !important;
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--play-blue);
  text-decoration: none;
  white-space: nowrap;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover {
  text-decoration: underline;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #39414e;
  margin: 0;
}
/* ---- Account & Password ---- */
.woocommerce-account .woocommerce-EditAccountForm .form-row {
  margin: 0 0 1.25rem;
}
.woocommerce-account .woocommerce-EditAccountForm .form-row-first, .woocommerce-account .woocommerce-EditAccountForm .form-row-last {
  width: calc(50% - .625rem);
  float: left;
}
.woocommerce-account .woocommerce-EditAccountForm .form-row-last {
  float: right;
}
.woocommerce-account .woocommerce-EditAccountForm .form-row-wide {
  width: 100%;
  clear: both;
}
.woocommerce-account .woocommerce-EditAccountForm .clear {
  clear: both;
}
.woocommerce-account .woocommerce-EditAccountForm fieldset {
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 12px;
  padding: 1.75rem 1.5rem 0.5rem;
  margin: 1.75rem 0;
  overflow: hidden;
}
/* float:left + width:100% makes <legend> flow as a block inside the fieldset
   instead of straddling the border. The :after clears the float. */
.woocommerce-account .woocommerce-EditAccountForm legend {
  float: left;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--play-graphite);
}
.woocommerce-account .woocommerce-EditAccountForm legend + * {
  clear: both;
}
/* Password eye: one rule for this screen and the login screen, at the end of this file. */
/* ---- Tax Exempt plugin form (real selectors: #aftax_* / .afform-row) ---- */
.woocommerce-account .afform-row {
  margin: 0 0 1.35rem;
}
.woocommerce-account .afform-row label, .woocommerce-account .afform-row label b {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #39414e;
  margin-bottom: 0.5rem;
}
.woocommerce-account #aftax_status_field, .woocommerce-account #aftax_expire_date {
  font-size: 0.95rem;
  color: #6b7280;
}
.woocommerce-account #aftax_textarea_field {
  min-height: 8rem;
  resize: vertical;
}
.woocommerce-account #aftax_fileupload_field {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
}
.woocommerce-account #aftax_fourth_field small {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
}
/* =========================================================
   eSIGN CARD AUTHORIZATION (My Account endpoint)
   ========================================================= */
.woocommerce-account .play-esign-intro {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  color: #5b6675;
}
.woocommerce-account .play-esign-back {
  display: inline-block;
  margin: 0 0 1.25rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--play-blue);
  text-decoration: none;
}
.woocommerce-account .play-esign-back:hover {
  text-decoration: underline;
}
.woocommerce-account .play-esign-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.woocommerce-account .play-esign-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--play-line);
  border-left: 4px solid #c0c7d1;
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
}
.woocommerce-account .play-esign-card.is-authorized {
  border-left-color: var(--play-blue);
}
.woocommerce-account .play-esign-card-id {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-right: auto;
}
.woocommerce-account .play-esign-brand {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--play-graphite);
  line-height: 1;
}
.woocommerce-account .play-esign-last4 {
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  color: #39414e;
}
.woocommerce-account .play-esign-exp {
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  color: #8a93a1;
}
.woocommerce-account .play-esign-status {
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
}
.woocommerce-account .play-esign-status.is-signed {
  background: rgba(43, 108, 176, 0.1);
  color: var(--play-blue);
}
.woocommerce-account .play-esign-status.is-unsigned {
  background: #f3f5f8;
  color: #6b7280;
}
/* The card being signed, shown inside the form */
.woocommerce-account .play-esign-chosen {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: #f3f5f8;
  border: 1px solid var(--play-line);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  margin: 0 0 1.5rem;
}
.woocommerce-account .play-esign-chosen-label {
  font-family: "Montserrat", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
}
.woocommerce-account .play-esign-chosen-card {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--play-graphite);
  line-height: 1;
}
/* =========================================================
   MY ACCOUNT - single order (view-order / order-received)
   ========================================================= */
.woocommerce-account .woocommerce-MyAccount-content mark.order-number, .woocommerce-account .woocommerce-MyAccount-content mark.order-date, .woocommerce-account .woocommerce-MyAccount-content mark.order-status {
  background: transparent;
  color: var(--play-graphite);
  font-weight: 700;
}
.woocommerce-account .woocommerce-order-details__title, .woocommerce-account .woocommerce-column__title {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 2.25rem 0 1rem;
}
/* Order details table: right-align money, weight the total row */
.woocommerce-account .order_details .product-total, .woocommerce-account .order_details tfoot td {
  text-align: right;
  white-space: nowrap;
}
.woocommerce-account .order_details tfoot th {
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5b6675;
  font-weight: 700;
  padding: 12px 16px;
  border-top: 1px solid var(--play-line);
  background: #f3f5f8;
}
.woocommerce-account .order_details tfoot td {
  padding: 12px 16px;
  border-top: 1px solid var(--play-line);
  background: #f3f5f8;
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
}
.woocommerce-account .order_details tfoot tr:last-child th, .woocommerce-account .order_details tfoot tr:last-child td {
  font-size: 1rem;
  font-weight: 700;
  color: var(--play-graphite);
}
.woocommerce-account .order_details .product-name a {
  color: var(--play-blue);
  text-decoration: none;
}
.woocommerce-account .order_details .product-name a:hover {
  text-decoration: underline;
}
.woocommerce-account .order_details .product-quantity {
  color: #8a93a1;
  font-weight: 600;
}
/* Customer details / billing address card */
.woocommerce-account .woocommerce-customer-details address {
  font-style: normal;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #39414e;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 0;
}
.woocommerce-account .woocommerce-customer-details--phone, .woocommerce-account .woocommerce-customer-details--email {
  margin: 0.35rem 0 0;
  padding: 0;
}
.woocommerce-account .woocommerce-customer-details--email {
  word-break: break-word;
}
.woocommerce-account .play-esign-note {
  flex: 0 0 100%;
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  color: #8a93a1;
  margin-top: 0.35rem;
}
/* --- Error notices (invalid order, failed login, validation) ------------- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--play-line);
  border-left: 4px solid #c53030 !important;
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.5rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  color: #39414e;
}
/* WooCommerce focuses this ul (role=alert, tabindex=-1) - suppress the focus ring
   so it doesn't read as a blue box. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error:focus, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-error:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error::before {
  content: none;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error li::before {
  content: none;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error a.wc-forward {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--play-blue);
  color: #fff;
  border: 2px solid var(--play-blue);
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error a.wc-forward:hover {
  background: var(--play-blue-hover);
  border-color: var(--play-blue-hover);
}
/* --- Account user card (replaces Kadence's avatar block, which we hide) --- */
.woocommerce-account .kadence-account-avatar {
  display: none !important;
}
.woocommerce-account .play-account-user {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.5rem;
}
.woocommerce-account img.play-account-avatar {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}
.woocommerce-account .play-account-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--play-graphite);
}
/* =========================================================
   MY ACCOUNT - single order: signature block + bundle rows
   ========================================================= */
/* Plugin prints an <h1> with a red asterisk; make it a section heading. */
.woocommerce-account .woocommerce-order-details h1 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 2.25rem 0 1rem;
}
.woocommerce-account .woocommerce-order-details h1 span {
  display: none;
}
/* the red * */
.woocommerce-account .woocommerce-customer-osw-signature {
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 1rem;
  display: inline-block;
}
.woocommerce-account .woocommerce-customer-osw-signature p {
  margin: 0;
}
.woocommerce-account #plugify_osw_signature img {
  max-width: 280px;
  height: auto;
  display: block;
}
/* Bundled children: indent, mute, and drop the empty total cell's border */
.woocommerce-account .order_details tr.bundled_table_item td {
  padding-top: 6px;
  padding-bottom: 6px;
}
.woocommerce-account .order_details .bundled-product-name {
  padding-left: 1.25rem;
  font-size: 0.86rem;
}
.woocommerce-account .order_details .bundled-product-name a {
  color: #5b6675;
}
.woocommerce-account .order_details tr.bundle_table_item td {
  border-bottom: 0;
}
/* item meta (dates) under the bundle parent */
.woocommerce-account .order_details .wc-item-meta {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.6;
}
.woocommerce-account .order_details .wc-item-meta li {
  display: flex;
  gap: 0.35rem;
  margin: 0;
}
.woocommerce-account .order_details .wc-item-meta p {
  margin: 0;
}
/* =========================================================
   Checkout - saved payment methods as selectable pills
   Markup: ul.woocommerce-SavedPaymentMethods > li >
   input.woocommerce-SavedPaymentMethods-tokenInput + label
   Stripe sets style="width:auto" inline, hence !important.
   ========================================================= */
.woocommerce-checkout ul.woocommerce-SavedPaymentMethods {
  list-style: none !important;
  margin: 0.9rem 0 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.woocommerce-checkout ul.woocommerce-SavedPaymentMethods li {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* hide the native control - the whole pill is the target */
.woocommerce-checkout input.woocommerce-SavedPaymentMethods-tokenInput {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}
/* the pill */
.woocommerce-checkout ul.woocommerce-SavedPaymentMethods li > label {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  margin: 0 !important;
  padding: 15px 18px;
  cursor: pointer;
  border: 1.5px solid var(--play-line);
  border-radius: 12px;
  background: #fff;
  transition: 0.2s;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--play-graphite) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4;
}
.woocommerce-checkout ul.woocommerce-SavedPaymentMethods li > label:hover {
  border-color: var(--play-blue);
  background: #f7fbff;
}
/* the dot, drawn on the label so it follows :checked via the sibling combinator */
.woocommerce-checkout ul.woocommerce-SavedPaymentMethods li > label::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 1.5px solid #c4ccd8;
  border-radius: 50%;
  background: #fff;
  transition: 0.15s;
}
.woocommerce-checkout input.woocommerce-SavedPaymentMethods-tokenInput:checked + label::before {
  border-color: var(--play-blue);
  border-width: 5px;
}
/* selected pill */
.woocommerce-checkout input.woocommerce-SavedPaymentMethods-tokenInput:checked + label {
  border-color: var(--play-blue);
  background: #f7fbff;
  box-shadow: 0 0 0 1px var(--play-blue);
}
/* keyboard focus, since the real input is visually hidden */
.woocommerce-checkout input.woocommerce-SavedPaymentMethods-tokenInput:focus-visible + label {
  outline: 3px solid var(--play-blue-glow);
  outline-offset: 2px;
}
/* Stripe's inline error slot shouldn't reserve space when empty */
.woocommerce-checkout .stripe-source-errors:empty {
  display: none;
}
/* --- Signed agreement PDF panel (replaces the drawn signature block) ----- */
.woocommerce-account .woocommerce-order-details h1, .woocommerce-account .woocommerce-customer-osw-signature {
  display: none !important;
}
.play-signed-doc {
  margin: 2.25rem 0 0;
}
.play-signed-doc h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 1rem;
}
.play-signed-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--play-line);
  border-left: 4px solid var(--play-blue);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}
.play-signed-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.play-signed-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--play-graphite);
}
.play-signed-when {
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  color: #8a93a1;
}
/* =========================================================
   UPLOAD DOCUMENT (My Account endpoint) - Gravity Form 5
   Mirrors the quote/contact form treatment, scoped to .play-upload
   so no other Gravity Form is affected.
   ========================================================= */
.woocommerce-account .play-upload .gform_wrapper {
  margin: 0;
}
.woocommerce-account .play-upload .gform_wrapper .gform_title, .woocommerce-account .play-upload .gform_wrapper .gform_description {
  display: none !important;
}
.woocommerce-account .play-upload .gform_wrapper .gform_heading {
  margin: 0 !important;
}
.woocommerce-account .play-upload .gform_wrapper .gform_fields {
  row-gap: 1.15rem !important;
  grid-row-gap: 1.15rem !important;
}
/* labels */
.woocommerce-account .play-upload .gform_wrapper .gfield_label {
  display: block;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #39414e !important;
  margin: 0 0 8px !important;
}
/* GF nests .gfield_required inside .gfield_required, so an em-based size
   compounds and the asterisk shrinks to a dot. Outer span: no sizing. */
.woocommerce-account .play-upload .gform_wrapper .gfield_required {
  font-size: inherit !important;
  text-transform: none !important;
  letter-spacing: 0;
  margin: 0 !important;
  padding: 0 !important;
  color: #dc2626 !important;
}
.woocommerce-account .play-upload .gform_wrapper .gfield_required_asterisk {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  line-height: 1;
  color: #dc2626 !important;
  margin-left: 0.3rem !important;
  vertical-align: middle;
}
/* "select files" button text should match the rest of the button family */
.woocommerce-account .play-upload .gform_wrapper .gform_button_select_files, .woocommerce-account .play-upload .gform_wrapper button.gform_button_select_files {
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}
.woocommerce-account .play-upload .gform_wrapper .gfield_description {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.74rem !important;
  color: #8a93a1 !important;
  padding: 0 0 0.45rem !important;
  margin: 0 !important;
}
/* text / email / tel inputs */
.woocommerce-account .play-upload .gform_wrapper input[type="text"], .woocommerce-account .play-upload .gform_wrapper input[type="email"], .woocommerce-account .play-upload .gform_wrapper input[type="tel"] {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
  padding: 0.72rem 0.85rem !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
  font-family: "Montserrat", sans-serif !important;
  color: var(--play-graphite) !important;
  box-shadow: none !important;
}
/* selects: brand chevron, real height, visible placeholder */
.woocommerce-account .play-upload .gform_wrapper select {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
  padding: 0.72rem 2.4rem 0.72rem 0.85rem !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.5 !important;
  font-size: 0.92rem !important;
  font-family: "Montserrat", sans-serif !important;
  color: var(--play-graphite) !important;
  cursor: pointer;
  box-shadow: none !important;
  background-repeat: no-repeat !important;
  background-position: right 0.9rem center !important;
  background-size: 12px 8px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%232B6CB0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.woocommerce-account .play-upload .gform_wrapper input:focus, .woocommerce-account .play-upload .gform_wrapper select:focus {
  border-color: var(--play-blue) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.25) !important;
}
/* drop zone */
.woocommerce-account .play-upload .gform_wrapper .gform_drop_area {
  border: 1.5px dashed #c4ccd8 !important;
  border-radius: 12px !important;
  background: #f7fbff !important;
  padding: 26px !important;
  text-align: center;
}
.woocommerce-account .play-upload .gform_wrapper .gform_drop_instructions {
  display: block;
  margin-bottom: 0.85rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
  color: #6b7280;
}
.woocommerce-account .play-upload .gform_wrapper .gform_button_select_files {
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0.62rem 1.2rem !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.woocommerce-account .play-upload .gform_wrapper .gform_button_select_files:hover {
  background: var(--play-blue-hover) !important;
}
/* GF prints its own file rules; our HTML note duplicated them */
.woocommerce-account .play-upload .play-upload-note {
  display: none;
}
.woocommerce-account .play-upload .gform_wrapper .gform_fileupload_rules {
  display: block;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.74rem !important;
  color: #8a93a1 !important;
  margin-top: 0.5rem !important;
}
/* submit: full-width blue block, like the quote form */
.woocommerce-account .play-upload .gform_wrapper .gform_footer {
  margin: 1.6rem 0 0 !important;
  padding: 0 !important;
}
.woocommerce-account .play-upload .gform_wrapper .gform_button, .woocommerce-account .play-upload .gform_wrapper input[type="submit"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  box-sizing: border-box;
  height: 3.15rem !important;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  cursor: pointer;
}
.woocommerce-account .play-upload .gform_wrapper .gform_button:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
/* validation */
.woocommerce-account .play-upload .gform_wrapper .validation_message {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.78rem !important;
  color: #dc2626 !important;
  font-weight: 600;
}
/* --- Cart: figures we can't know until the venue is entered -------------- */
.woocommerce-cart .cart_totals .play-tbd {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--play-graphite) !important;
  white-space: nowrap;
}
.woocommerce-cart .cart_totals .play-total-note {
  display: block;
  margin-top: 0.5rem;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #4a5361 !important;
  text-align: right;
  white-space: normal;
  max-width: 26ch;
  margin-left: auto;
}
/* the row we inject when WooCommerce hides its zero-tax row */
.woocommerce-cart .cart_totals tr.play-tax-tbd th {
  font-weight: 700 !important;
  color: #5b6675 !important;
  white-space: nowrap;
}
.woocommerce-cart .cart_totals tr.play-tax-tbd td {
  text-align: right;
}
/* =========================================================
   SERVICES PAGE  ([play_services]) - scoped under .play-services
   ========================================================= */
.play-services {
  background: #f3f5f8;
}
.play-services .sv-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
}
.play-services .sv-narrow {
  max-width: 800px;
}
.play-services .sv-sec {
  padding: 70px 0;
}
.play-services .sv-intro {
  background: #fff;
  border-bottom: 1px solid var(--play-line);
}
.play-services .sv-eyebrow {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--play-blue);
  margin-bottom: 10px;
}
.play-services .sv-blue {
  color: var(--play-blue);
}
.play-services .sv-h {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 0 0 16px;
}
.play-services .sv-h-lg {
  font-size: clamp(2.4rem, 5vw, 4rem);
}
.play-services .sv-lead {
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4a5361;
  margin: 0;
  max-width: 70ch;
}
.play-services .sv-head {
  margin-bottom: 44px;
  max-width: 70ch;
}
/* split: image + body */
.play-services .sv-split {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.play-services .sv-img {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 0.8;
  background: #e9edf3;
  position: sticky;
  top: 96px;
}
.play-services .sv-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.play-services .sv-h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--play-graphite);
  margin: 0 0 8px;
}
.play-services .sv-body > h3:not(:first-child) {
  margin-top: 32px;
}
.play-services .sv-body p {
  font-family: "Montserrat", sans-serif;
  font-size: 0.98rem;
  line-height: 1.75;
  color: #4a5361;
  margin: 0 0 14px;
}
.play-services .sv-body a {
  color: var(--play-blue);
  font-weight: 600;
  text-decoration: none;
}
.play-services .sv-body a:hover {
  text-decoration: underline;
}
.play-services .sv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.play-services .sv-list li {
  position: relative;
  padding-left: 28px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #4a5361;
}
.play-services .sv-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%232B6CB0' stroke-width='2.4'%3E%3Cpath d='m5 12 5 5 9-11'/%3E%3C/svg%3E") no-repeat center;
}
/* the honest boundaries read as notes, not warnings */
.play-services .sv-note {
  padding-left: 16px;
  border-left: 3px solid var(--play-line);
  color: #5b6675;
  font-size: 0.94rem;
}
/* rate card */
.play-services .sv-rate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 56px 0 0;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 16px;
  overflow: hidden;
}
.play-services .sv-rate-main, .play-services .sv-rate-alt {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.play-services .sv-rate-main {
  background: #f7fbff;
  border-right: 1px solid var(--play-line);
}
.play-services .sv-rate-label {
  font-family: "Montserrat", sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a93a1;
}
.play-services .sv-rate-figure {
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--play-blue);
}
.play-services .sv-rate-figure-sm {
  font-size: 2.2rem;
  color: var(--play-graphite);
}
.play-services .sv-rate-figure small {
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #5b6675;
  margin-left: 8px;
}
.play-services .sv-rate-sub {
  font-family: "Montserrat", sans-serif;
  font-size: 0.86rem;
  color: #5b6675;
}
/* cta */
.play-services .sv-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.play-services .sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: 8px;
  border: 2px solid transparent;
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: 0.25s;
}
.play-services .sv-btn-blue {
  background: var(--play-blue);
  color: #fff;
}
.play-services .sv-btn-blue:hover {
  background: var(--play-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(59, 134, 214, 0.7);
}
.play-services .sv-btn-out {
  border-color: var(--play-line);
  color: var(--play-graphite);
  background: #fff;
}
.play-services .sv-btn-out:hover {
  border-color: var(--play-blue);
  color: var(--play-blue);
}
.play-services .sv-fineprint {
  margin: 24px 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #8a93a1;
  max-width: 70ch;
}
/* =========================================================
   Services category: a technician is not a speaker
   The single-product template assumes gear - a per-day price,
   a physical-specs trust list, and a stock/availability line.
   None of that applies to an hourly service.
   ========================================================= */
.single-product .product_cat-services .play-price-row .price::after {
  content: " / hour";
}
/* the gear trust list and the date-aware availability line don't apply */
.single-product .product_cat-services .play-trust, .single-product .product_cat-services .play-avail, .single-product .product_cat-services .play-spec {
  display: none;
}
/* quantity means hours here - say so */
.single-product .product_cat-services form.cart .quantity::before {
  content: "Hours";
}
/* --- Address autocomplete dropdown (our own UI, Google's data) -----------
   Renders on checkout and on My Account -> Update Address.
   ------------------------------------------------------------------------ */
.play-ac-list {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(14, 17, 22, 0.16);
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
}
.play-ac-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.62rem 0.8rem;
  cursor: pointer;
  border-bottom: 1px solid #f1f4f8;
}
.play-ac-item:last-of-type {
  border-bottom: 0;
}
.play-ac-item:hover, .play-ac-item.is-active {
  background: #f7fbff;
}
.play-ac-main {
  font-size: 0.92rem;
  color: var(--play-graphite);
  font-weight: 600;
}
.play-ac-sub {
  font-size: 0.78rem;
  color: #8a93a1;
}
.play-ac-attrib {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px;
  background: #fff;
  border-top: 1px solid #f1f4f8;
}
.play-ac-attrib img {
  height: 14px;
  width: auto;
  display: block;
}
/* =========================================================
   Shop + category archives: notices as cards
   The empty-category message rendered as WooCommerce's bare
   blue bar, the only unstyled notice left on the site.
   ========================================================= */
.woocommerce.archive .woocommerce-info, .woocommerce.archive .woocommerce-message, .woocommerce.archive .woocommerce-no-products-found > .woocommerce-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--play-line);
  border-left: 4px solid var(--play-blue);
  border-radius: 12px;
  padding: 1.35rem 1.5rem;
  margin: 0 0 2rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #39414e;
  box-shadow: 0 1px 2px rgba(14, 17, 22, 0.04);
}
.woocommerce.archive .woocommerce-info::before, .woocommerce.archive .woocommerce-message::before {
  content: none !important;
}
.woocommerce.archive .woocommerce-info a {
  color: var(--play-blue);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce.archive .woocommerce-info a:hover {
  text-decoration: underline;
}
/* the filter rail is pointless with nothing to filter */
.tax-product_cat .play-shopmain .woocommerce-no-products-found ~ .play-chips {
  display: none;
}
/* =========================================================
   CONSOLIDATED — folded in from three separate CSS snippets
   (2026-07-09). Delete those snippets after pasting this:
     - PLAY - Legal Pages CSS
     - WooCommerce - Digital Order Signing Checkout Gate CSS
     - Gravity Forms - Remove Required Legend
   Keeping them separate is why .play-sign-head needed
   !important: this file loaded first and lost the cascade.
   ========================================================= */
/* ---------------------------------------------------------
   Legal pages  (was: PLAY - Legal Pages CSS)
   --------------------------------------------------------- */
.play-legal-page {
  --pl-blue:#2B6CB0;
  --pl-ink:#0e1116;
  --pl-body:#3a4452;
  --pl-soft:#8a93a1;
  --pl-line:#e1e6ee;
  max-width: 820px;
  margin: 0 auto;
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--pl-body);
}
.play-legal-page .pl-meta {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pl-soft);
  font-weight: 700;
  margin: 0 0 10px;
}
.play-legal-page .pl-intro {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--pl-body);
  margin: 0 0 34px;
}
.play-legal-page .pl-card {
  border: 1px solid var(--pl-line);
  border-left: 3px solid var(--pl-blue);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 16px;
  background: #fff;
}
.play-legal-page .pl-card h2 {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--pl-ink);
  margin: 0 0 8px;
  line-height: 1.1;
}
.play-legal-page .pl-card p {
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0;
}
.play-legal-page .pl-card a {
  color: var(--pl-blue);
  font-weight: 600;
  text-decoration: none;
}
.play-legal-page .pl-card a:hover {
  text-decoration: underline;
}
.play-legal-page .pl-full {
  margin: 34px 0 0;
  border: 1px solid var(--pl-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.play-legal-page .pl-full > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  color: var(--pl-blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.play-legal-page .pl-full > summary::-webkit-details-marker {
  display: none;
}
.play-legal-page .pl-full > summary::after {
  content: "+";
  font-size: 1.6rem;
  color: var(--pl-soft);
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}
.play-legal-page .pl-full[open] > summary::after {
  content: "−";
}
.play-legal-page .pl-full[open] > summary {
  border-bottom: 1px solid var(--pl-line);
}
.play-legal-page .pl-fulltext {
  padding: 8px 24px 24px;
}
.play-legal-page .pl-fulltext h3 {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--pl-ink);
  margin: 26px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--pl-line);
}
.play-legal-page .pl-fulltext p {
  font-size: 0.86rem;
  line-height: 1.62;
  margin: 0 0 12px;
  color: var(--pl-body);
}
.play-legal-page .pl-fulltext p strong {
  color: var(--pl-ink);
}
.play-legal-page .pl-fulltext p.sub {
  margin-left: 18px;
}
.play-legal-page .pl-sep {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--pl-soft);
}
.play-legal-page .pl-fulltext h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pl-ink);
  margin: 18px 0 6px;
}
.play-legal-page .pl-fulltext ul {
  margin: 0 0 12px 0;
  padding-left: 20px;
}
.play-legal-page .pl-fulltext li {
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0 0 4px;
  color: var(--pl-body);
}
/* ---------------------------------------------------------
   Checkout signing gate  (was: WooCommerce - Digital Order
   Signing Checkout Gate CSS)
   --------------------------------------------------------- */
.woocommerce-checkout .play-sign {
  margin: 1.25rem 0 0;
}
/* Sized to match the other checkout section headings (Billing Details,
   Delivery & Load-In Notes). Was 1.5rem and read smaller beside them. */
.woocommerce-checkout .play-sign-head {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.95rem;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--play-graphite);
  margin: 2.4rem 0 1.15rem;
}
.woocommerce-checkout .play-sign-lead {
  font-size: 0.85rem;
  color: #5b6675;
  line-height: 1.55;
  margin: 0 0 1rem;
}
/* card */
.woocommerce-checkout .play-card {
  border: 1px solid var(--play-line);
  border-radius: 12px;
  margin: 0 0 0.7rem;
  background: #fff;
  overflow: hidden;
}
.woocommerce-checkout .play-card:has(input[type=checkbox]:checked) {
  border-color: #bfe8d1;
}
.woocommerce-checkout .play-card-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  user-select: none;
}
.woocommerce-checkout .play-card-head:hover {
  background: #fafcff;
}
.woocommerce-checkout .play-card-title {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--play-graphite);
}
.woocommerce-checkout .play-card-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #eef4fb;
  color: var(--play-blue);
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.woocommerce-checkout .play-card-title small {
  display: block;
  font-weight: 500;
  font-size: 0.72rem;
  color: #8a93a1;
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: none;
}
.woocommerce-checkout .play-card-v {
  font-size: 0.68rem;
  color: #8a93a1;
  font-family: var(--play-mono);
}
.woocommerce-checkout .play-card-caret {
  color: #8a93a1;
  transition: transform 0.2s;
}
.woocommerce-checkout .play-card.open .play-card-caret {
  transform: rotate(180deg);
}
/* body: collapsed by default, revealed on .open */
.woocommerce-checkout .play-card-body {
  display: none;
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--play-line);
}
.woocommerce-checkout .play-card.open .play-card-body {
  display: block;
}
.woocommerce-checkout .play-card-doc {
  max-height: 220px;
  overflow: auto;
  margin: 0.85rem 0 0;
  padding: 0.85rem 1rem;
  background: #f7f9fc;
  border: 1px solid var(--play-line);
  border-radius: 9px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #3a4452;
}
.woocommerce-checkout .play-card-doc p {
  margin: 0 0 0.6rem;
}
.woocommerce-checkout .play-card-doc ul {
  margin: 0.3rem 0 0.6rem 1.1rem;
}
.woocommerce-checkout .play-card-note {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  color: #5b6675;
}
.woocommerce-checkout .play-card-readfull {
  display: inline-block;
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--play-blue);
  text-decoration: none;
}
.woocommerce-checkout .play-card-readfull:hover {
  text-decoration: underline;
}
/* card auth live amounts */
.woocommerce-checkout .play-card-amounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0.85rem 0 0;
  border: 1px solid var(--play-line);
  border-radius: 10px;
  overflow: hidden;
}
.woocommerce-checkout .play-card-amounts .cell {
  padding: 0.7rem 0.85rem;
}
.woocommerce-checkout .play-card-amounts .cell:first-child {
  background: #f7fbff;
  border-right: 1px solid var(--play-line);
}
.woocommerce-checkout .play-card-amounts .cap {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a93a1;
  margin: 0 0 0.25rem;
}
.woocommerce-checkout .play-card-amounts .amt {
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--play-graphite);
}
.woocommerce-checkout .play-card-amounts .cell:first-child .amt {
  color: var(--play-blue);
}
/* agree row - matches the save-card checkbox (alignment + size), stays bold */
.woocommerce-checkout .play-card-agree {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  font-weight: 700 !important;
  color: #3a4452;
  line-height: 1.45;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
}
.woocommerce-checkout .play-card-agree span {
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.woocommerce-checkout .play-card-agree input {
  margin: 0;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--play-blue);
  cursor: pointer;
}
.woocommerce-checkout .play-card-agree strong {
  color: var(--play-graphite);
  font-weight: 700;
}
/* signature name */
.woocommerce-checkout .play-sign-name {
  margin: 1rem 0 0.25rem;
}
.woocommerce-checkout .play-sign-name label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--play-blue);
  margin: 0 0 0.35rem;
}
.woocommerce-checkout .play-sign-name input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--play-line);
  border-radius: 8px;
  padding: 0.72rem 0.85rem;
  font-size: 0.95rem;
  background: #fff;
}
.woocommerce-checkout .play-sign-name input:focus {
  border-color: var(--play-blue);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.25);
}
/* hint + locked Place Order */
.woocommerce-checkout .play-sign-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.85rem;
  font-size: 0.78rem;
  color: #8a6516;
  background: #fdf6e9;
  border: 1px solid #f0e0bf;
  border-radius: 9px;
  line-height: 1.4;
}
.woocommerce-checkout .play-sign-hint.play-done {
  color: #237a4e;
  background: #eefaf3;
  border-color: #bfe8d1;
}
.woocommerce-checkout #place_order.play-locked {
  background: #9cb8da !important;
  border-color: #9cb8da !important;
  cursor: not-allowed;
  opacity: 1;
}
/* ---- Signature area - framed like the mockup's signature panel ---- */
.woocommerce-checkout .plugify_osw_signature_pad_wrapper h1 {
  display: none !important;
}
.woocommerce-checkout .play-sign {
  margin-bottom: 1rem;
}
.woocommerce-checkout .plugify_osw_signature_pad_wrapper {
  border: 1px solid var(--play-line);
  border-radius: 12px;
  background: #fbfcfe;
  padding: 18px 18px 16px;
  margin-top: 0;
}
.woocommerce-checkout .plugify_osw_signature_pad_wrapper::before {
  content: "Your Signature";
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--play-blue);
  margin: 0 0 12px;
}
.woocommerce-checkout .plugify_osw_signature_pad_wrapper::after {
  content: "Signing here counts as your signature under the U.S. ESIGN and UETA acts.";
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  color: #8a93a1;
  margin: 12px 0 0;
  line-height: 1.5;
}
/* the pad: the dashed frame now lives on #jsignature (8G.4), because the
   canvas is a fixed-size bitmap and must not be scaled. */
.woocommerce-checkout .plugify_signature_pad_parent canvas {
  max-height: 210px !important;
}
/* toggle (Type / Draw Signature): subtle ghost pill, not a black box */
.woocommerce-checkout .draw_or_text_button {
  display: inline-block;
  background: #fff !important;
  color: var(--play-blue) !important;
  border: 1.5px solid var(--play-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.55rem 0.95rem !important;
  margin: 0 0 0.7rem !important;
  cursor: pointer;
}
.woocommerce-checkout .draw_or_text_button:hover {
  border-color: var(--play-blue) !important;
  background: #f7fbff !important;
}
/* Save Signature: primary blue */
.woocommerce-checkout #plugify_signature_save {
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.62rem 1.15rem !important;
}
.woocommerce-checkout #plugify_signature_save:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
/* Reset / Undo / Redo: quiet ghost buttons */
.woocommerce-checkout #plugify_signature_reset, .woocommerce-checkout #plugify_signature_undo, .woocommerce-checkout #plugify_signature_redo {
  background: #fff !important;
  color: #5b6675 !important;
  border: 1.5px solid var(--play-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.58rem 0.9rem !important;
}
.woocommerce-checkout #plugify_signature_reset:hover, .woocommerce-checkout #plugify_signature_undo:hover, .woocommerce-checkout #plugify_signature_redo:hover {
  border-color: var(--play-blue) !important;
  color: var(--play-blue) !important;
  background: #f7fbff !important;
}
.woocommerce-checkout .plugify_canvas_controller {
  margin: 0.65rem 0.5rem 0 0 !important;
}
/* typed signature input renders in the signing script for a premium feel */
.woocommerce-checkout input#plugify_signature_text_data {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--play-line);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  font-size: 1.7rem;
  font-family: "Great Vibes", cursive;
  color: var(--play-graphite);
  margin-bottom: 0.6rem;
}
/* ---- Hide the plugin's signature block on the order-received / thank-you page ---- */
/* The signature lives on the signed Rental Order Sheet PDF; it doesn't belong on the
   public confirmation page. Scoped to order-received so the checkout pad is untouched. */
.woocommerce-order-received .woocommerce-customer-osw-signature {
  display: none !important;
}
.woocommerce-order-received h1:has(+ .woocommerce-customer-osw-signature) {
  display: none !important;
}
/* ---- Prompt under "Place This Rental Order" until all three agreements are
   agreed and signed. The signing script shows it while the button is locked and
   removes it once everything's set. Soft amber note, matching the balance notice. */
.woocommerce-checkout .play-sign-prompt {
  margin: 0.75rem 0 0;
  padding: 11px 13px;
  background: #fdf6e9;
  border: 1px solid #f0e0bf;
  border-radius: 8px;
  color: #8a6516;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}
/* ---------------------------------------------------------
   Gravity Forms  (was: Gravity Forms - Remove Required Legend)
   --------------------------------------------------------- */
p.gform_required_legend {
  display: none;
}
/* Quantity multiplication, on its own line under bkap's single-unit price.
   Deliberately outside #bkap-price-box - see the snippet's comment. */
.play-qty-total {
  display: block;
  margin: 0.25rem 0 1rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--play-graphite);
}
/* =========================================================
   MY ACCOUNT - Add payment method
   Real markup: form#add_payment_method > #payment >
   ul.payment_methods > li.payment_method_stripe, containing
   p.testmode-info and fieldset#wc-stripe-upe-form.

   IMPORTANT: the WooCommerce Stripe gateway builds the iframe's
   appearance by sampling COMPUTED STYLES from real elements on
   this page - labels, paragraphs, headings. Styling the gateway
   <label> as a Bebas heading leaked Bebas into Stripe's own
   labels and mandate text. So the label is hidden and our
   heading is drawn with a pseudo-element instead.
   ========================================================= */
.woocommerce-account #add_payment_method {
  max-width: 34rem;
}
/* One gateway: no radio, no label, no card-brand icons. */
.woocommerce-account #add_payment_method ul.payment_methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.woocommerce-account #add_payment_method ul.payment_methods li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
}
.woocommerce-account #add_payment_method input#payment_method_stripe {
  display: none !important;
}
.woocommerce-account #add_payment_method ul.payment_methods li > label {
  display: none !important;
}
/* Our heading, drawn where the label was - nothing for Stripe to sample. */
.woocommerce-account #add_payment_method ul.payment_methods::before {
  content: "Add a Card";
  display: block;
  margin: 0 0 1.1rem;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--play-graphite);
}
/* Strip WooCommerce's payment box chrome. */
.woocommerce-account #add_payment_method .payment_box {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce-account #add_payment_method .payment_box::before {
  content: none !important;
}
/* Test-mode notice (it has its own class). */
.woocommerce-account #add_payment_method p.testmode-info {
  background: #f7fbff;
  border: 1px solid #d6e4f5;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 1.25rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #3a4452;
}
.woocommerce-account #add_payment_method p.testmode-info a {
  color: var(--play-blue);
  font-weight: 600;
}
.woocommerce-account #add_payment_method .wc-stripe-copy-test-number {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
/* ONE card: the fieldset. The Stripe element inside stays transparent. */
.woocommerce-account #add_payment_method fieldset#wc-stripe-upe-form {
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  margin: 0 !important;
}
.woocommerce-account #add_payment_method .wc-stripe-upe-element {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Submit */
.woocommerce-account #add_payment_method .form-row {
  margin: 1.5rem 0 0;
  padding: 0;
}
.woocommerce-account #add_payment_method #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.15rem;
  background: var(--play-blue);
  color: #fff;
  border: 2px solid var(--play-blue);
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.2s;
}
.woocommerce-account #add_payment_method #place_order:hover {
  background: var(--play-blue-hover);
  border-color: var(--play-blue-hover);
}
/* The hidden input Stripe samples for field styling. Keep it Montserrat. */
.woocommerce-account #wc-stripe-hidden-style-input {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.92rem !important;
}
/* The "authorize your card" nudge */
.woocommerce-account .play-authorize-notice {
  border-left-color: #d9a441 !important;
}
.woocommerce-account .play-authorize-notice .button {
  margin-left: auto;
  flex: 0 0 auto;
}
/* =========================================================
   BATCH 8G - Mobile pass: cart + checkout
   2026-07-09

   This block REPLACES every temporary paste from today
   (probe rev 1 through rev 5, the button recipe, the CTA cap,
   the cart notice fix, the totals padding/border rules, and
   checkout rev 1 / rev 2).

   Delete all of those from the end of `PLAY - CSS Stylesheet`
   and paste this single block in their place. Nothing above
   the original file's last line should change.

   Breakpoints used here: 782 / 783 and 600 / 601. They are
   deliberately non-overlapping, so no rule's outcome depends
   on which one the browser reads last.
   ========================================================= */
/* =========================================================
   8G.1  CART TOTALS - one authority for padding and borders
   -----------------------------------------------------------
   Our injected rows (.play-setup-strike, .play-tax-tbd) carry
   three classes and outrank Kadence's `.woocommerce
   table.shop_table td` (two classes). WooCommerce's own rows
   do not. The result was two different horizontal paddings,
   two different border sets, and a --global-palette8 cell
   fill visible only on the padded ones.

   Applies at every width. The disagreement is not responsive.
   ========================================================= */
.woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--play-line) !important;
}
/* Gear Subtotal closes the table: rule above, clean air below. */
.woocommerce-cart .cart_totals table.shop_table tr.order-total th, .woocommerce-cart .cart_totals table.shop_table tr.order-total td {
  border-bottom: 0 !important;
  border-top: 1px solid var(--play-line) !important;
  padding-top: 14px !important;
}
/* =========================================================
   8G.2  CART NOTICE - text left, button right
   -----------------------------------------------------------
   The message text is a bare text node, so it becomes an
   anonymous flex item that CSS cannot select. Only the button
   can be positioned; `order:2` puts it last regardless.
   ========================================================= */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.6rem 1rem !important;
}
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message .button, .woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info .button {
  order: 2 !important;
  float: none !important;
  margin: 0 0 0 auto !important;
  flex: 0 0 auto !important;
}
/* =========================================================
   8G.3  BLUE BUTTON - one recipe, width is the only variable
   -----------------------------------------------------------
   Supersedes the geometry in the line 491 block (Proceed to
   Checkout / Place Order) and the line 875 block (notice
   button). `#ped-apply` had never been styled at all and was
   inheriting Kadence's default.
   ========================================================= */
.woocommerce-cart .checkout-button.button.alt, .woocommerce-checkout #place_order, .woocommerce-cart .woocommerce-message .button, .woocommerce-cart .woocommerce-info .button, .play-event-dates #ped-apply {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 3.15rem !important;
  padding: 0.9rem 1.4rem !important;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  white-space: normal !important;
  text-align: center !important;
  transition: 0.2s;
}
.woocommerce-cart .checkout-button.button.alt:hover, .woocommerce-checkout #place_order:hover, .woocommerce-cart .woocommerce-message .button:hover, .woocommerce-cart .woocommerce-info .button:hover, .play-event-dates #ped-apply:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
/* =========================================================
   8G.4  SIGNATURE PANEL
   -----------------------------------------------------------
   The four pad buttons were inline-blocks wrapping 3-then-1 at
   every width. Make the wrapper a flex row and give each child
   an explicit share.

   The canvas is a fixed-size bitmap (350x200) that jSignature
   writes once at init and never remeasures. It must NOT be
   stretched with CSS - scaling the element would move the
   stroke coordinates away from where the customer's finger
   was. So the dashed frame moves onto the canvas's container
   rather than the canvas being forced to fill the frame.

   Overrides line 3905 (`margin:.65rem .5rem 0 0 !important`).
   ========================================================= */
.woocommerce-checkout .plugify_osw_signature_pad_wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
/* Label, pad, and caption each claim a full row. */
.woocommerce-checkout .plugify_osw_signature_pad_wrapper::before, .woocommerce-checkout .plugify_osw_signature_pad_wrapper::after, .woocommerce-checkout .plugify_draw_signature_parent {
  flex: 0 0 100% !important;
  margin: 0 !important;
}
/* Save is primary; the three ghosts share a row. */
.woocommerce-checkout .plugify_canvas_controller {
  margin: 0 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
.woocommerce-checkout #plugify_signature_save {
  flex: 0 0 100% !important;
}
/* Frame the canvas, don't stretch it. */
.woocommerce-checkout .plugify_signature_pad_parent {
  border: 0 !important;
  background: transparent !important;
  display: flex !important;
  justify-content: center !important;
  overflow: visible !important;
}
.woocommerce-checkout #jsignature {
  border: 1px dashed #c4ccd8 !important;
  border-radius: 9px !important;
  background: #fff !important;
  overflow: hidden;
}
/* =========================================================
   iOS: empty date inputs collapse
   -----------------------------------------------------------
   Safari on iOS renders no visible content in an empty
   input[type=date] - no mm/dd/yyyy placeholder - so the control
   shrinks to its line box and sits shorter than the time field
   beside it. Desktop Safari and Chrome draw the placeholder, so
   the bug is invisible in device emulation. Declare the height,
   and turn off native appearance so iOS honours it.
   ========================================================= */
.woocommerce-checkout input[type="date"].input-text, .woocommerce-checkout input[type="time"].input-text, .play-event-dates input[type="date"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  height: 2.9rem !important;
  min-height: 2.9rem !important;
  width: 100% !important;
  padding: 0.72rem 0.85rem !important;
  font-size: 0.92rem !important;
  line-height: 1.25 !important;
  background-color: #fff !important;
}
.woocommerce-checkout input[type="date"]::-webkit-date-and-time-value, .woocommerce-checkout input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  height: 100%;
}
.woocommerce-checkout input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  padding: 2px;
  filter: invert(34%) sepia(58%) saturate(560%) hue-rotate(176deg) brightness(92%) contrast(88%);
}
/* =========================================================
   MY ACCOUNT - logged out (login / register)
   -----------------------------------------------------------
   This screen has no .woocommerce-MyAccount-content wrapper, so
   every account rule scoped under it misses. Kadence borders
   form.login / form.register directly, which left the <h2>
   stranded above the card it was meant to title.
   ========================================================= */
/* The account flex layout exists to put the nav rail beside the content.
   Logged out there IS no nav rail, so flex was treating the error notice and
   #customer_login as its two columns - which is why Login sat in column two
   and Register wrapped beneath it. Opt that screen out.
   :has() needs Safari 15.4+ / Chrome 105+. */
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
  display: block !important;
}
/* Error notice: the cart-notice card, not Kadence's bare bar. */
.woocommerce-account .woocommerce-notices-wrapper ul.woocommerce-error {
  list-style: none;
  margin: 0 0 2rem;
  padding: 1.15rem 1.35rem;
  background: #fff;
  border: 1px solid var(--play-line);
  border-left: 4px solid #c53030;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(14, 17, 22, 0.04);
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #39414e;
}
.woocommerce-account .woocommerce-notices-wrapper ul.woocommerce-error:focus, .woocommerce-account .woocommerce-notices-wrapper ul.woocommerce-error:focus-visible {
  outline: none !important;
  box-shadow: 0 1px 2px rgba(14, 17, 22, 0.04) !important;
}
.woocommerce-account .woocommerce-notices-wrapper ul.woocommerce-error::before {
  content: none !important;
}
.woocommerce-account .woocommerce-notices-wrapper ul.woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-account .woocommerce-notices-wrapper ul.woocommerce-error li::before {
  content: none !important;
}
.woocommerce-account .woocommerce-notices-wrapper ul.woocommerce-error strong {
  color: var(--play-graphite);
}
.woocommerce-account .woocommerce-notices-wrapper ul.woocommerce-error a {
  color: var(--play-blue);
  font-weight: 700;
  text-decoration: none;
}
.woocommerce-account .woocommerce-notices-wrapper ul.woocommerce-error a:hover {
  text-decoration: underline;
}
/* Two even columns. WooCommerce floats these at 47%; Kadence adds its own. */
#customer_login.u-columns.col2-set {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.75rem !important;
  align-items: start;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
}
/* OPEN QUESTION: computed values report grid-column:auto on both, yet removing
   these two lines puts Login in column 2 and wraps Register beneath it. Some
   rule we have not identified is placing .col-1 / .col-2. #customer_details on
   checkout is the same col2-set markup and may be affected too. */
#customer_login .u-column1 {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
#customer_login .u-column2 {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
#customer_login .u-column1, #customer_login .u-column2 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 16px;
  padding: 28px 30px;
}
/* The heading is the card's title. Kadence's form border comes off. */
#customer_login h2 {
  font-family: "Bebas Neue", sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.9rem !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: var(--play-graphite) !important;
  margin: 0 0 1.25rem !important;
}
#customer_login form.login, #customer_login form.register {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 0 0 !important;
  border-radius: 0 !important;
}
/* Fields */
#customer_login .form-row {
  margin: 0 0 1.15rem;
  padding: 0;
}
#customer_login label {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #39414e;
  margin: 0 0 0.42rem;
  line-height: 1.3;
}
#customer_login .required {
  color: #dc2626;
  text-decoration: none;
}
#customer_login .input-text {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
  padding: 0.72rem 0.85rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  color: var(--play-graphite);
  box-shadow: none !important;
}
#customer_login .input-text:focus {
  border-color: var(--play-blue) !important;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.25) !important;
}
/* Remember me + Log in share one <p>. Give them a row. */
#customer_login .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #3a4452;
  cursor: pointer;
}
#customer_login .woocommerce-form-login__rememberme input {
  margin: 0;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--play-blue);
  cursor: pointer;
}
/* Buttons: the site's blue block. */
#customer_login button[name="login"], #customer_login button[name="register"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 3.15rem;
  padding: 0.9rem 1.4rem;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.25;
  cursor: pointer;
  transition: 0.2s;
}
#customer_login button[name="login"]:hover, #customer_login button[name="register"]:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
/* Lost password, privacy text */
#customer_login .lost_password {
  margin: 0.9rem 0 0;
  text-align: center;
}
#customer_login .lost_password a {
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--play-blue);
  text-decoration: none;
}
#customer_login .lost_password a:hover {
  text-decoration: underline;
}
#customer_login .woocommerce-privacy-policy-text p, #customer_login form.register > p:not(.form-row) {
  font-family: "Montserrat", sans-serif;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #5b6675;
  margin: 0 0 1.15rem;
}
#customer_login .woocommerce-privacy-policy-link {
  color: var(--play-blue);
  font-weight: 600;
  text-decoration: none;
}
/* =========================================================
   Show-password eye - login screen AND Account & Password.
   -----------------------------------------------------------
   The <span> wrapping the input is inline, so its box is taller
   than the field (baseline leading) and `top:50%` centred on the
   wrong thing. Grid puts input and button in ONE cell: the input
   stretches, the button pins right and centres on the input's own
   height. No percentages, no transforms, nothing to measure.

   `align-items:center` only - NOT `place-items:center`, which
   also sets justify-items and collapses the input to its content
   width. That was the bug that put the eye under the field.

   This is the ONLY password-eye rule in the file. Four earlier
   copies were deleted; if you find a fifth, it is a mistake.
   ========================================================= */
#customer_login span.password-input, .woocommerce-account .woocommerce-EditAccountForm span.password-input {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  position: static !important;
  width: 100%;
  line-height: normal;
}
#customer_login span.password-input > input, .woocommerce-account .woocommerce-EditAccountForm span.password-input > input {
  grid-area: 1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 3rem !important;
  margin: 0 !important;
}
#customer_login span.password-input > button.show-password-input, .woocommerce-account .woocommerce-EditAccountForm span.password-input > button.show-password-input {
  grid-area: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  position: static !important;
  transform: none !important;
  inset: auto !important;
  width: 2rem !important;
  height: 2rem !important;
  margin: 0 0.6rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#customer_login span.password-input > button.show-password-input::after, .woocommerce-account .woocommerce-EditAccountForm span.password-input > button.show-password-input::after {
  content: "" !important;
  position: static !important;
  inset: auto !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  display: block !important;
  background-color: #6b7280;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%2012s4-8%2011-8%2011%208%2011%208-4%208-11%208-11-8-11-8z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%2012s4-8%2011-8%2011%208%2011%208-4%208-11%208-11-8-11-8z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E");
}
#customer_login span.password-input > button.show-password-input:hover::after, #customer_login span.password-input > button.show-password-input.display-password::after, .woocommerce-account .woocommerce-EditAccountForm span.password-input > button.show-password-input:hover::after, .woocommerce-account .woocommerce-EditAccountForm span.password-input > button.show-password-input.display-password::after {
  background-color: var(--play-blue);
}
/* =========================================================
   PLAY - Gravity Forms, shared recipe
   -----------------------------------------------------------
   Add `play-form` as a CSS class on the block wrapping any
   Gravity Form. Same treatment as the quote / contact / jobs
   forms, which are scoped copies of this and should eventually
   fold into it.
   ========================================================= */
.play-form .gform_wrapper .gform_title, .play-form .gform_wrapper .gform_description {
  display: none !important;
}
.play-form .gform_wrapper .gform_heading {
  margin: 0 !important;
}
.play-form .gform_wrapper .gform_fields {
  row-gap: 1.15rem !important;
  grid-row-gap: 1.15rem !important;
}
/* ---- Labels ---- */
.play-form .gform_wrapper .gfield_label {
  display: block;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #39414e !important;
  margin: 0 0 8px !important;
  line-height: 1.35;
}
.play-form .gform_wrapper .gfield_required {
  font-size: inherit !important;
  text-transform: none !important;
  letter-spacing: 0;
  margin: 0 !important;
  padding: 0 !important;
  color: #dc2626 !important;
}
.play-form .gform_wrapper .gfield_required_asterisk {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  line-height: 1;
  color: #dc2626 !important;
  margin-left: 0.3rem !important;
  vertical-align: middle;
}
/* Sub-labels under name / address parts */
.play-form .gform_wrapper .ginput_complex label, .play-form .gform_wrapper .gform-field-label--type-sub {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #8a93a1 !important;
  margin-top: 6px !important;
}
/* ---- Fields ---- */
.play-form .gform_wrapper input[type="text"], .play-form .gform_wrapper input[type="email"], .play-form .gform_wrapper input[type="tel"], .play-form .gform_wrapper input[type="url"], .play-form .gform_wrapper input[type="number"], .play-form .gform_wrapper input[type="date"], .play-form .gform_wrapper .gfield select, .play-form .gform_wrapper textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  background-color: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
  padding: 0.72rem 0.85rem !important;
  font-size: 0.92rem !important;
  line-height: 1.4 !important;
  font-family: "Montserrat", sans-serif !important;
  color: var(--play-graphite) !important;
  box-shadow: none !important;
}
.play-form .gform_wrapper input:focus, .play-form .gform_wrapper select:focus, .play-form .gform_wrapper textarea:focus {
  border-color: var(--play-blue) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.25) !important;
}
.play-form .gform_wrapper input::placeholder, .play-form .gform_wrapper textarea::placeholder {
  color: #737d8c !important;
  opacity: 1 !important;
}
.play-form .gform_wrapper textarea {
  min-height: 7rem !important;
  line-height: 1.5 !important;
}
/* Date inputs: same declared height as text, and iOS won't honour it
   without appearance:none. Same bug as the checkout date fields. */
.play-form .gform_wrapper input[type="date"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 2.9rem !important;
  min-height: 2.9rem !important;
}
.play-form .gform_wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  padding: 2px;
  filter: invert(34%) sepia(58%) saturate(560%) hue-rotate(176deg) brightness(92%) contrast(88%);
}
/* Selects: brand chevron, no native arrow */
.play-form .gform_wrapper .gfield select {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 2.4rem !important;
  cursor: pointer;
  background-repeat: no-repeat !important;
  background-position: right 0.9rem center !important;
  background-size: 12px 8px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%232B6CB0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* ---- File upload ---- */
.play-form .gform_wrapper .gform_drop_area {
  border: 1.5px dashed #c4ccd8 !important;
  border-radius: 12px !important;
  background: #f7fbff !important;
  padding: 26px !important;
  text-align: center;
}
.play-form .gform_wrapper .gform_drop_instructions {
  display: block;
  margin-bottom: 0.85rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
  color: #6b7280;
}
.play-form .gform_wrapper .gform_button_select_files {
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0.62rem 1.2rem !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  cursor: pointer;
}
.play-form .gform_wrapper .gform_button_select_files:hover {
  background: var(--play-blue-hover) !important;
}
.play-form .gform_wrapper .gform_fileupload_rules, .play-form .gform_wrapper .gfield_description {
  display: block;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.74rem !important;
  color: #8a93a1 !important;
  margin-top: 0.5rem !important;
  padding: 0 !important;
}
/* ---- HTML fields (Amount Due, Due Date, signature block) ---- */
.play-form .gform_wrapper .gfield--type-html {
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  color: #3a4452;
  line-height: 1.6;
}
.play-form .gform_wrapper .gfield--type-html strong, .play-form .gform_wrapper .gfield--type-html b {
  color: var(--play-graphite);
  font-weight: 700;
}
.play-form .gform_wrapper .gfield--type-html a {
  color: var(--play-blue);
  font-weight: 600;
  text-decoration: none;
}
.play-form .gform_wrapper .gfield--type-html a:hover {
  text-decoration: underline;
}
/* ---- Multi-page forms: Previous + Next/Submit on one row ---- */
.play-form .gform_wrapper .gform_page_footer {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  margin: 1.6rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.play-form .gform_wrapper .gform_page_footer .gform_previous_button, .play-form .gform_wrapper .gform_page_footer .gform_next_button, .play-form .gform_wrapper .gform_page_footer .gform_button {
  flex: 1 1 0 !important;
  width: auto !important;
  margin: 0 !important;
  min-height: 3.15rem !important;
  box-sizing: border-box;
}
/* Previous: ghost. It's a retreat, not an action. */
.play-form .gform_wrapper .gform_previous_button, .play-form .gform_wrapper input[type="button"].gform_previous_button {
  display: flex !important;
  max-width: 22rem;
  margin: 0 auto;
  background: #fff !important;
  color: var(--play-blue) !important;
  border: 2px solid var(--play-line) !important;
  border-radius: 8px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  cursor: pointer;
  transition: 0.2s;
}
.play-form .gform_wrapper .gform_previous_button:hover {
  border-color: var(--play-blue) !important;
  background: #f7fbff !important;
}
/* Next matches Submit */
.play-form .gform_wrapper .gform_next_button {
  display: flex !important;
  max-width: 22rem;
  margin: 0 auto;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  cursor: pointer;
  transition: 0.2s;
}
.play-form .gform_wrapper .gform_next_button:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
/* On the last page there's no Next, so Submit shares the row with Previous.
   The earlier `width:100%` on .gform_button would break the row - override. */
.play-form .gform_wrapper .gform_page_footer .gform_button {
  width: auto !important;
}
/* ---- Submit ---- */
.play-form .gform_wrapper .gform_footer {
  margin: 1.6rem 0 0 !important;
  padding: 0 !important;
}
.play-form .gform_wrapper .gform_button, .play-form .gform_wrapper input[type="submit"] {
  display: flex !important;
  max-width: 22rem;
  margin: 0 auto;
  box-sizing: border-box;
  min-height: 3.15rem !important;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  cursor: pointer;
  transition: 0.2s;
}
.play-form .gform_wrapper .gform_button:hover, .play-form .gform_wrapper input[type="submit"]:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
/* ---- Validation ---- */
.play-form .gform_wrapper .validation_message, .play-form .gform_wrapper .gfield_description.validation_message {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.78rem !important;
  color: #dc2626 !important;
  font-weight: 600 !important;
}
.play-form .gform_wrapper .gfield_error input, .play-form .gform_wrapper .gfield_error textarea, .play-form .gform_wrapper .gfield_error select {
  border-color: #dc2626 !important;
}
/* =========================================================
   PLAY - Gravity Forms {all_fields} summary table
   -----------------------------------------------------------
   GF renders this as nested tables with bgcolor attributes and
   <font> tags. Presentational attributes lose to CSS, so we can
   reclaim it without touching the markup. Turned into a label /
   value list: small uppercase Montserrat label, graphite value.
   ========================================================= */
/* Outer + inner tables: no chrome, no fixed widths. */
.play-form .gfield_html table, .play-form .gfield_html table table {
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}
.play-form .gfield_html table td {
  border: 0 !important;
  background: transparent !important;
  vertical-align: top;
}
/* The outer wrapper cell was a 1px grey frame. Make it a card. */
.play-form .gfield_html > table {
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.play-form .gfield_html > table > tbody > tr > td {
  padding: 0 !important;
}
/* Label rows */
.play-form .gfield_html tr[bgcolor="#EAF2FA"] > td {
  background: #f7fbff !important;
  padding: 10px 16px 4px !important;
  border-top: 1px solid var(--play-line) !important;
}
.play-form .gfield_html tr[bgcolor="#EAF2FA"]:first-child > td {
  border-top: 0 !important;
}
.play-form .gfield_html tr[bgcolor="#EAF2FA"] strong {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #5b6675 !important;
  line-height: 1.4;
}
/* Value rows */
.play-form .gfield_html tr[bgcolor="#FFFFFF"] > td {
  background: #fff !important;
  padding: 6px 16px 12px !important;
}
.play-form .gfield_html tr[bgcolor="#FFFFFF"] > td[width="20"] {
  display: none !important;
  padding: 0 !important;
  width: 0 !important;
}
/* GF wraps every value in <font>. Undo it. */
.play-form .gfield_html font {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.95rem !important;
  color: var(--play-graphite) !important;
  line-height: 1.6 !important;
}
.play-form .gfield_html tr[bgcolor="#FFFFFF"] font {
  font-weight: 400 !important;
}
.play-form .gfield_html a {
  color: var(--play-blue) !important;
  font-weight: 600;
  text-decoration: none;
}
.play-form .gfield_html a:hover {
  text-decoration: underline;
}
/* Checkbox / radio / multi-select values come through as <ul class="bulleted"> */
.play-form .gfield_html ul.bulleted {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.play-form .gfield_html ul.bulleted li {
  position: relative;
  padding-left: 18px;
  margin: 0 0 4px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  color: var(--play-graphite);
  line-height: 1.6;
}
.play-form .gfield_html ul.bulleted li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--play-blue);
}
.play-form .gfield_html ul.bulleted li:last-child {
  margin-bottom: 0;
}
/* Empty spacer cells GF leaves behind */
.play-form .gfield_html td:empty {
  display: none;
}
/* =========================================================
   404
   -----------------------------------------------------------
   Kadence's template: section.error > .page-content.entry >
   .entry-content-wrap > header.page-header > h1.page-title,
   a <p>, and form.search-form. The search submit is a real
   input Kadence hides behind an SVG icon wrap.
   ========================================================= */
body.error404 {
  background: #f3f5f8;
}
/* Kill the boxed card. The band below is the page. */
body.error404 .content-area {
  margin: 0 !important;
}
body.error404 .content-container {
  max-width: none !important;
  padding: 0 !important;
}
body.error404 .entry.content-bg, body.error404 .page-content.entry {
  background: var(--play-graphite) !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  position: relative;
}
/* The faint blue grid + glow, same as every other dark band. */
body.error404 .page-content.entry::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(75, 134, 214, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 134, 214, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 78% 12%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 78% 12%, #000, transparent 72%);
}
body.error404 .entry-content-wrap {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto !important;
  padding: 110px 40px 120px !important;
}
/* The 32px band: Kadence's `.entry { margin: 2rem 0 }` on the dark card. */
body.error404 .page-content.entry, body.error404 .page-content.entry.content-bg {
  margin: 0 !important;
}
/* Search submit: let the label decide the width, and match the field's height. */
body.error404 form.search-form .search-submit, body.error404 form.search-form input[type="submit"].search-submit {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 3.15rem !important;
  min-height: 3.15rem !important;
  padding: 0 1.75rem !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: visible !important;
  line-height: 1 !important;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: 0.2s;
}
/* The field: same height, and stop the label from eating the row. */
body.error404 form.search-form label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body.error404 .search-field {
  height: 3.15rem !important;
  min-height: 3.15rem !important;
}
/* Eyebrow. The <header> has nothing in it but the title, so it hangs here. */
body.error404 .page-header {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
body.error404 .page-header::before {
  content: "Error 404";
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--play-blue-glow);
  margin: 0 0 14px;
}
body.error404 h1.page-title {
  font-family: "Bebas Neue", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(2.8rem, 7vw, 6rem) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 !important;
  max-width: 16ch;
}
body.error404 .entry-content-wrap > p {
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #b7c0cd;
  max-width: 56ch;
  margin: 16px 0 34px;
}
/* ---- Search: one field, one blue button, on a row ---- */
body.error404 form.search-form {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 10px;
  max-width: 520px;
  margin: 0;
}
body.error404 form.search-form label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: block;
}
body.error404 .search-field {
  width: 100%;
  box-sizing: border-box;
  height: 3.15rem;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 8px !important;
  padding: 0 1rem !important;
  box-shadow: none !important;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  color: #fff !important;
}
body.error404 .search-field::placeholder {
  color: #8a93a1;
  opacity: 1;
}
body.error404 .search-field:focus {
  border-color: var(--play-blue-glow) !important;
  outline: 0;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.25) !important;
}
/* Kadence hides the real submit behind an icon. We want the button back. */
body.error404 .kadence-search-icon-wrap {
  display: none !important;
}
body.error404 .search-submit {
  position: static !important;
  opacity: 1 !important;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.15rem;
  padding: 0 1.6rem;
  cursor: pointer;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: 0.2s;
}
body.error404 .search-submit:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
/* Notices wrapper WooCommerce leaves on every page */
body.error404 .woocommerce-notices-wrapper:empty {
  display: none;
}
/* ---- 404 quick links: four doors instead of a search term ---- */
body.error404 .play-404-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
  margin: 38px 0 0;
}
body.error404 .play-404-link {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 44px 18px 20px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  transition: 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.error404 .play-404-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--play-blue-glow);
  transition: width 0.35s;
}
body.error404 .play-404-link:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-2px);
}
body.error404 .play-404-link:hover::before {
  width: 100%;
}
body.error404 .play-404-link-label {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
body.error404 .play-404-link-sub {
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #8a93a1;
}
body.error404 .play-404-link-go {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--play-blue-glow);
  transition: transform 0.25s;
}
body.error404 .play-404-link:hover .play-404-link-go {
  transform: translateY(-50%) translateX(4px);
}
/* =========================================================
   SEARCH RESULTS  (body.search)
   -----------------------------------------------------------
   Kadence gives search its own hero class (search-archive-hero-
   section) and its own title class (page-title search-title),
   so neither the 8F.8 dark band nor the Bebas clamp reach it.
   Results are li.entry-list-item > article.entry.loop-entry.

   COLUMN COUNT IS NOT SET HERE. Kadence's .grid-cols +
   .grid-lg-col-N classes own it, driven by the Customizer.
   An earlier version of this block hardcoded three columns
   with !important and quietly defeated that setting.
   ========================================================= */
body.search {
  background: #f3f5f8;
}
/* ---- Hero: same dark band as every other title bar ---- */
body.search .entry-hero.search-archive-hero-section, body.search .entry-hero.search-archive-hero-section .entry-hero-container-inner, body.search .entry-hero.search-archive-hero-section .hero-section-overlay {
  background: #0e1116 !important;
}
body.search .entry-hero .entry-header {
  min-height: 0 !important;
  padding: 58px 0 50px !important;
  margin-bottom: 0 !important;
}
body.search h1.page-title.search-title {
  font-family: "Bebas Neue", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
  letter-spacing: 0.01em !important;
  line-height: 0.95 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.search h1.page-title.search-title span {
  color: var(--play-blue-glow) !important;
}
/* ---- Results grid: reset the list, set the gutter, leave the tracks alone ---- */
body.search .content-area {
  background: #f3f5f8;
}
body.search ul#archive-container.kadence-posts-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 22px !important;
}
body.search li.entry-list-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* ---- Result card: the archive card, without the price furniture ---- */
body.search article.entry.loop-entry {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s, border-color 0.25s;
}
body.search article.entry.loop-entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  z-index: 3;
  background: var(--play-blue);
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.search article.entry.loop-entry:hover {
  transform: translateY(-6px);
  border-color: #c9d4e6 !important;
  box-shadow: 0 26px 52px -32px rgba(43, 108, 176, 0.4);
}
body.search article.entry.loop-entry:hover::before {
  width: 100%;
}
/* Thumbnail: 16:10, hairline under */
body.search .post-thumbnail {
  display: block;
  margin: 0 !important;
  overflow: hidden;
  border-bottom: 1px solid var(--play-line);
}
body.search .post-thumbnail-inner {
  aspect-ratio: 1.6;
  overflow: hidden;
  background: #f7f9fc;
}
body.search .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.search article.entry.loop-entry:hover .post-thumbnail img {
  transform: scale(1.05);
}
/* Body */
body.search article.entry.loop-entry .entry-content-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px !important;
  background: transparent !important;
}
body.search article.entry.loop-entry .entry-header {
  margin: 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
}
body.search h2.entry-title {
  font-family: "Bebas Neue", sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.5rem !important;
  line-height: 1.05 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
body.search h2.entry-title a {
  color: var(--play-graphite) !important;
  text-decoration: none;
}
body.search h2.entry-title a:hover {
  color: var(--play-blue) !important;
}
/* Excerpt, when the Customizer is showing one. Clamped to three lines so a
   long policy page can't make one card twice the height of its neighbour. */
body.search .entry-summary {
  margin: 0 !important;
  padding: 0 !important;
}
body.search .entry-summary p {
  font-family: "Montserrat", sans-serif;
  font-size: 0.86rem;
  line-height: 1.6;
  color: #5b6675;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.search .entry-meta {
  display: none !important;
}
/* Footer: "View →" as a quiet link, pinned to the bottom of the card. */
body.search .entry-footer {
  margin-top: auto !important;
  padding: 18px 0 0 !important;
  border: 0 !important;
  background: none !important;
}
body.search .entry-actions {
  margin: 0 !important;
  padding: 0 !important;
}
body.search p.more-link-wrap {
  margin: 0 !important;
}
body.search a.post-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--play-blue) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  background: none !important;
  padding: 0 !important;
}
body.search a.post-more-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s;
}
body.search a.post-more-link:hover svg {
  transform: translateX(4px);
}
body.search .woocommerce-notices-wrapper {
  display: none;
}
/* =========================================================
   SEARCH, NO RESULTS  (body.search-no-results)
   section.error > .page-content > p + form.search-form
   ========================================================= */
body.search-no-results section.error .page-content {
  background: #fff;
  border: 1px solid var(--play-line);
  border-radius: 16px;
  padding: 44px 40px;
  max-width: 720px;
  margin: 0 auto;
}
body.search-no-results section.error .page-content > p {
  font-family: "Montserrat", sans-serif;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #4a5361;
  margin: 0 0 26px;
  max-width: 52ch;
}
body.search-no-results form.search-form {
  display: flex;
  align-items: stretch;
  gap: 10px;
  max-width: 520px;
  margin: 0;
}
body.search-no-results form.search-form label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: block;
}
body.search-no-results .kadence-search-icon-wrap {
  display: none !important;
}
body.search-no-results .search-field {
  width: 100%;
  box-sizing: border-box;
  height: 3.15rem;
  background: #fff !important;
  border: 1px solid var(--play-line) !important;
  border-radius: 8px !important;
  padding: 0 1rem !important;
  box-shadow: none !important;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  color: var(--play-graphite) !important;
}
body.search-no-results .search-field:focus {
  border-color: var(--play-blue) !important;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(79, 155, 238, 0.25) !important;
}
body.search-no-results .search-submit {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 3.15rem !important;
  padding: 0 1.75rem !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  cursor: pointer;
  background: var(--play-blue) !important;
  color: #fff !important;
  border: 2px solid var(--play-blue) !important;
  border-radius: 8px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: 0.2s;
}
body.search-no-results .search-submit:hover {
  background: var(--play-blue-hover) !important;
  border-color: var(--play-blue-hover) !important;
}
/* Staff quote-cart panel sits ABOVE the cart table now (575 renders on
   woocommerce_before_cart), so it needs clearance below rather than above. */
.play-quote-save {
  margin-top: 0;
  margin-bottom: 32px;
}