/* UKPO v22 — production front-end refinement */
.hero{
  height:auto!important;
  aspect-ratio:1536/572!important;
  min-height:0!important;
  background:#062a55!important;
}
.hero-carousel,.hero-track,.hero-slide{width:100%;height:100%}
.hero-slide.v22-banner-slide{background:#062a55!important}
.hero-slide.v22-banner-slide img.hero-bg{
  width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center!important;
  display:block!important;background:#062a55!important;
}
.hero-slide.v22-banner-slide::after,.hero.v22-ready::after{display:none!important}
#heroDots{z-index:8}

/* Exact supplied Beginner banner: no duplicate overlay copy. */
#homeView .promo{padding-top:8px}
#homeView .promo .banner.v22-beginner-banner{
  height:auto!important;aspect-ratio:1536/572!important;
  background:#062a55!important;border-radius:14px;cursor:pointer;
}
#homeView .promo .banner.v22-beginner-banner::after{display:none!important}
#homeView .promo .banner.v22-beginner-banner img{
  width:100%!important;height:100%!important;object-fit:contain!important;
  object-position:center!important;display:block!important;background:#062a55!important;
}

/* Password visibility control */
.ukpo-pw-wrap-v22{position:relative;width:100%;display:block}
.ukpo-pw-wrap-v22>input{width:100%!important;padding-right:48px!important;box-sizing:border-box}
.ukpo-password-eye-v22{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border:0;background:transparent;color:#36596b;
  display:grid;place-items:center;cursor:pointer;border-radius:9px;padding:0;
  font-size:20px;line-height:1;z-index:2;
}
.ukpo-password-eye-v22:hover,.ukpo-password-eye-v22:focus{background:#edf6f8;outline:none}
.ukpo-password-eye-v22 svg{width:22px;height:22px;display:block}

/* V22 localized dialogs */
#ukpoDialogV22{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(9,30,49,.58)}
#ukpoDialogV22.open{display:flex}
.ukpo-dialog-card-v22{width:min(440px,100%);background:#fff;border-radius:20px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.ukpo-dialog-icon-v22{width:52px;height:52px;margin:0 auto 10px;border-radius:50%;background:#e8f7f5;color:#12324c;display:grid;place-items:center;font-size:29px}
.ukpo-dialog-title-v22{margin:0 0 10px;text-align:center;color:#10233f;font-size:22px}
.ukpo-dialog-body-v22{color:#45586a;font-size:14px;line-height:1.58;text-align:center;white-space:pre-line}
.ukpo-dialog-actions-v22{display:flex;gap:10px;margin-top:18px}
.ukpo-dialog-actions-v22 .btn{flex:1;margin:0}

/* Contact details */
.ukpo-contact-detail-v22{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.ukpo-contact-detail-v22 .ico{font-size:18px;line-height:1.3}
.ukpo-contact-detail-v22 a{color:var(--teal);font-weight:900;text-decoration:none;word-break:break-word}

/* Password-recovery copy is live, not a demo simulation. */
#forgotPasswordModal .auth-test-note,#passwordResetModal .auth-test-note{color:#5d7380}


/* ============================================================
   UKPO v22.1 — Guest / QR / education / password-eye fixes
   ============================================================ */

/* Header final crest: transparent visual integration */
img.top-logo{
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Strong, stable password control geometry */
.ukpo-pw-wrap-v22.ukpo-pw-wrap-v221{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
}
.ukpo-pw-wrap-v221 .ukpo-password-input-v221{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  padding-right:52px!important;
  box-sizing:border-box!important;
}
.ukpo-pw-wrap-v221 .ukpo-password-eye-v221{
  position:absolute!important;
  right:10px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  margin:0!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:4!important;
}

/* Member-only gate */
#ukpoMemberGate221{
  position:fixed;inset:0;z-index:12000;background:rgba(7,26,44,.62);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.ukpo-member-gate-card221{
  width:min(460px,100%);background:#fff;border-radius:22px;padding:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);text-align:center;
}
.ukpo-member-gate-card221 h2{margin:0 0 10px;color:#10233f}
.ukpo-member-gate-card221 p{margin:0;color:#536779;line-height:1.6}
.ukpo-member-gate-actions221{display:grid;gap:10px;margin-top:18px}
.ukpo-member-gate-actions221 .btn{margin:0;width:100%}

/* Education */
.ukpo-edu-icon221{
  font-weight:950;font-size:18px;display:grid;place-items:center;
}
#ukpoEducationModal221{
  position:fixed;inset:0;z-index:12050;display:none;align-items:center;
  justify-content:center;padding:18px;background:rgba(7,26,44,.66);
}
#ukpoEducationModal221.open{display:flex}
.ukpo-edu-card221{
  width:min(720px,100%);max-height:88vh;overflow:auto;position:relative;
  background:#fff;border-radius:22px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.3);
}
.ukpo-edu-card221 h2{margin:0 40px 14px 0;color:#10233f}
.ukpo-edu-card221 h3{margin:20px 0 7px;color:#0d5b6d}
.ukpo-edu-card221 p{color:#485f70;line-height:1.65}
.ukpo-edu-close221{
  position:absolute;right:14px;top:12px;border:0;background:#eef6f7;
  color:#284b5a;width:36px;height:36px;border-radius:50%;font-size:24px;cursor:pointer;
}
.ukpo-edu-warning221{
  margin-top:18px;padding:12px 14px;border-radius:12px;
  background:#fff8df;border:1px solid #efd98a;color:#69520a;line-height:1.55;
}
.ukpo-edu-sources221{
  margin-top:18px;padding-top:14px;border-top:1px solid #e1eaee;
  display:grid;gap:7px;
}
.ukpo-edu-sources221 a{color:#087f8c;font-weight:800;text-decoration:none}
.ukpo-edu-sources221 a:hover{text-decoration:underline}


/* ============================================================
   UKPO v22.1.3 — TRUE RESPONSIVE WEB LAYOUT
   Mobile keeps the existing app layout.
   Tablet and desktop use independent responsive breakpoints.
   ============================================================ */

/* ---------- Tablet: 768px–1099px ---------- */
@media (min-width:768px) and (max-width:1099px){
  html,body{
    background:#eef3f7!important;
  }
  body{
    padding:0 18px!important;
  }
  .app{
    width:min(100%,900px)!important;
    max-width:900px!important;
    min-height:100vh!important;
    padding-bottom:90px!important;
    border-left:1px solid #e0e8ed;
    border-right:1px solid #e0e8ed;
    box-shadow:0 0 36px rgba(15,45,65,.10)!important;
  }

  .topbar{
    height:76px!important;
    padding:0 20px!important;
    gap:12px!important;
  }
  .topbar .title{
    font-size:20px!important;
  }
  .avatar-btn{
    width:44px!important;
    height:44px!important;
  }
  .lang{
    max-width:104px!important;
    padding:8px 12px!important;
  }

  /* Keep supplied banner artwork at its native proportion. */
  .hero{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1536/572!important;
  }

  #home .grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px!important;
    padding:16px 20px 10px!important;
  }
  #home .grid>.tile{
    aspect-ratio:auto!important;
    min-height:150px!important;
    height:auto!important;
    padding:14px 10px!important;
    border-radius:18px!important;
  }
  #home .tile b{
    font-size:17px!important;
    min-height:0!important;
  }
  #home .tile small{
    font-size:11px!important;
    min-height:0!important;
  }
  #home .tile .mono-icon,
  #home .tile .ico{
    width:43px!important;
    height:43px!important;
    font-size:40px!important;
  }

  #homeView .promo{
    padding:10px 20px 24px!important;
  }

  .page{
    padding:24px 24px 38px!important;
  }
  .page h1{
    font-size:30px!important;
    margin-bottom:18px!important;
  }
  .card{
    padding:18px!important;
    border-radius:17px!important;
  }

  /* Activities / bookings become two-column tablet layouts. */
  #activitiesList,
  #bookingsList{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
    align-items:stretch!important;
  }
  #activitiesList>.card,
  #bookingsList>.card{
    margin:0!important;
    height:100%!important;
  }
  #activitiesList>.notice,
  #bookingsList>.notice,
  #activitiesList>.booking-suspension-notice,
  #bookingsList>.booking-suspension-notice{
    grid-column:1/-1!important;
  }

  /* Membership and account use available horizontal space. */
  #membershipPage .membership-options{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }
  #membershipPage .membership-option{
    min-height:145px!important;
  }
  #membershipPage .form-grid,
  #accountPage .form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .membership-manage-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .account-info-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
  }

  /* Shop expands beyond the phone-only 2-column layout. */
  .shop-category-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px!important;
  }
  .level-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }

  /* Education / policies are wider but remain easy to read. */
  .teaching-resource-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }
  .teaching-resource-card{
    min-height:185px!important;
  }
  .policy-index{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }

  .official-video-card{
    grid-template-columns:190px 1fr!important;
    gap:16px!important;
    padding:14px!important;
  }

  .activity-detail-card{
    width:min(650px,92vw)!important;
  }
  .pay-card,
  .notice-detail-card,
  .auth-modal-card{
    width:min(620px,92vw)!important;
  }
  .ukpo-edu-card221{
    width:min(780px,92vw)!important;
  }

  .bottomnav{
    width:min(900px,calc(100% - 36px))!important;
    height:82px!important;
  }
  .bottomnav button{
    font-size:12px!important;
  }
}

/* ---------- Desktop / Laptop: 1100px and wider ---------- */
@media (min-width:1100px){
  html,body{
    background:#edf2f6!important;
  }
  body{
    padding:0 28px!important;
  }
  .app{
    width:min(calc(100vw - 56px),1180px)!important;
    max-width:1180px!important;
    min-height:100vh!important;
    padding-bottom:34px!important;
    border-left:1px solid #dce5eb;
    border-right:1px solid #dce5eb;
    box-shadow:0 0 44px rgba(15,45,65,.11)!important;
  }

  .topbar{
    height:82px!important;
    padding:0 28px!important;
    gap:14px!important;
  }
  .topbar .title{
    font-size:23px!important;
  }
  .menu{
    font-size:32px!important;
  }
  .avatar-btn{
    width:46px!important;
    height:46px!important;
  }
  .lang{
    max-width:116px!important;
    padding:9px 13px!important;
    font-size:14px!important;
  }
  .bell{
    padding:7px!important;
  }

  /*
   * Desktop navigation:
   * Reuse the existing navigation and move it underneath the header.
   * This keeps all existing Supabase/page-routing behaviour untouched.
   */
  .bottomnav{
    position:fixed!important;
    left:50%!important;
    top:82px!important;
    bottom:auto!important;
    transform:translateX(-50%)!important;
    width:min(calc(100vw - 56px),1180px)!important;
    height:60px!important;
    grid-template-columns:repeat(5,minmax(120px,180px))!important;
    justify-content:center!important;
    border-top:0!important;
    border-bottom:1px solid var(--line)!important;
    box-shadow:0 7px 18px rgba(26,53,71,.08)!important;
    z-index:58!important;
  }
  .bottomnav button{
    position:relative!important;
    flex-direction:row!important;
    gap:9px!important;
    min-height:60px!important;
    padding:8px 16px!important;
    font-size:14px!important;
    background:#fff!important;
  }
  .bottomnav .ico{
    font-size:23px!important;
  }
  .bottomnav .nav-svg-icon,
  .bottomnav button#moreBtn .nav-svg-icon,
  .nav-svg-icon.pickleball-nav-icon{
    width:23px!important;
    height:23px!important;
  }
  .bottomnav button.active:after{
    position:absolute!important;
    left:20%!important;
    right:20%!important;
    bottom:0!important;
    width:auto!important;
    height:3px!important;
    margin:0!important;
  }

  /* Reserve space for the desktop nav below the fixed header. */
  #homeView{
    padding-top:60px!important;
  }
  .page{
    padding:92px 34px 44px!important;
  }
  .page h1{
    font-size:34px!important;
    margin:0 0 22px!important;
  }

  /* Main promotional artwork stays proportional, not stretched. */
  .hero{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1536/572!important;
    max-height:440px!important;
  }
  .hero-slide.v22-banner-slide img.hero-bg{
    object-fit:contain!important;
  }

  /* Six home actions become one balanced desktop row. */
  #home .grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;
    gap:14px!important;
    padding:18px 24px 12px!important;
  }
  #home .grid>.tile{
    aspect-ratio:auto!important;
    min-height:154px!important;
    height:auto!important;
    padding:16px 10px!important;
    border-radius:18px!important;
  }
  #home .tile b{
    font-size:16px!important;
    line-height:1.18!important;
    min-height:0!important;
  }
  #home .tile small{
    font-size:10px!important;
    min-height:0!important;
  }
  #home .tile .mono-icon,
  #home .tile .ico{
    width:44px!important;
    height:44px!important;
    font-size:41px!important;
  }
  #homeView .promo{
    padding:12px 24px 32px!important;
  }

  .card{
    padding:20px!important;
    border-radius:18px!important;
    margin-bottom:16px!important;
  }
  .section-title{
    font-size:19px!important;
  }

  /* Activities and bookings: two-column desktop cards. */
  #activitiesList,
  #bookingsList{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px!important;
    align-items:stretch!important;
  }
  #activitiesList>.card,
  #bookingsList>.card{
    margin:0!important;
    min-height:100%!important;
  }
  #activitiesList>.notice,
  #bookingsList>.notice,
  #activitiesList>.booking-suspension-notice,
  #bookingsList>.booking-suspension-notice{
    grid-column:1/-1!important;
  }
  .activity-card-top .section-title,
  .activity-card-top>b{
    font-size:22px!important;
  }
  .meta{
    font-size:14px!important;
    gap:6px!important;
  }

  /* Registration/membership: use desktop width instead of a single phone column. */
  #membershipPage .membership-options{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
  }
  #membershipPage .membership-option{
    min-height:155px!important;
    padding:17px!important;
  }
  #membershipPage .form-grid,
  #accountPage .form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px 18px!important;
  }
  .field input,
  .field select,
  .login-wrap input{
    padding:12px 13px!important;
  }

  /* My Account becomes a genuine two-column desktop dashboard. */
  #accountPage.active{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:22px!important;
    align-items:start!important;
  }
  #accountPage>h1{
    grid-column:1/-1!important;
  }
  #accountContent,
  #accountMembershipInfoContent{
    min-width:0!important;
  }
  .account-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:11px!important;
  }
  .membership-manage-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:15px!important;
  }
  .membership-manage-card{
    min-height:190px!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .membership-manage-card .btn{
    margin-top:auto!important;
  }

  /* Shop: six categories + four product cards. */
  .shop-search-row{
    grid-template-columns:minmax(0,1fr) 150px!important;
    gap:12px!important;
  }
  .shop-benefits{
    gap:12px!important;
  }
  .shop-category-grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .shop-category{
    min-height:132px!important;
  }
  .product-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:18px!important;
  }
  .level-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:12px!important;
  }

  /* Education / video / policy pages take advantage of desktop width. */
  .teaching-resource-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
  }
  .teaching-resource-card{
    min-height:210px!important;
  }
  .official-video-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }
  .official-video-card{
    grid-template-columns:180px minmax(0,1fr)!important;
    gap:15px!important;
    padding:14px!important;
  }
  .policy-index{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px!important;
  }
  .rules-page{
    max-width:980px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Volunteer/contact/forms retain readable line lengths. */
  .volunteer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px 18px!important;
  }
  .volunteer-app-card,
  #contactPage .card,
  #privacyPage .card,
  #policiesPage .card{
    max-width:none!important;
  }

  /* Desktop modal sizing. */
  .activity-detail-card{
    width:min(720px,88vw)!important;
  }
  .pay-card,
  .notice-detail-card,
  .auth-modal-card{
    width:min(660px,88vw)!important;
  }
  .ukpo-dialog-card-v22{
    width:min(540px,88vw)!important;
  }
  .ukpo-member-gate-card221{
    width:min(560px,88vw)!important;
  }
  .ukpo-edu-card221{
    width:min(900px,88vw)!important;
  }

  /* Toast tracks the desktop layout. */
  .toast{
    bottom:24px!important;
    max-width:520px!important;
  }
}

/* Very wide monitors: keep the site readable instead of stretching indefinitely. */
@media (min-width:1600px){
  .app,
  .bottomnav{
    max-width:1240px!important;
  }
}


/* ============================================================
   UKPO v22.1.4 — Desktop navigation overlap fix
   ============================================================ */
@media (min-width:1100px){
  /* Header + navigation stay together at the top instead of leaving
     the nav floating across the middle of long forms. */
  .topbar{
    position:sticky!important;
    top:0!important;
    left:auto!important;
    transform:none!important;
    width:100%!important;
    z-index:70!important;
  }

  .bottomnav{
    position:sticky!important;
    top:82px!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    z-index:68!important;
  }

  /* v22.1.3 reserved extra space for the former fixed nav.
     It is no longer needed after the nav returns to normal document flow. */
  #homeView{
    padding-top:0!important;
  }
  .page{
    padding-top:34px!important;
  }
}


/* v22.1.6 — detailed Rally Scoring education content */
.ukpo-edu-card221 ul{
  margin:8px 0 14px 22px;
  padding:0;
  color:#485f70;
  line-height:1.65;
}
.ukpo-edu-card221 li{margin:5px 0}
.ukpo-edu-card221 hr{
  border:0;
  border-top:1px solid #e1eaee;
  margin:22px 0;
}


/* v22.1.7 — paddle & ball guide */
.ukpo-edu-card221 h2 + p strong{display:inline-block}
.ukpo-edu-card221 p{line-height:1.72}
.ukpo-edu-card221 h3{line-height:1.35}


/* ============================================================
   UKPO v22.1.8 — Product Detail Responsive Fix
   ============================================================ */

/* Tablet: centre product details and give both columns real space. */
@media (min-width:768px) and (max-width:1099px){
  #productDetailModal.shop-modal{
    align-items:center!important;
    padding:24px!important;
  }
  #productDetailModal .product-detail-card{
    width:min(820px,94vw)!important;
    max-width:820px!important;
    max-height:88vh!important;
    border-radius:20px!important;
    padding:20px!important;
    overflow:auto!important;
  }
  #productDetailModal .product-detail-wrap{
    grid-template-columns:minmax(260px,330px) minmax(0,1fr)!important;
    gap:22px!important;
    align-items:start!important;
  }
  #productDetailModal .product-detail-copy{
    min-width:0!important;
    font-size:14px!important;
    line-height:1.58!important;
    overflow-wrap:break-word!important;
  }
  #productDetailModal .product-detail-image-wrap .product-thumb{
    width:100%!important;
    max-width:320px!important;
    max-height:390px!important;
  }

  /* Tablet already has a top cart button; avoid a duplicate floating cart. */
  #floatingShopCart,
  #floatingShopCart.visible{
    display:none!important;
  }
}

/* Desktop: proper wide modal instead of squeezing desktop content into a phone-width sheet. */
@media (min-width:1100px){
  #productDetailModal.shop-modal{
    align-items:center!important;
    justify-content:center!important;
    padding:28px!important;
  }
  #productDetailModal .product-detail-card{
    width:min(960px,90vw)!important;
    max-width:960px!important;
    max-height:88vh!important;
    border-radius:22px!important;
    padding:24px!important;
    overflow:auto!important;
    box-shadow:0 24px 80px rgba(0,0,0,.30)!important;
  }
  #productDetailModal .shop-modal-head{
    position:sticky!important;
    top:-24px!important;
    z-index:4!important;
    background:#fff!important;
    padding:2px 0 14px!important;
    margin-bottom:4px!important;
  }
  #productDetailModal .product-detail-wrap{
    grid-template-columns:minmax(330px,390px) minmax(0,1fr)!important;
    gap:30px!important;
    align-items:start!important;
  }
  #productDetailModal .product-detail-image-wrap{
    padding:18px!important;
  }
  #productDetailModal .product-detail-image-wrap .product-thumb{
    width:100%!important;
    max-width:360px!important;
    max-height:440px!important;
  }
  #productDetailModal .product-detail-copy{
    min-width:0!important;
    font-size:15px!important;
    line-height:1.62!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }
  #productDetailModal .product-detail-copy h3{
    font-size:23px!important;
    line-height:1.25!important;
  }
  #productDetailModal .product-detail-brand{
    font-size:12px!important;
  }
  #productDetailModal .detail-intro{
    font-size:15px!important;
    line-height:1.55!important;
  }
  #productDetailModal .detail-bullets{
    font-size:14px!important;
    line-height:1.55!important;
  }

  /* Desktop uses the top-right cart only. */
  #floatingShopCart,
  #floatingShopCart.visible{
    display:none!important;
  }
}


/* ============================================================
   UKPO v22.1.9 — Restore Floating Cart
   ============================================================ */
@media (min-width:768px){
  #floatingShopCart,
  #floatingShopCart.visible{
    display:flex!important;
    position:fixed!important;
    z-index:66!important;
  }
}

@media (min-width:768px) and (max-width:1099px){
  #floatingShopCart,
  #floatingShopCart.visible{
    right:18px!important;
    bottom:104px!important;
    width:58px!important;
    height:58px!important;
  }
}

@media (min-width:1100px){
  #floatingShopCart,
  #floatingShopCart.visible{
    right:max(20px,calc((100vw - 1180px)/2 - 82px))!important;
    bottom:28px!important;
    width:64px!important;
    height:64px!important;
  }
}

@supports selector(body:has(*)){
  body:has(#productDetailModal.open) #floatingShopCart,
  body:has(#addedCartModal.open) #floatingShopCart,
  body:has(#cartModal.open) #floatingShopCart,
  body:has(#shopFilterModal.open) #floatingShopCart,
  body:has(#purchaseConfirmModal.open) #floatingShopCart,
  body:has(#paymentModal.open) #floatingShopCart,
  body:has(#paymentReceiptModal.open) #floatingShopCart{
    opacity:0!important;
    pointer-events:none!important;
  }
}


/* ============================================================
   UKPO v22.1.12 — Local QA: responsive cart / checkout dialogs
   DO NOT DEPLOY YET
   ============================================================ */

/* Tablet */
@media (min-width:768px) and (max-width:1099px){
  #cartModal .shop-modal-card{
    width:min(700px,92vw)!important;
    max-height:86vh!important;
    border-radius:20px!important;
    padding:20px!important;
  }
  #purchaseConfirmModal .purchase-confirm-card{
    width:min(700px,92vw)!important;
  }
  #paymentHistoryDetailModal .payment-history-detail-card{
    width:min(720px,92vw)!important;
  }
  #addedCartModal .added-cart-card{
    width:min(560px,92vw)!important;
    border-radius:20px!important;
  }
}

/* Desktop */
@media (min-width:1100px){
  #cartModal.shop-modal,
  #addedCartModal.shop-modal,
  #shopFilterModal.shop-modal,
  #paymentHistoryDetailModal.shop-modal{
    align-items:center!important;
    justify-content:center!important;
    padding:28px!important;
  }

  #cartModal .shop-modal-card{
    width:min(780px,88vw)!important;
    max-height:84vh!important;
    border-radius:22px!important;
    padding:24px!important;
  }

  #cartModal .cart-row{
    grid-template-columns:58px minmax(0,1fr) auto!important;
    gap:14px!important;
    padding:14px 0!important;
  }
  #cartModal .cart-row .pic{
    width:58px!important;
    height:58px!important;
    border-radius:12px!important;
  }
  #cartModal .cart-row b{
    font-size:14px!important;
    line-height:1.35!important;
  }
  #cartModal .cart-row small{
    font-size:11px!important;
    line-height:1.4!important;
  }
  #cartModal .qty-control{
    gap:9px!important;
  }

  #purchaseConfirmModal .purchase-confirm-card{
    width:min(780px,88vw)!important;
    max-height:86vh!important;
  }
  #purchaseConfirmModal .purchase-confirm-row b{
    font-size:14px!important;
  }
  #purchaseConfirmModal .purchase-confirm-row small{
    font-size:11px!important;
  }

  #paymentHistoryDetailModal .payment-history-detail-card{
    width:min(820px,88vw)!important;
    max-height:86vh!important;
    border-radius:22px!important;
    padding:22px!important;
  }

  #addedCartModal .added-cart-card{
    width:min(560px,88vw)!important;
    border-radius:22px!important;
    padding:24px!important;
  }

  #shopFilterModal .filter-sheet{
    width:min(620px,88vw)!important;
    border-radius:22px!important;
  }

  /* Payment + receipt remain readable, but use a little more desktop width. */
  #paymentModal .pay-card,
  #paymentReceiptModal .pay-card{
    width:min(720px,88vw)!important;
    max-height:88vh!important;
  }
}


/* ============================================================
   UKPO v22.1.29 — Shop browse/filter responsive QA
   ============================================================ */
.shop-category.active-filter,
.level-grid button.active-filter{
  outline:3px solid rgba(15,138,157,.28)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 2px #fff inset,0 6px 18px rgba(15,138,157,.18)!important;
}
.level-grid button.active-filter{
  border-color:var(--teal)!important;
  background:#eef9fb!important;
}
.product-name-button{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;
  width:100%;
  text-align:left;
  color:inherit;
  cursor:pointer;
}
.product-name-button:focus-visible,
.product-visual:focus-visible,
.wish:focus-visible{
  outline:3px solid rgba(15,138,157,.42)!important;
  outline-offset:2px!important;
}
.product-card .product-desc{
  overflow-wrap:anywhere;
}

/* Mobile keeps the established 2-column product grid. */
@media (max-width:767px){
  #shopPage .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #shopPage .shop-category-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  #shopPage .level-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Tablet: 3-column products / categories / levels. */
@media (min-width:768px) and (max-width:1099px){
  #shopPage .product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  #shopPage .shop-category-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  #shopPage .level-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Desktop: 4-column products, six categories, exactly three level choices. */
@media (min-width:1100px){
  #shopPage .product-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  #shopPage .shop-category-grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
  #shopPage .level-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}


/* ============================================================
   UKPO v22.1.30 — Receipt / payment-history QA
   ============================================================ */
.receipt-items-block{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.receipt-section-title{
  font-size:12px;
  font-weight:900;
  margin-bottom:8px;
  color:#17384f;
}
.receipt-item-list{display:grid;gap:8px}
.receipt-item-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:9px 10px;
  border:1px solid #e1e8ed;
  border-radius:11px;
  background:#f9fbfc;
}
.receipt-item-copy{min-width:0}
.receipt-item-copy b,
.receipt-item-copy small{display:block}
.receipt-item-copy b{font-size:12px;overflow-wrap:anywhere}
.receipt-item-copy small{font-size:10px;color:#667987;margin-top:2px}
.receipt-item-row strong{white-space:nowrap;font-size:12px}

@media(max-width:420px){
  .receipt-item-row{grid-template-columns:1fr}
  .receipt-item-row strong{justify-self:start}
}

@media print{
  body.printing-receipt #paymentReceiptModal .receipt-card{
    color:#111!important;
  }
  body.printing-receipt #paymentReceiptModal .receipt-item-row,
  body.printing-receipt #paymentReceiptModal .receipt-pricing-breakdown,
  body.printing-receipt #paymentReceiptModal .receipt-grid>div{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  body.ukpo-printing .payment-history-detail-card .history-item-row,
  body.ukpo-printing .payment-history-detail-card .history-summary-row,
  body.ukpo-printing .payment-history-detail-card .history-detail-section{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
}