/******* Do not edit this file *******
Code Snippets Manager
Saved: Jul 10 2026 | 17:36:27 */
/* =========================================================
   PLAY Event Rentals - Responsive  (ALL @media rules)
   ASE Pro > Custom Code > Custom CSS   |  load order: 2 of 2

   Must load AFTER `PLAY - CSS Stylesheet`.

   Order is deliberate and should be preserved:

     1. max-width, WIDE to NARROW.  A narrower query always
        appears later, so it wins the tie against a broader one.
        Five selectors rely on this (shop grid, packages grid,
        reviews masonry, bundle includes grid, filter-rail grid).
     2. min-width, NARROW to WIDE, for the same reason.
     3. prefers-reduced-motion, last, because it should override
        anything that animates.

   Breakpoint ladder in use (max-width):
     1200 1040 1024 980 900 820 782 767 760 720 700 600 560 520 420
   and (min-width): 601, 783, 60rem, 1024.

   The 782/783 and 600/601 pairs never overlap, so no rule's
   outcome depends on which side is read last. The remaining
   thirteen are component-scoped (home, process, packages,
   reviews, jobs, locations, services, footer) and each governs
   exactly one block. Collapsing them onto a four-rung ladder is
   worth doing, but it is a separate pass with its own testing -
   not something to fold into a move.
   ========================================================= */
@media (max-width: 1200px) {
  .tax-product_cat .play-shopmain ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 1040px) {
  .tax-product_cat .play-shoplayout {
    grid-template-columns: 1fr;
  }
  .tax-product_cat .play-rail {
    position: static;
    display: none;
  }
  .tax-product_cat .play-rail.open {
    display: block;
  }
  .tax-product_cat .play-filters-btn {
    display: inline-flex;
  }
}
/* shop landing responsive: tablet 2-up, mobile 1-up (mockup) */
@media (max-width: 1024px) {
  body.woocommerce-shop ul.products.grid-cols {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* footer bottom: on tablet/mobile, stack with the serving line on top
   (reverses the two Kadence columns when they stack) */
@media (max-width: 1024px) {
  .site-bottom-footer-inner-wrap {
    flex-direction: column-reverse !important;
  }
}
/* =========================================================
   Footer bottom bar - centre everything once it stacks
   (it flips to column-reverse at 1024px; the flex children
   kept their left alignment while the copyright, a plain
   block, centred on its own)
   ========================================================= */
@media (max-width: 1024px) {
  .site-bottom-footer-inner-wrap {
    align-items: center !important;
  }
  .site-bottom-footer-inner-wrap .site-footer-section, .site-bottom-footer-inner-wrap .footer-widget-area, .site-bottom-footer-inner-wrap .footer-html, .site-bottom-footer-inner-wrap .footer-html-inner {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .play-foot-legal {
    justify-content: center !important;
    text-align: center;
  }
  .play-foot-bottom {
    justify-content: center !important;
    text-align: center;
  }
}
/* responsive */
@media (max-width: 980px) {
  .play-packages .ph-kgrid {
    grid-template-columns: 1fr 1fr;
  }
}
/* ---- home responsive ---- */
@media (max-width: 900px) {
  .play-home .ph-wrap {
    padding: 0 22px;
  }
  .play-home .ph-hero .ph-wrap {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 54px;
    padding-bottom: 54px;
  }
  .play-home .ph-proc .ph-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .play-home .ph-sec {
    padding: 64px 0;
  }
  .play-home .ph-cgrid {
    grid-template-columns: 1fr 1fr;
  }
  .play-home ul.products.ph-featured {
    grid-template-columns: 1fr 1fr !important;
  }
  .play-home .ph-split {
    grid-template-columns: 1fr;
  }
  .play-home .ph-pstep {
    border-right: none;
    border-bottom: 1px solid #242c38;
  }
  .play-home .ph-reveal, .play-home .ph-herocard {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .play-home .ph-herocard {
    height: auto;
  }
  .play-home .ph-herocard img {
    height: auto;
    aspect-ratio: 1.3333333333;
  }
}
/* responsive */
@media (max-width: 900px) {
  .play-process .ph-wrap {
    padding: 0 22px;
  }
  .play-process .ph-proc .ph-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .play-process .ph-pstep {
    border-right: none;
    border-bottom: 1px solid #242c38;
  }
  .play-process .ph-sec {
    padding: 64px 0;
  }
  .play-process .ph-splitc {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .play-process .ph-tgrid {
    grid-template-columns: 1fr;
  }
}
/* responsive */
@media (max-width: 900px) {
  .play-about .ph-wrap {
    padding: 0 22px;
  }
  .play-about .ph-sec {
    padding: 64px 0;
  }
  .play-about .ph-splitc {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .play-about .ph-st {
    padding: 26px 10px;
  }
  .play-about .ph-st .n {
    font-size: 2.6rem;
  }
}
/* responsive */
@media (max-width: 900px) {
  .play-contact .ph-wrap {
    padding: 0 22px;
  }
  .play-contact .ph-sec {
    padding: 64px 0;
  }
  .play-contact .ph-triage {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}
@media (max-width: 900px) {
  .play-packages .ph-wrap {
    padding: 0 22px;
  }
  .play-packages .ph-sec {
    padding: 64px 0;
  }
}
@media (max-width: 900px) {
  .play-includes .pi-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 900px) {
  .play-pagehero .ph-wrap {
    padding: 0 22px;
  }
}
@media (max-width: 900px) {
  .play-reviews .rv-grid {
    column-count: 2;
  }
  .play-reviews .rv-platforms {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .play-services .sv-sec {
    padding: 52px 0;
  }
  .play-services .sv-split {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .play-services .sv-img {
    position: static;
    aspect-ratio: 1.6;
  }
}
@media (max-width: 820px) {
  .play-jobs .jb-values {
    grid-template-columns: 1fr;
  }
  .play-jobs .jb-roles {
    grid-template-columns: 1fr;
  }
  .play-jobs .jb-sec {
    padding: 52px 0;
  }
}
@media (max-width: 820px) {
  .loc-grid {
    grid-template-columns: 1fr;
  }
  .loc-why {
    grid-template-columns: 1fr;
  }
  .loc-sec {
    padding: 48px 0;
  }
}
@media (max-width: 820px) {
  .loc-lead-grid {
    grid-template-columns: 1fr;
  }
  .loc-lead-img {
    aspect-ratio: 1.6;
  }
  .loc-venues {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 782px) {
  .play-utility-msg {
    display: none;
  }
}
@media (max-width: 782px) {
  .woocommerce div.product .product_title {
    font-size: 2rem;
  }
}
/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 782px) {
  /* thumbnail sizing moved to 8G.6, which outranks 8F.5's `56px !important` */
  .woocommerce-cart .cart_totals, .woocommerce-checkout #order_review {
    position: static;
    margin-top: 1.25rem;
  }
}
@media (max-width: 782px) {
  .woocommerce-account .woocommerce {
    flex-direction: column;
  }
  .woocommerce-account .account-navigation-wrap {
    flex-basis: auto;
    max-width: 100%;
    width: 100%;
  }
}
@media (max-width: 782px) {
  .woocommerce-account .play-esign-card {
    align-items: flex-start;
  }
  .woocommerce-account .play-esign-card-id {
    margin-right: 0;
    width: 100%;
  }
}
/* =========================================================
   8G.5  GUTTER  (<= 782px)
   -----------------------------------------------------------
   Both cart and checkout live inside
   `<div class="woocommerce wp-block-group alignwide">`.
   Kadence implements alignwide by breaking OUT of the content
   column with negative margins. At phone widths there is
   nothing to break out into, so it simply consumes the
   container's edge padding. Kadence's own cards carry their
   own padding, which is why they looked inset while raw
   WooCommerce output sat flush at x=0.
   ========================================================= */
@media (max-width: 782px) {
  .woocommerce-cart .entry-content > .woocommerce.alignwide, .woocommerce-checkout .entry-content > .woocommerce.alignwide {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }
}
/* =========================================================
   8G.6  CART LINE ITEMS  (<= 782px)
   -----------------------------------------------------------
   Leave table layout behind entirely, then rebuild the row as
   a grid.

   Every `td` rule below carries `tr.cart_item` AND `td.class`
   so it scores (0,4,3) and outranks WooCommerce's responsive
   `.woocommerce table.shop_table_responsive tr td` at (0,2,3).
   Two rules of ours failed earlier for exactly this reason -
   `!important` does not rescue a lower-specificity selector.
   ========================================================= */
@media (max-width: 782px) {
  /* Event Dates: two even fields, full-width button. */
  /* Line items */
  /* Kadence's `td::before { content: attr(data-title) ":" }` pseudo-labels.
     Line items only - the totals table still needs them, and its bare-colon
     bug was fixed in PHP by adding data-title to the injected <td>. */
  .play-event-dates .ped-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.9rem 1rem !important;
    align-items: end !important;
  }
  .play-event-dates .ped-fields label {
    display: block !important;
    width: 100% !important;
  }
  .play-event-dates .ped-fields input[type="date"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0.35rem !important;
  }
  .play-event-dates .ped-fields #ped-apply {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
  }
  .woocommerce-cart table.cart, .woocommerce-cart table.cart tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .woocommerce-cart table.cart tbody tr {
    display: block;
  }
  .woocommerce-cart table.cart tr.cart_item {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) 28px !important;
    grid-auto-flow: row !important;
    gap: 8px 12px !important;
    padding: 14px 0 !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .woocommerce-cart table.cart tr.cart_item td {
    display: block !important;
    text-align: left !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .woocommerce-cart table.cart tr.cart_item td::before {
    content: none !important;
    display: none !important;
  }
  .woocommerce-cart table.cart tr.cart_item td.product-price {
    display: none !important;
  }
  .woocommerce-cart table.cart tr.cart_item td.product-thumbnail {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
  }
  .woocommerce-cart table.cart tr.cart_item td.product-thumbnail img {
    width: 64px !important;
    height: 64px !important;
  }
  .woocommerce-cart table.cart tr.cart_item td.product-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    overflow-wrap: anywhere;
  }
  .woocommerce-cart table.cart tr.cart_item td.product-remove {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
  .woocommerce-cart table.cart tr.cart_item td.product-quantity {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }
  .woocommerce-cart table.cart tr.cart_item td.product-subtotal {
    grid-column: 2 / -1 !important;
    grid-row: 3 !important;
    font-size: 1.25rem !important;
  }
}
@media (max-width: 767px) {
  body.woocommerce-shop ul.products.grid-cols {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 760px) {
  .play-quote-steps {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .play-hub .hub-grid {
    grid-template-columns: 1fr;
  }
  .play-hub .hub-how {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media (max-width: 700px) {
  .woocommerce-order-received ul.woocommerce-order-overview li {
    flex: 1 1 100%;
    border-right: 0;
    border-bottom: 1px solid var(--play-line);
  }
  .woocommerce-order-received ul.woocommerce-order-overview li:last-child {
    border-bottom: 0;
  }
}
@media (max-width: 600px) {
  .tax-product_cat .play-shopmain ul.products {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 600px) {
  .woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .woocommerce-order-received .play-order-info {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   Mobile: let button labels breathe
   .16em tracking + nowrap clipped "Add to Reservation" on
   narrow screens. Allow wrapping, ease the tracking, and let
   the button grow rather than crop its own text.
   ========================================================= */
@media (max-width: 600px) {
  /* Proceed to Checkout / Place Order: handled by 8G.3's single recipe,
     which already wraps and sets min-height. */
  .single_add_to_cart_button.button, .play-quote-instead {
    height: auto !important;
    min-height: 3.1rem;
    padding: 0.9rem 1rem !important;
    line-height: 1.25 !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.1em !important;
    white-space: normal !important;
    text-align: center;
  }
  ul.products li.product .play-card-add, ul.products li.product .add_to_cart_button, ul.products li.product .button {
    white-space: normal !important;
    letter-spacing: 0.08em !important;
    font-size: 0.66rem !important;
    line-height: 1.3 !important;
    padding: 11px 10px !important;
    height: auto !important;
  }
}
@media (max-width: 600px) {
  .play-services .sv-rate {
    grid-template-columns: 1fr;
  }
  .play-services .sv-rate-main {
    border-right: 0;
    border-bottom: 1px solid var(--play-line);
  }
  .play-services .sv-btn {
    width: 100%;
  }
}
/* =========================================================
   8G.7  CHECKOUT  (<= 600px)
   ========================================================= */
@media (max-width: 600px) {
  /* --- Section titles. 1.95rem Bebas is sized for a wide column.
     .play-sign-head (REVIEW & SIGN) and the Stripe payment label
     (CREDIT CARD) were sized elsewhere and would otherwise have
     stayed large while the other five stepped down. --- */
  /* --- One label recipe for every field. The :not() matters: the
     save-card row is a `p.form-row` wrapping sentence-case prose
     that must never be uppercased. --- */
  /* Time/date labels carry a tip icon and an asterisk. The markup's
     &nbsp; doesn't survive the inline-block, so the asterisk was
     falling to its own line. */
  /* --- Signing card head. The version string was breaking mid-token
     ("v1 (2026-" / "07)") competing with the title for a flex row
     with no room. Give it its own line under the subtitle. --- */
  /* Signature panel padding at phone widths. */
  .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, .woocommerce-checkout .play-sign-head, .woocommerce-checkout #payment .wc_payment_method > label {
    font-size: 1.55rem !important;
    margin: 2rem 0 1rem !important;
  }
  .woocommerce-checkout .woocommerce-billing-fields > h3 {
    margin-top: 0 !important;
  }
  .woocommerce-checkout .form-row > label:not(.woocommerce-form__label-for-checkbox) {
    font-family: "Montserrat", sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--play-graphite) !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.3 !important;
  }
  .woocommerce-checkout .play-venue-times .form-row > label {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.3rem !important;
  }
  .woocommerce-checkout .play-venue-times .form-row > label .play-tip, .woocommerce-checkout .play-venue-times .form-row > label .required {
    flex: 0 0 auto !important;
  }
  .woocommerce-checkout .play-card-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 0 0.75rem !important;
    align-items: start !important;
  }
  .woocommerce-checkout .play-card-num {
    grid-column: 1;
    grid-row: 1;
  }
  .woocommerce-checkout .play-card-title {
    grid-column: 2;
    grid-row: 1;
    flex: none !important;
  }
  .woocommerce-checkout .play-card-caret {
    grid-column: 3;
    grid-row: 1;
  }
  .woocommerce-checkout .play-card-v {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0.35rem;
    white-space: nowrap !important;
    justify-self: start;
  }
  .woocommerce-checkout .plugify_osw_signature_pad_wrapper {
    padding: 16px 12px 14px !important;
  }
  .woocommerce-checkout .plugify_canvas_controller {
    font-size: 0.62rem !important;
    letter-spacing: 0.06em !important;
    padding: 0.7rem 0.4rem !important;
  }
}
@media (max-width: 560px) {
  .play-process .ph-twocards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .play-packages .ph-kgrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .play-reviews .rv-grid {
    column-count: 1;
  }
}
@media (max-width: 520px) {
  .woocommerce-checkout .deposit-info {
    grid-template-columns: 1fr;
  }
  .woocommerce-checkout .deposit-info > span:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--play-line);
  }
}
@media (max-width: 520px) {
  .play-includes .pi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
@media (max-width: 420px) {
  .play-bspec {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}
/* Once there's room, all four buttons sit on one row, Save widest. */
@media (min-width: 601px) {
  .woocommerce-checkout #plugify_signature_save {
    flex: 1.6 1 0 !important;
  }
}
/* Secondary CTAs get capped once the column has room. Proceed to
   Checkout is exempt - it lives in a card that never gets wide. */
@media (min-width: 783px) {
  .play-event-dates #ped-apply, .woocommerce-cart .woocommerce-message .button, .woocommerce-cart .woocommerce-info .button {
    max-width: 22rem !important;
  }
  .play-event-dates #ped-apply {
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .woocommerce-cart .woocommerce-message .button {
    margin: 0 0 0 auto !important;
  }
}
/* If a second address ever returns, go two-up on wide screens. */
@media (min-width: 60rem) {
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses:has(.u-column2) {
    grid-template-columns: 1fr 1fr !important;
  }
}
/* Sticky info column on desktop */
@media (min-width: 1024px) {
  .single-product .content-area, .single-product .content-container, .single-product .site-container, .single-product .entry-content-wrap {
    overflow: visible !important;
  }
  .woocommerce div.product {
    align-items: flex-start;
  }
  .woocommerce div.product div.images.woocommerce-product-gallery, .woocommerce div.product .woocommerce-product-gallery {
    position: sticky !important;
    top: 6rem !important;
    height: -webkit-fit-content;
    height: fit-content;
    align-self: flex-start;
    margin-top: 0 !important;
  }
  .woocommerce div.product .ksk-gallery, .woocommerce div.product .ksk-gallery .kadence-product-gallery-main {
    margin-top: 0 !important;
  }
}
/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .play-hero .play-glow {
    animation: none !important;
  }
}
body.error404 .entry-content-wrap {
  padding: 64px 1rem 72px !important;
}
body.error404 form.search-form {
  flex-wrap: wrap;
}
body.error404 form.search-form label {
  flex: 0 0 100%;
}
body.error404 .search-submit {
  flex: 0 0 100%;
  width: 100%;
}
body.error404 .play-404-links {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 28px;
}
@media (max-width: 782px) {
  /* Column count is Kadence's, via .grid-sm-col-N. Nothing here.
     If mobile ends up two-across, that's a Customizer setting. */
  body.search ul#archive-container.kadence-posts-list {
    gap: 16px !important;
  }
  body.search-no-results section.error .page-content {
    padding: 28px 22px;
  }
  body.search-no-results form.search-form {
    flex-wrap: wrap;
  }
  body.search-no-results form.search-form label {
    flex: 0 0 100%;
  }
  body.search-no-results .search-submit {
    flex: 0 0 100%;
    width: 100% !important;
  }
}