/* =========================================================
   Gridfire Phone Menu CSS
   Clean Version
   Only applies under 768px
   ========================================================= */


/* Hide phone-only nav on tablet / desktop */
@media only screen and (min-width: 768px){

  .gf-phone-nav,
  #gfPhoneDetailsBtn,
  #gfPhoneDetailsPanel{
    display:none !important;
  }

}


/* =========================================================
   Phone Mode Base
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-phone-menu,
  body.gf-tablet-menu.gf-phone-menu{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background:#f4f6fb !important;
  }

  body.gf-phone-menu .rotate-screen{
    display:none !important;
  }

  body.gf-phone-menu .tablet{
    display:block !important;
  }

  body.gf-phone-menu #main,
  body.gf-phone-menu #smallframe{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

}


/* =========================================================
   Phone Header
   Logo left, customer/vehicle stacked, details right
   ========================================================= */

@media only screen and (max-width: 767px){
    
     body.gf-phone-menu #gfPhoneHeaderInfo{
    margin-right:96px !important;
  }

 body.gf-phone-menu #grid-containertop{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;

  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;

  height:50px !important;
  min-height:50px !important;

  padding:0 10px !important;
  margin:0 !important;

  /*
    Let the active template control
    background and text colors.
  */

  border-bottom:1px solid currentColor !important;

  overflow:hidden !important;
  box-sizing:border-box !important;
}

  body.gf-phone-menu #grid-containertop .logo{
    flex:0 0 28px !important;
    width:28px !important;
    height:28px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 10px 0 0 !important;
    padding:0 !important;
  }

  body.gf-phone-menu #grid-containertop .logo img{
    display:block !important;
    width:28px !important;
    height:auto !important;
  }

  body.gf-phone-menu #gfPhoneHeaderInfo{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    margin:0 8px 0 0 !important;
    padding:0 !important;

    overflow:hidden !important;
  }

  body.gf-phone-menu #gfPhoneHeaderInfo .customer{
    display:block !important;

    margin:0 0 2px 0 !important;
    padding:0 !important;

     color:inherit !important;
    font-size:13px !important;
    font-weight:900 !important;
    line-height:1.05 !important;
    text-align:left !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.gf-phone-menu #gfPhoneHeaderInfo .car{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

     color:inherit !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1.05 !important;
    text-align:left !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.gf-phone-menu #grid-containertop .dealer,
  body.gf-phone-menu #grid-containertop .deal,
  body.gf-phone-menu #grid-containertop .date{
    display:none !important;
  }

  body.gf-phone-menu #grid-containertop > #gfPhoneDetailsBtn{
    flex:0 0 84px !important;

    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    width:84px !important;
    min-width:84px !important;
    max-width:84px !important;
    height:34px !important;

    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;
    margin:0 !important;

    background:#ffffff !important;
    color:#057ed0 !important;
    border:1px solid #b9e2fb !important;
    border-radius:999px !important;

    font-size:12px !important;
    font-weight:900 !important;
    line-height:1 !important;

    box-shadow:0 5px 14px rgba(5,151,242,.12) !important;

    z-index:20 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
  }

  body.gf-phone-menu #grid-containertop > #gfPhoneDetailsBtn::after{
    content:"▾" !important;
    margin-left:6px !important;
    font-size:10px !important;
  }
}

/* =========================================================
   Phone Details Panel
   Colors supplied dynamically from active menu template
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-phone-menu #gfPhoneDetailsPanel{
    display:none !important;

    margin:0 8px 6px !important;
    padding:10px 12px !important;

    /*
      Do NOT hard-code background or text color here.
      gfMatchPhoneDetailsPanelColors() supplies them
      from .halfback and #grid-containertop.
    */

    border:1px solid currentColor !important;
    border-radius:12px !important;

    box-shadow:0 8px 22px rgba(15,23,42,.08) !important;

    font-size:11px !important;
    font-weight:650 !important;
    line-height:1.45 !important;

    box-sizing:border-box !important;
  }

  body.gf-phone-menu #gfPhoneDetailsPanel.gf-open{
    display:block !important;
  }

  body.gf-phone-menu #gfPhoneDetailsPanel strong{
    color:inherit !important;
    font-weight:850 !important;
  }

}



/* =========================================================
   Phone Column Layout
   One visible column at a time
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-phone-menu #grid-container{
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    padding:4px 8px 14px !important;
    margin:0 !important;

    box-sizing:border-box !important;
  }

  body.gf-phone-menu #grid-container > div{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  body.gf-phone-menu #bin{
    display:none !important;
  }

  

  body.gf-phone-menu #m1.gf-phone-active-column,
  body.gf-phone-menu #m2.gf-phone-active-column,
  body.gf-phone-menu #m3.gf-phone-active-column,
  body.gf-phone-menu #m4.gf-phone-active-column{
    display:flex !important;
    flex-direction:column !important;

    height:calc(100dvh - 106px) !important;
    max-height:calc(100dvh - 106px) !important;
    min-height:0 !important;

    border-radius:12px !important;
    overflow:hidden !important;
  }

  body.gf-phone-menu #cart,
  body.gf-phone-menu #cart1,
  body.gf-phone-menu #cart2,
  body.gf-phone-menu #cart3{
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;

    width:100% !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;
  }

  body.gf-phone-menu .columns{
    flex:0 0 auto !important;

    min-height:28px !important;
    padding:5px 24px 5px 8px !important;

    font-size:13px !important;
    font-weight:900 !important;
    line-height:1.1 !important;

    border-radius:10px 10px 0 0 !important;
  }

}


/* =========================================================
   Phone Product List / Cards
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-phone-menu #menus1,
  body.gf-phone-menu #menus2,
  body.gf-phone-menu #menus3,
  body.gf-phone-menu #menus4{
    flex:1 1 auto !important;

    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    padding:4px 4px 0px !important;
    margin:0 !important;

    -webkit-overflow-scrolling:touch !important;
    box-sizing:border-box !important;
  }

  body.gf-phone-menu ul.menus li,
  body.gf-phone-menu ul.menus2 li,
  body.gf-phone-menu ul.menus3 li,
  body.gf-phone-menu ul.menus4 li{
    width:100% !important;
    margin:0 0 5px 0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  body.gf-phone-menu .item-container{
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;

    padding:7px 9px !important;

    border-radius:9px !important;
    border:1px solid #d9e2ec !important;
    background:#ffffff !important;

    box-sizing:border-box !important;
  }

  body.gf-phone-menu .gf-tablet-details-btn{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;

    top:8px !important;
    right:8px !important;

    font-size:10px !important;
    line-height:16px !important;
  }

  body.gf-phone-menu .itemtitleoutlg{
    min-width:0 !important;
    max-width:calc(100% - 28px) !important;

    margin:0 0 3px 0 !important;

    font-size:11px !important;
    font-weight:900 !important;
    line-height:1.1 !important;
  }

  body.gf-phone-menu .termdisplaylg{
    margin:0 0 5px 0 !important;

    color:#8a8f98 !important;
    font-size:9px !important;
    font-weight:800 !important;
    line-height:1.1 !important;
  }

  body.gf-phone-menu .itemdesout{
    width:100% !important;
    max-width:none !important;

    color:#0f172a !important;
    font-size:9.5px !important;
    font-weight:700 !important;
    line-height:1.25 !important;
  }

}


/* =========================================================
   Phone Payment Footer
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-phone-menu .bottomcol{
    flex:0 0 auto !important;

    margin-top:0 !important;
    padding:6px 7px 7px !important;

    background:#ffffff !important;
    border-top:1px solid #e4eaf1 !important;

    box-shadow:0 -6px 14px rgba(15,23,42,.05) !important;
    z-index:20 !important;
    
    border-radius: 0 0 20px 20px !important;

    box-sizing:border-box !important;
  }

  body.gf-phone-menu .pmtdis,
  body.gf-phone-menu .newpayment,
  body.gf-phone-menu .newpayment2,
  body.gf-phone-menu .newpaymenta,
  body.gf-phone-menu .newpayment2a,
  body.gf-phone-menu .newpaymentb,
  body.gf-phone-menu .newpayment2b,
  body.gf-phone-menu .newpaymentc,
  body.gf-phone-menu .newpayment2c,
  body.gf-phone-menu .rollborder{
    font-size:12px !important;
    line-height:1.1 !important;
  }

  body.gf-phone-menu .smtbutton,
  body.gf-phone-menu .smtbutton2{
    min-height:30px !important;

    padding:6px 10px !important;

    font-size:11px !important;
    font-weight:800 !important;

    border-radius:9px !important;
  }

}

/* =========================================================
   Phone Final Overrides
   Details button, header spacing, nav, side-peek carousel
   ========================================================= */

@media only screen and (max-width: 767px){

  /* Header spacing */
  body.gf-tablet-menu.gf-phone-menu #grid-containertop,
  body.gf-phone-menu #grid-containertop{
    height:56px !important;
    min-height:56px !important;
    padding:0 14px 0 18px !important;
  }

  body.gf-tablet-menu.gf-phone-menu #grid-containertop .logo,
  body.gf-phone-menu #grid-containertop .logo{
    margin:0 18px 0 0 !important;
    padding-left:10px !important;
  }

  body.gf-tablet-menu.gf-phone-menu #grid-containertop #gfPhoneHeaderInfo,
  body.gf-phone-menu #grid-containertop #gfPhoneHeaderInfo{
    flex:1 1 auto !important;
    min-width:0 !important;
    margin:0 10px 0 0 !important;
    overflow:hidden !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhoneHeaderInfo .customer,
  body.gf-phone-menu #gfPhoneHeaderInfo .customer{
    font-size:14px !important;
    font-weight:900 !important;
    line-height:1.08 !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhoneHeaderInfo .car,
  body.gf-phone-menu #gfPhoneHeaderInfo .car{
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1.08 !important;
  }

  /* Keep the real Details button visible */
  body.gf-tablet-menu.gf-phone-menu #grid-containertop > #gfPhoneDetailsBtn,
  body.gf-phone-menu #grid-containertop > #gfPhoneDetailsBtn{
    flex:0 0 84px !important;

    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    width:84px !important;
    min-width:84px !important;
    max-width:84px !important;
    height:34px !important;

    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;
    margin:0 !important;

    background:#ffffff !important;
    color:#057ed0 !important;
    border:1px solid #b9e2fb !important;
    border-radius:999px !important;

    font-size:12px !important;
    font-weight:900 !important;
    line-height:1 !important;

    box-shadow:0 5px 14px rgba(5,151,242,.12) !important;

    z-index:50 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
  }

  body.gf-tablet-menu.gf-phone-menu #grid-containertop > #gfPhoneDetailsBtn::after,
  body.gf-phone-menu #grid-containertop > #gfPhoneDetailsBtn::after{
    content:"▾" !important;
    margin-left:6px !important;
    font-size:10px !important;
  }

  /* Phone nav: clean grid row */
body.gf-tablet-menu.gf-phone-menu #gfPhoneNav,
body.gf-phone-menu #gfPhoneNav{
  position:static !important;
  inset:auto !important;
  transform:none !important;

  display:grid !important;
  grid-template-columns:42px 1fr 42px !important;
  align-items:center !important;

  width:100% !important;
  max-width:100% !important;
  height:52px !important;
  min-height:52px !important;

  padding:5px 16px !important;
  margin:0 !important;

  background:#f4f6fb !important;
  border:0 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
  z-index:50 !important;
}

body.gf-tablet-menu.gf-phone-menu #gfPhonePrev,
body.gf-phone-menu #gfPhonePrev{
  grid-column:1 !important;
  justify-self:start !important;
}

body.gf-tablet-menu.gf-phone-menu .gf-phone-nav-center,
body.gf-phone-menu .gf-phone-nav-center{
  grid-column:2 !important;
  justify-self:center !important;

  position:static !important;
  inset:auto !important;
  transform:none !important;

  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;

  align-items:center !important;
  justify-content:center !important;

  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;

  pointer-events:none !important;
}

body.gf-tablet-menu.gf-phone-menu #gfPhoneNext,
body.gf-phone-menu #gfPhoneNext{
  grid-column:3 !important;
  justify-self:end !important;
}

body.gf-tablet-menu.gf-phone-menu #gfPhonePrev,
body.gf-tablet-menu.gf-phone-menu #gfPhoneNext,
body.gf-phone-menu #gfPhonePrev,
body.gf-phone-menu #gfPhoneNext{
  position:static !important;
  inset:auto !important;
  transform:none !important;

  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;

  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;

  align-items:center !important;
  justify-content:center !important;

  padding:0 !important;
  margin:0 !important;

  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #d9e2ec !important;
  border-radius:999px !important;

  font-size:28px !important;
  font-weight:800 !important;
  line-height:1 !important;

  box-shadow:0 6px 16px rgba(15,23,42,.10) !important;

  z-index:10 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

body.gf-tablet-menu.gf-phone-menu #gfPhoneDots,
body.gf-phone-menu #gfPhoneDots{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;

  margin:0 !important;
  padding:0 !important;

  color:#94a3b8 !important;
  font-size:15px !important;
  line-height:1 !important;
  letter-spacing:4px !important;
  white-space:nowrap !important;
}

body.gf-tablet-menu.gf-phone-menu #gfPhoneColumnTitle,
body.gf-phone-menu #gfPhoneColumnTitle{
  display:none !important;
}

  /* Side-peek carousel */
  body.gf-tablet-menu.gf-phone-menu #smallframe,
  body.gf-phone-menu #smallframe{
    overflow:hidden !important;
  }

  body.gf-tablet-menu.gf-phone-menu #grid-container,
  body.gf-phone-menu #grid-container{
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;

    width:auto !important;
    max-width:none !important;

    gap:10px !important;
    padding:4px 0 14px 0 !important;
    margin:0 !important;

    overflow:visible !important;
    box-sizing:border-box !important;

    transition:transform .28s ease !important;
    will-change:transform !important;
  }

  body.gf-tablet-menu.gf-phone-menu #m1,
  body.gf-tablet-menu.gf-phone-menu #m2,
  body.gf-tablet-menu.gf-phone-menu #m3,
  body.gf-tablet-menu.gf-phone-menu #m4,
  body.gf-phone-menu #m1,
  body.gf-phone-menu #m2,
  body.gf-phone-menu #m3,
  body.gf-phone-menu #m4{
    display:flex !important;
    flex-direction:column !important;

    flex:0 0 86vw !important;
    width:86vw !important;
    max-width:86vw !important;
    min-width:86vw !important;

    height:calc(100dvh - 108px) !important;
    max-height:calc(100dvh - 108px) !important;
    min-height:0 !important;

    border-radius:12px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
}

/* =========================================================
   Phone Floating Nav
   Keeps arrows/dots independent from carousel layout
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-phone-menu #gfPhoneNav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:56px !important;

    display:grid !important;
    grid-template-columns:48px 1fr 48px !important;
    align-items:center !important;

    width:100vw !important;
    max-width:100vw !important;
    height:54px !important;
    min-height:54px !important;

    padding:6px 18px !important;
    margin:0 !important;

    background:#f4f6fb !important;
    border:0 !important;

    overflow:visible !important;
    box-sizing:border-box !important;

    z-index:999999 !important;
    pointer-events:none !important;
  }

  body.gf-phone-menu #gfPhonePrev,
  body.gf-phone-menu #gfPhoneNext{
    position:static !important;
    inset:auto !important;
    transform:none !important;

    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;

    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;
    margin:0 !important;

    background:#ffffff !important;
    color:#0f172a !important;
    border:1px solid #d9e2ec !important;
    border-radius:999px !important;

    font-size:28px !important;
    font-weight:800 !important;
    line-height:1 !important;

    box-shadow:0 6px 16px rgba(15,23,42,.10) !important;

    z-index:1000000 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
  }

  body.gf-phone-menu #gfPhonePrev{
    grid-column:1 !important;
    justify-self:start !important;
  }

  body.gf-phone-menu #gfPhoneNext{
    grid-column:3 !important;
    justify-self:end !important;
  }

  body.gf-phone-menu .gf-phone-nav-center{
    grid-column:2 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    position:static !important;
    inset:auto !important;
    transform:none !important;

    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;

    pointer-events:none !important;
  }

  body.gf-phone-menu #gfPhoneDots{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    margin:0 !important;
    padding:0 !important;

    color:#94a3b8 !important;
    font-size:15px !important;
    line-height:1 !important;
    letter-spacing:4px !important;
    white-space:nowrap !important;
  }

  body.gf-phone-menu #gfPhoneColumnTitle{
    display:none !important;
  }

  /*
    Since the nav is floating, push the carousel down.
  */
  body.gf-phone-menu #smallframe{
    padding-top:54px !important;
  }
}


/* =========================================================
   Phone Floating Nav - Final Strong Override
   Wins over body.gf-tablet-menu.gf-phone-menu rules
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu #gfPhoneNav,
  body.gf-phone-menu #gfPhoneNav{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:56px !important;

    display:grid !important;
    grid-template-columns:48px minmax(0, 1fr) 48px !important;
    align-items:center !important;

    width:94vw !important;
    max-width:100vw !important;
    height:54px !important;
    min-height:54px !important;

    padding:6px 18px !important;
    margin:0 !important;

    background:#f4f6fb !important;
    border:0 !important;
    border-radius:24px !important;

    overflow:visible !important;
    box-sizing:border-box !important;

    z-index:999999 !important;
    pointer-events:none !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhonePrev,
  body.gf-phone-menu #gfPhonePrev{
    grid-column:1 !important;
    justify-self:start !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhoneNext,
  body.gf-phone-menu #gfPhoneNext{
    grid-column:3 !important;
    justify-self:end !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhonePrev,
  body.gf-tablet-menu.gf-phone-menu #gfPhoneNext,
  body.gf-phone-menu #gfPhonePrev,
  body.gf-phone-menu #gfPhoneNext{
    position:static !important;
    inset:auto !important;
    transform:none !important;

    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;

    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;
    margin:0 !important;

    background:#ffffff !important;
    color:#0f172a !important;
    border:1px solid #d9e2ec !important;
    border-radius:999px !important;

    font-size:28px !important;
    font-weight:800 !important;
    line-height:1 !important;

    box-shadow:0 6px 16px rgba(15,23,42,.10) !important;

    z-index:1000000 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-phone-nav-center,
  body.gf-phone-menu .gf-phone-nav-center{
    grid-column:2 !important;
    justify-self:center !important;

    position:static !important;
    inset:auto !important;
    transform:none !important;

    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    align-items:center !important;
    justify-content:center !important;

    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;

    pointer-events:none !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhoneDots,
  body.gf-phone-menu #gfPhoneDots{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    margin:0 !important;
    padding:0 !important;

    color:#94a3b8 !important;
    font-size:15px !important;
    line-height:1 !important;
    letter-spacing:4px !important;
    white-space:nowrap !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhoneColumnTitle,
  body.gf-phone-menu #gfPhoneColumnTitle{
    display:none !important;
  }

  body.gf-tablet-menu.gf-phone-menu #smallframe,
  body.gf-phone-menu #smallframe{
    padding-top:54px !important;
  }
}

/* =========================================================
   Phone Details Button - Final Floating Override
   Keeps Details visible above floating nav
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu #gfPhoneDetailsBtn,
  body.gf-phone-menu #gfPhoneDetailsBtn{
    position:fixed !important;
    top:11px !important;
    right:18px !important;

    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    width:84px !important;
    min-width:84px !important;
    max-width:84px !important;
    height:34px !important;

    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;
    margin:0 !important;

    background:#ffffff !important;
    color:#057ed0 !important;
    border:1px solid #b9e2fb !important;
    border-radius:999px !important;

    font-size:12px !important;
    font-weight:900 !important;
    line-height:1 !important;

    box-shadow:0 5px 14px rgba(5,151,242,.16) !important;

    z-index:1000001 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhoneDetailsBtn::after,
  body.gf-phone-menu #gfPhoneDetailsBtn::after{
    content:"▾" !important;
    margin-left:6px !important;
    font-size:10px !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhoneDetailsPanel,
  body.gf-phone-menu #gfPhoneDetailsPanel{
    position:fixed !important;
    top:112px !important;
    left:10px !important;
    right:10px !important;

    z-index:1000000 !important;
    margin:0 !important;
  }
}

/* =========================================================
   Phone Carousel Height Fix
   Prevents bottom/payment footer from being cut off
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu #m1,
  body.gf-tablet-menu.gf-phone-menu #m2,
  body.gf-tablet-menu.gf-phone-menu #m3,
  body.gf-tablet-menu.gf-phone-menu #m4,
  body.gf-phone-menu #m1,
  body.gf-phone-menu #m2,
  body.gf-phone-menu #m3,
  body.gf-phone-menu #m4{
    height:calc(100dvh - 162px) !important;
    max-height:calc(100dvh - 162px) !important;
  }

  body.gf-tablet-menu.gf-phone-menu #grid-container,
  body.gf-phone-menu #grid-container{
    padding-bottom:18px !important;
  }

  body.gf-tablet-menu.gf-phone-menu .bottomcol,
  body.gf-phone-menu .bottomcol{
    padding-bottom:10px !important;
    border-radius: 0 0 20px 20px !important;
}

/* =========================================================
   Column Badge Visibility Fix
   Tablet + Phone
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-phone-menu .columns,
  body.gf-phone-menu .gf-has-column-badge{
    position:relative !important;
    overflow:visible !important;
  }

  body.gf-phone-menu #cart,
  body.gf-phone-menu #cart1,
  body.gf-phone-menu #cart2,
  body.gf-phone-menu #cart3{
    overflow:visible !important;
  }

  body.gf-phone-menu #m1,
  body.gf-phone-menu #m2,
  body.gf-phone-menu #m3,
  body.gf-phone-menu #m4{
    overflow:visible !important;
  }

  body.gf-phone-menu .gf-column-floating-badge{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;

    position:absolute !important;
    left:50% !important;
    bottom:-13px !important;
    transform:translateX(-50%) !important;

    z-index:999 !important;

    height:20px !important;
    max-width:88% !important;
    padding:0 14px !important;

    background:#ffffff !important;
    border:1px solid var(--gf-column-badge-border, #0597f2) !important;
    border-radius:999px !important;

    color:#057ed0 !important;
    font-size:10px !important;
    font-weight:800 !important;
    line-height:1 !important;
    text-transform:uppercase !important;

    box-shadow:0 2px 8px rgba(5,151,242,.18) !important;
    pointer-events:none !important;
  }

  body.gf-phone-menu #menus1,
  body.gf-phone-menu #menus2,
  body.gf-phone-menu #menus3,
  body.gf-phone-menu #menus4{
    padding-top:14px !important;
  }
}

/* =========================================================
   Phone Column Header + Info Icon Size
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .columns,
  body.gf-phone-menu .columns{
    min-height:34px !important;
    padding:7px 34px 7px 10px !important;

    font-size:15px !important;
    font-weight:900 !important;
    line-height:1.1 !important;
    letter-spacing:.01em !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-column-title-main,
  body.gf-phone-menu .gf-column-title-main{
    font-size:15px !important;
    font-weight:900 !important;
    line-height:1.1 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-tablet-column-action-wrap,
  body.gf-tablet-menu.gf-phone-menu .gf-column-action-wrap,
  body.gf-phone-menu .gf-tablet-column-action-wrap,
  body.gf-phone-menu .gf-column-action-wrap{
    right:7px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:1000 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-column-action-btn,
  body.gf-tablet-menu.gf-phone-menu .gf-column-signal-btn,
  body.gf-phone-menu .gf-column-action-btn,
  body.gf-phone-menu .gf-column-signal-btn{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;

    font-size:14px !important;
    font-weight:900 !important;
    line-height:20px !important;

    border-radius:999px !important;
    border:1.5px solid #b9e2fb !important;
    background:#ffffff !important;
    color:#0597f2 !important;

    box-shadow:0 3px 9px rgba(5,151,242,.14) !important;
  }
}

/* =========================================================
   Phone Only - Larger Column Title / Header / Info Icon
   Does not affect iPad
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .columns,
  body.gf-phone-menu .columns{
    min-height:42px !important;
    padding:10px 38px 10px 10px !important;

    font-size:20px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:.01em !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-column-title-main,
  body.gf-phone-menu .gf-column-title-main{
    font-size:20px !important;
    font-weight:900 !important;
    line-height:1 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-tablet-column-action-wrap,
  body.gf-tablet-menu.gf-phone-menu .gf-column-action-wrap,
  body.gf-phone-menu .gf-tablet-column-action-wrap,
  body.gf-phone-menu .gf-column-action-wrap{
    right:8px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:1000 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-column-action-btn,
  body.gf-tablet-menu.gf-phone-menu .gf-column-signal-btn,
  body.gf-phone-menu .gf-column-action-btn,
  body.gf-phone-menu .gf-column-signal-btn{
    width:25px !important;
    height:25px !important;
    min-width:25px !important;
    min-height:25px !important;

    font-size:15px !important;
    font-weight:900 !important;
    line-height:23px !important;

    border-radius:999px !important;
    border:1.5px solid #b9e2fb !important;
    background:#ffffff !important;
    color:#0597f2 !important;

    box-shadow:0 3px 9px rgba(5,151,242,.14) !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-column-floating-badge,
  body.gf-phone-menu .gf-column-floating-badge{
    bottom:-13px !important;
    height:20px !important;
    font-size:10px !important;
    font-weight:900 !important;
    z-index:1001 !important;
  }

  body.gf-tablet-menu.gf-phone-menu #menus1,
  body.gf-tablet-menu.gf-phone-menu #menus2,
  body.gf-tablet-menu.gf-phone-menu #menus3,
  body.gf-tablet-menu.gf-phone-menu #menus4,
  body.gf-phone-menu #menus1,
  body.gf-phone-menu #menus2,
  body.gf-phone-menu #menus3,
  body.gf-phone-menu #menus4{
    padding-top:18px !important;
  }
}

/* =========================================================
   Phone Floating Nav - Transparent Background
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu #gfPhoneNav,
  body.gf-phone-menu #gfPhoneNav{
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
    border:0 !important;
  }

}

/* =========================================================
   Phone Modal Above Floating Nav
   Makes product/info modals open above nav buttons
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu #popcenter,
  body.gf-phone-menu #popcenter,
  body.gf-tablet-menu.gf-phone-menu .gf-column-summary-modal,
  body.gf-phone-menu .gf-column-summary-modal,
  body.gf-tablet-menu.gf-phone-menu #gfColumnSummaryModal,
  body.gf-phone-menu #gfColumnSummaryModal{
    position:fixed !important;
    z-index:2000000 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .dim,
  body.gf-phone-menu .dim{
    z-index:1999999 !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhoneNav,
  body.gf-phone-menu #gfPhoneNav{
    z-index:999999 !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhoneDetailsBtn,
  body.gf-phone-menu #gfPhoneDetailsBtn{
    z-index:1000001 !important;
  }
}

/* =========================================================
   Phone Product Cards - Premium SaaS Styling
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .item-container,
  body.gf-phone-menu .item-container{
    position:relative !important;

    padding:12px 14px 13px 14px !important;
    min-height:86px !important;

    background:#ffffff !important;
    border:1px solid #d8e1ea !important;
    border-radius:13px !important;

    box-shadow:
      0 1px 2px rgba(15,23,42,.04),
      0 8px 18px rgba(15,23,42,.045) !important;

    box-sizing:border-box !important;
  }

  body.gf-tablet-menu.gf-phone-menu ul.menus li,
  body.gf-tablet-menu.gf-phone-menu ul.menus2 li,
  body.gf-tablet-menu.gf-phone-menu ul.menus3 li,
  body.gf-tablet-menu.gf-phone-menu ul.menus4 li,
  body.gf-phone-menu ul.menus li,
  body.gf-phone-menu ul.menus2 li,
  body.gf-phone-menu ul.menus3 li,
  body.gf-phone-menu ul.menus4 li{
    margin-bottom:8px !important;
    padding:0 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .itemtitleoutlg,
  body.gf-phone-menu .itemtitleoutlg{
    display:block !important;

    max-width:calc(100% - 62px) !important;
    min-width:0 !important;

    margin:0 0 5px 26px !important;

    color:#111827 !important;
    font-size:14px !important;
    font-weight:900 !important;
    line-height:1.12 !important;
    letter-spacing:-.01em !important;

    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  body.gf-tablet-menu.gf-phone-menu .termdisplaylg,
  body.gf-phone-menu .termdisplaylg{
    display:block !important;

    margin:0 0 8px 0 !important;

    color:#7b8794 !important;
    font-size:10px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    letter-spacing:-.01em !important;
  }

  body.gf-tablet-menu.gf-phone-menu .itemdesout,
  body.gf-phone-menu .itemdesout{
    display:block !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    color:#111827 !important;
    font-size:10.5px !important;
    font-weight:750 !important;
    line-height:1.38 !important;
    letter-spacing:-.005em !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-tablet-details-btn,
  body.gf-phone-menu .gf-tablet-details-btn{
    position:absolute !important;
    left:12px !important;
    top:13px !important;
    right:auto !important;

    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:11px !important;
    font-weight:900 !important;
    line-height:1 !important;

    background:#ffffff !important;
    border:1.4px solid currentColor !important;
    border-radius:999px !important;

    box-shadow:none !important;
    z-index:3 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg,
  body.gf-phone-menu .prodlogooutlg,
  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg img,
  body.gf-phone-menu .prodlogooutlg img{
    max-width:42px !important;
    max-height:22px !important;
    width:auto !important;
    height:auto !important;

    object-fit:contain !important;
  }

  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg,
  body.gf-phone-menu .prodlogooutlg{
    position:absolute !important;
    right:12px !important;
    top:13px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    z-index:2 !important;
  }
}

/* =========================================================
   Phone Product Card Text Alignment
   Aligns title, term, description with info icon
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .item-container,
  body.gf-phone-menu .item-container{
    position:relative !important;
    padding:12px 14px 13px 14px !important;
  }

  /* Info icon */
  body.gf-tablet-menu.gf-phone-menu .gf-tablet-details-btn,
  body.gf-phone-menu .gf-tablet-details-btn{
    position:absolute !important;
    left:13px !important;
    top:15px !important;
    right:auto !important;

    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    min-height:19px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:11px !important;
    font-weight:900 !important;
    line-height:1 !important;

    border-radius:999px !important;
    z-index:4 !important;
  }

  /* Product title lines up beside info icon */
  body.gf-tablet-menu.gf-phone-menu .itemtitleoutlg,
  body.gf-phone-menu .itemtitleoutlg{
    display:block !important;

    margin:0 48px 4px 29px !important;
    padding:0 !important;

    max-width:calc(100% - 78px) !important;
    min-width:0 !important;

    color:#111827 !important;
    font-size:14px !important;
    font-weight:900 !important;
    line-height:1.15 !important;
    letter-spacing:-.01em !important;

    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  /* Term/miles aligns under title, not under icon */
  body.gf-tablet-menu.gf-phone-menu .termdisplaylg,
  body.gf-phone-menu .termdisplaylg{
    display:block !important;

    margin:0 48px 7px 29px !important;
    padding:0 !important;

    color:#7b8794 !important;
    font-size:10px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
  }

  /* Description aligns with title and term */
  body.gf-tablet-menu.gf-phone-menu .itemdesout,
  body.gf-phone-menu .itemdesout{
    display:block !important;

    width:auto !important;
    max-width:none !important;

    margin:0 0 0 29px !important;
    padding:0 !important;

    color:#111827 !important;
    font-size:10.5px !important;
    font-weight:750 !important;
    line-height:1.35 !important;
  }

  /* Product price/payment line aligns with description */
  body.gf-tablet-menu.gf-phone-menu .propricez,
  body.gf-tablet-menu.gf-phone-menu .propmtz,
  body.gf-phone-menu .propricez,
  body.gf-phone-menu .propmtz{
    display:inline-block !important;

    margin-top:4px !important;
    margin-right:8px !important;

    color:#8a94a3 !important;
    font-size:10.5px !important;
    font-weight:850 !important;
    line-height:1.2 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .propricez:first-of-type,
  body.gf-phone-menu .propricez:first-of-type{
    margin-left:29px !important;
  }

  /* Logo stays top right */
  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg,
  body.gf-phone-menu .prodlogooutlg{
    position:absolute !important;
    right:13px !important;
    top:15px !important;

    max-width:38px !important;
    max-height:22px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
  }

  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg img,
  body.gf-phone-menu .prodlogooutlg img{
    max-width:38px !important;
    max-height:22px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
  }
}

/* =========================================================
   Phone Product Card Alignment - Grid Structure
   Forces legacy elements into clean SaaS rows
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .item-container,
  body.gf-phone-menu .item-container{
    display:grid !important;
    grid-template-columns:22px minmax(0, 1fr) 48px !important;
    grid-template-rows:auto auto auto auto !important;
    column-gap:8px !important;
    row-gap:3px !important;

    align-items:start !important;

    padding:12px 12px 12px 12px !important;
    min-height:94px !important;

    background:#ffffff !important;
    border:1px solid #d8e1ea !important;
    border-radius:13px !important;

    box-shadow:
      0 1px 2px rgba(15,23,42,.04),
      0 8px 18px rgba(15,23,42,.045) !important;

    box-sizing:border-box !important;
  }

  /* Info icon - left column */
  body.gf-tablet-menu.gf-phone-menu .gf-tablet-details-btn,
  body.gf-phone-menu .gf-tablet-details-btn{
    grid-column:1 !important;
    grid-row:1 !important;

    position:static !important;
    inset:auto !important;
    transform:none !important;

    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;

    margin:1px 0 0 0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:11px !important;
    font-weight:900 !important;
    line-height:1 !important;

    border-radius:999px !important;
    background:#ffffff !important;
    border:1.4px solid currentColor !important;

    box-shadow:none !important;
    z-index:3 !important;
  }

  /* Title - lines up with icon */
  body.gf-tablet-menu.gf-phone-menu .itemtitleoutlg,
  body.gf-phone-menu .itemtitleoutlg{
    grid-column:2 !important;
    grid-row:1 !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    min-width:0 !important;
    max-width:100% !important;

    color:#111827 !important;
    font-size:14px !important;
    font-weight:900 !important;
    line-height:1.12 !important;
    letter-spacing:-.01em !important;

    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  /* Logo - right column */
  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg,
  body.gf-phone-menu .prodlogooutlg{
    grid-column:3 !important;
    grid-row:1 / span 2 !important;

    position:static !important;
    inset:auto !important;
    transform:none !important;

    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;

    width:48px !important;
    max-width:48px !important;
    height:24px !important;
    max-height:24px !important;

    margin:0 !important;
    padding:0 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg img,
  body.gf-phone-menu .prodlogooutlg img{
    max-width:44px !important;
    max-height:22px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
  }

  /* Term / miles - starts under title */
  body.gf-tablet-menu.gf-phone-menu .termdisplaylg,
  body.gf-phone-menu .termdisplaylg{
    grid-column:2 / 4 !important;
    grid-row:2 !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    color:#7b8794 !important;
    font-size:10px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
  }

  /* Description - starts under title */
  body.gf-tablet-menu.gf-phone-menu .itemdesout,
  body.gf-phone-menu .itemdesout{
    grid-column:2 / 4 !important;
    grid-row:3 !important;

    display:block !important;

    width:auto !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    color:#111827 !important;
    font-size:10.5px !important;
    font-weight:750 !important;
    line-height:1.35 !important;
  }

  /* Product price/payment row */
  body.gf-tablet-menu.gf-phone-menu .propricez,
  body.gf-tablet-menu.gf-phone-menu .propmtz,
  body.gf-phone-menu .propricez,
  body.gf-phone-menu .propmtz{
    display:inline-block !important;

    margin:3px 8px 0 0 !important;
    padding:0 !important;

    color:#8a94a3 !important;
    font-size:10.5px !important;
    font-weight:850 !important;
    line-height:1.2 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .propricez,
  body.gf-phone-menu .propricez{
    grid-column:2 !important;
    grid-row:4 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .propmtz,
  body.gf-phone-menu .propmtz{
    grid-column:2 / 4 !important;
    grid-row:4 !important;
    margin-left:42px !important;
  }
}

/* =========================================================
   Phone Product Card Alignment - Final Override
   Uses absolute icon/logo + one clean text column
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .item-container,
  body.gf-phone-menu .item-container{
    display:block !important;
    position:relative !important;

    padding:14px 14px 13px 44px !important;
    min-height:104px !important;

    background:#ffffff !important;
    border:1px solid #d8e1ea !important;
    border-radius:13px !important;

    box-shadow:
      0 1px 2px rgba(15,23,42,.04),
      0 8px 18px rgba(15,23,42,.045) !important;

    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* Info icon: locked to the left */
  body.gf-tablet-menu.gf-phone-menu .gf-tablet-details-btn,
  body.gf-phone-menu .gf-tablet-details-btn{
    position:absolute !important;
    left:16px !important;
    top:18px !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;

    margin:0 !important;
    padding:0 !important;

    font-size:12px !important;
    font-weight:900 !important;
    line-height:1 !important;

    border-radius:999px !important;
    background:#ffffff !important;
    border:1.5px solid currentColor !important;
    box-shadow:none !important;

    z-index:5 !important;
  }

  /* Vendor logo: locked to the top right */
  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg,
  body.gf-phone-menu .prodlogooutlg{
    position:absolute !important;
    top:17px !important;
    right:14px !important;
    left:auto !important;
    bottom:auto !important;
    transform:none !important;

    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;

    width:44px !important;
    max-width:44px !important;
    height:24px !important;
    max-height:24px !important;

    margin:0 !important;
    padding:0 !important;

    z-index:4 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg img,
  body.gf-phone-menu .prodlogooutlg img{
    max-width:44px !important;
    max-height:24px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
  }

  /* Title: one text column, aligned beside icon */
  body.gf-tablet-menu.gf-phone-menu .itemtitleoutlg,
  body.gf-phone-menu .itemtitleoutlg{
    display:block !important;
    float:none !important;
    clear:none !important;
    position:relative !important;

    width:auto !important;
    min-width:0 !important;
    max-width:calc(100% - 48px) !important;

    margin:0 48px 8px 0 !important;
    padding:0 !important;

    color:#111827 !important;
    font-size:14px !important;
    font-weight:900 !important;
    line-height:1.12 !important;
    letter-spacing:-.01em !important;

    text-align:left !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  /* Term/miles: same text column as title */
  body.gf-tablet-menu.gf-phone-menu .termdisplaylg,
  body.gf-phone-menu .termdisplaylg{
    display:block !important;
    float:none !important;
    clear:both !important;
    position:relative !important;

    width:auto !important;
    min-width:0 !important;
    max-width:calc(100% - 10px) !important;

    margin:0 0 7px 0 !important;
    padding:0 !important;

    color:#7b8794 !important;
    font-size:10px !important;
    font-weight:800 !important;
    line-height:1.2 !important;

    text-align:left !important;
    white-space:normal !important;
  }

  /* Description: same text column as title */
  body.gf-tablet-menu.gf-phone-menu .itemdesout,
  body.gf-phone-menu .itemdesout{
    display:block !important;
    float:none !important;
    clear:both !important;
    position:relative !important;

    width:auto !important;
    min-width:0 !important;
    max-width:calc(100% - 4px) !important;

    margin:0 0 7px 0 !important;
    padding:0 !important;

    color:#111827 !important;
    font-size:10.5px !important;
    font-weight:750 !important;
    line-height:1.34 !important;
    letter-spacing:-.005em !important;

    text-align:left !important;
    white-space:normal !important;
  }

  /* Price/payment: same text column, inline */
  body.gf-tablet-menu.gf-phone-menu .propricez,
  body.gf-tablet-menu.gf-phone-menu .propmtz,
  body.gf-phone-menu .propricez,
  body.gf-phone-menu .propmtz{
    display:inline-block !important;
    float:none !important;
    clear:none !important;
    position:relative !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    margin:0 12px 0 0 !important;
    padding:0 !important;

    color:#8a94a3 !important;
    font-size:10.5px !important;
    font-weight:850 !important;
    line-height:1.2 !important;

    text-align:left !important;
    vertical-align:baseline !important;
  }

  /* Remove old layout behavior inside product cards */
  body.gf-tablet-menu.gf-phone-menu .item-container *,
  body.gf-phone-menu .item-container *{
    box-sizing:border-box !important;
  }
}


/* =========================================================
   Phone Product Title/Icon Fine Alignment - Updated 2
   Removes old min-height and lowers title/icon/logo
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .itemtitleoutlg,
  body.gf-phone-menu .itemtitleoutlg{
    min-height:0 !important;
    max-height:none !important;
    height:auto !important;

    display:block !important;
    align-items:unset !important;

    margin:10px 48px 8px 0 !important;
    padding:0 !important;

    line-height:1.12 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-tablet-details-btn,
  body.gf-phone-menu .gf-tablet-details-btn{
    top:24px !important;
  }

 /* body.gf-tablet-menu.gf-phone-menu .prodlogooutlg,
  body.gf-phone-menu .prodlogooutlg{
    top:24px !important;
  }*/

  body.gf-tablet-menu.gf-phone-menu .termdisplaylg,
  body.gf-phone-menu .termdisplaylg{
    margin:0 0 7px 0 !important;
    padding:0 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .itemdesout,
  body.gf-phone-menu .itemdesout{
    margin:0 0 7px 0 !important;
  }
}

/* =========================================================
   Phone Product Logo Size Increase
   About 20% larger
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg,
  body.gf-phone-menu .prodlogooutlg{
    width:54px !important;
    max-width:54px !important;
    height:30px !important;
    max-height:30px !important;
  }

  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg img,
  body.gf-phone-menu .prodlogooutlg img{
    max-width:54px !important;
    max-height:30px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
  }
}

/* =========================================================
   Phone Product Text Premium Size
   Larger term + description
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .termdisplaylg,
  body.gf-phone-menu .termdisplaylg{
    font-size:11.25px !important;
    font-weight:850 !important;
    line-height:1.25 !important;
    color:#6f7b8a !important;

    margin:0 0 8px 0 !important;
    padding:0 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .itemdesout,
  body.gf-phone-menu .itemdesout{
    font-size:11.5px !important;
    font-weight:750 !important;
    line-height:1.42 !important;
    color:#111827 !important;

    margin:0 0 8px 0 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .propricez,
  body.gf-tablet-menu.gf-phone-menu .propmtz,
  body.gf-phone-menu .propricez,
  body.gf-phone-menu .propmtz{
    font-size:11px !important;
    font-weight:850 !important;
    line-height:1.25 !important;
    color:#7b8794 !important;
  }

}

/* =========================================================
   Phone Product Info Icon Click Fix
   Keeps info icon above logos/card layers
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .item-container,
  body.gf-phone-menu .item-container{
    position:relative !important;
    overflow:hidden !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-tablet-details-btn,
  body.gf-phone-menu .gf-tablet-details-btn{
    position:absolute !important;
    z-index:50 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
  }

  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg,
  body.gf-phone-menu .prodlogooutlg,
  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg img,
  body.gf-phone-menu .prodlogooutlg img{
    z-index:10 !important;
    pointer-events:none !important;
  }

  body.gf-tablet-menu.gf-phone-menu .itemtitleoutlg,
  body.gf-tablet-menu.gf-phone-menu .termdisplaylg,
  body.gf-tablet-menu.gf-phone-menu .itemdesout,
  body.gf-tablet-menu.gf-phone-menu .propricez,
  body.gf-tablet-menu.gf-phone-menu .propmtz,
  body.gf-phone-menu .itemtitleoutlg,
  body.gf-phone-menu .termdisplaylg,
  body.gf-phone-menu .itemdesout,
  body.gf-phone-menu .propricez,
  body.gf-phone-menu .propmtz{
    position:relative !important;
    z-index:2 !important;
  }
}

/* =========================================================
   Phone Product Info Icon Larger Tap Target
   Keeps visual icon small but easier to tap
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .gf-tablet-details-btn,
  body.gf-phone-menu .gf-tablet-details-btn{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;

    font-size:12px !important;
    line-height:1 !important;

    top:22px !important;
    left:14px !important;

    z-index:80 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }
}

/* =========================================================
   Phone Product Category Icon Bigger Tap Target
   Targets the real visible product icon: p#catcolor
   Does not affect column icons
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu li.productclassout .item-container,
  body.gf-phone-menu li.productclassout .item-container,
  body.gf-tablet-menu.gf-phone-menu li[data-id] .item-container,
  body.gf-phone-menu li[data-id] .item-container{
    position:relative !important;
    padding-left:50px !important;
  }

  body.gf-tablet-menu.gf-phone-menu li.productclassout .key[id^="p"][id$="catcolor"],
  body.gf-phone-menu li.productclassout .key[id^="p"][id$="catcolor"],
  body.gf-tablet-menu.gf-phone-menu li[data-id] .key[id^="p"][id$="catcolor"],
  body.gf-phone-menu li[data-id] .key[id^="p"][id$="catcolor"]{
    position:absolute !important;
    left:11px !important;
    top:15px !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;

    margin:0 !important;
    padding:0 !important;

    font-size:15px !important;
    font-weight:900 !important;
    line-height:1 !important;

    border-radius:999px !important;
    background:#ffffff !important;
    border:1.6px solid currentColor !important;
    box-shadow:0 2px 7px rgba(15,23,42,.08) !important;

    z-index:99999 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent !important;
    user-select:none !important;
  }

  body.gf-tablet-menu.gf-phone-menu li.productclassout .prodlogooutlg,
  body.gf-tablet-menu.gf-phone-menu li.productclassout .prodlogooutlg *,
  body.gf-phone-menu li.productclassout .prodlogooutlg,
  body.gf-phone-menu li.productclassout .prodlogooutlg *,
  body.gf-tablet-menu.gf-phone-menu li[data-id] .prodlogooutlg,
  body.gf-tablet-menu.gf-phone-menu li[data-id] .prodlogooutlg *,
  body.gf-phone-menu li[data-id] .prodlogooutlg,
  body.gf-phone-menu li[data-id] .prodlogooutlg *{
    pointer-events:none !important;
  }
}


/* =========================================================
   Phone Hide Empty/Broken Product Logos - Safe Version
   Does not hide real img.prodlogooutlg elements
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg img:not([src]),
  body.gf-phone-menu .prodlogooutlg img:not([src]),
  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg img[src=""],
  body.gf-phone-menu .prodlogooutlg img[src=""],
  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg img[src="#"],
  body.gf-phone-menu .prodlogooutlg img[src="#"],
  body.gf-tablet-menu.gf-phone-menu img.prodlogooutlg:not([src]),
  body.gf-phone-menu img.prodlogooutlg:not([src]),
  body.gf-tablet-menu.gf-phone-menu img.prodlogooutlg[src=""],
  body.gf-phone-menu img.prodlogooutlg[src=""],
  body.gf-tablet-menu.gf-phone-menu img.prodlogooutlg[src="#"],
  body.gf-phone-menu img.prodlogooutlg[src="#"]{
    display:none !important;
  }

}

/* =========================================================
   Phone Alignment Cleanup
   Removes popup padding + payment display margin
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .popup,
  body.gf-phone-menu .popup{
    padding:0 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .pmtdis,
  body.gf-phone-menu .pmtdis{
    margin:0 !important;
  }

}

/* =========================================================
   Phone Column Bottom Fade Position Fix
   Moves fade overlay closer to the true bottom
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu #menus1.gf-has-scroll-fade::after,
  body.gf-tablet-menu.gf-phone-menu #menus2.gf-has-scroll-fade::after,
  body.gf-tablet-menu.gf-phone-menu #menus3.gf-has-scroll-fade::after,
  body.gf-tablet-menu.gf-phone-menu #menus4.gf-has-scroll-fade::after,
  body.gf-phone-menu #menus1.gf-has-scroll-fade::after,
  body.gf-phone-menu #menus2.gf-has-scroll-fade::after,
  body.gf-phone-menu #menus3.gf-has-scroll-fade::after,
  body.gf-phone-menu #menus4.gf-has-scroll-fade::after{
    height:34px !important;
    margin-top:-1px !important;
    bottom:0 !important;
  }

}


/* =========================================================
   Phone Product Cards - Intentional Floating Card Width
   Makes products feel like movable pieces
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu ul.menus li,
  body.gf-tablet-menu.gf-phone-menu ul.menus2 li,
  body.gf-tablet-menu.gf-phone-menu ul.menus3 li,
  body.gf-tablet-menu.gf-phone-menu ul.menus4 li,
  body.gf-phone-menu ul.menus li,
  body.gf-phone-menu ul.menus2 li,
  body.gf-phone-menu ul.menus3 li,
  body.gf-phone-menu ul.menus4 li{
    width:94% !important;
    margin:0 auto 7px auto !important;
    padding:0 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .item-container,
  body.gf-phone-menu .item-container{
    width:100% !important;
  }

}

/* =========================================================
   Phone Compact Product View
   Shows more product cards on real phones
   ========================================================= */

@media only screen and (max-width: 767px){

  /* Slightly reduce space above carousel */
  body.gf-tablet-menu.gf-phone-menu #smallframe,
  body.gf-phone-menu #smallframe{
    padding-top:48px !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhoneNav,
  body.gf-phone-menu #gfPhoneNav{
    height:48px !important;
    min-height:48px !important;
    padding:4px 18px !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhonePrev,
  body.gf-tablet-menu.gf-phone-menu #gfPhoneNext,
  body.gf-phone-menu #gfPhonePrev,
  body.gf-phone-menu #gfPhoneNext{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    font-size:25px !important;
  }

  /* More usable column height */
  body.gf-tablet-menu.gf-phone-menu #m1,
  body.gf-tablet-menu.gf-phone-menu #m2,
  body.gf-tablet-menu.gf-phone-menu #m3,
  body.gf-tablet-menu.gf-phone-menu #m4,
  body.gf-phone-menu #m1,
  body.gf-phone-menu #m2,
  body.gf-phone-menu #m3,
  body.gf-phone-menu #m4{
    height:calc(100dvh - 148px) !important;
    max-height:calc(100dvh - 148px) !important;
  }

  /* Tighter product list */
  body.gf-tablet-menu.gf-phone-menu #menus1,
  body.gf-tablet-menu.gf-phone-menu #menus2,
  body.gf-tablet-menu.gf-phone-menu #menus3,
  body.gf-tablet-menu.gf-phone-menu #menus4,
  body.gf-phone-menu #menus1,
  body.gf-phone-menu #menus2,
  body.gf-phone-menu #menus3,
  body.gf-phone-menu #menus4{
    padding:4px 0 0 0 !important;
  }

  body.gf-tablet-menu.gf-phone-menu ul.menus li,
  body.gf-tablet-menu.gf-phone-menu ul.menus2 li,
  body.gf-tablet-menu.gf-phone-menu ul.menus3 li,
  body.gf-tablet-menu.gf-phone-menu ul.menus4 li,
  body.gf-phone-menu ul.menus li,
  body.gf-phone-menu ul.menus2 li,
  body.gf-phone-menu ul.menus3 li,
  body.gf-phone-menu ul.menus4 li{
    width:94% !important;
    margin:0 auto 5px auto !important;
  }

  /* Compact card */
  body.gf-tablet-menu.gf-phone-menu li.productclassout .item-container,
  body.gf-phone-menu li.productclassout .item-container,
  body.gf-tablet-menu.gf-phone-menu li[data-id] .item-container,
  body.gf-phone-menu li[data-id] .item-container{
    min-height:82px !important;
    padding:9px 12px 9px 46px !important;
    border-radius:12px !important;
  }

  /* Product category info icon */
  body.gf-tablet-menu.gf-phone-menu li.productclassout .key[id^="p"][id$="catcolor"],
  body.gf-phone-menu li.productclassout .key[id^="p"][id$="catcolor"],
  body.gf-tablet-menu.gf-phone-menu li[data-id] .key[id^="p"][id$="catcolor"],
  body.gf-phone-menu li[data-id] .key[id^="p"][id$="catcolor"]{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;

    left:10px !important;
    top:13px !important;

    font-size:13px !important;
  }

  /* Product logo */
  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg,
  body.gf-phone-menu .prodlogooutlg{
    top:14px !important;
    right:12px !important;

    width:48px !important;
    max-width:48px !important;
    height:26px !important;
    max-height:26px !important;
  }

  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg img,
  body.gf-phone-menu .prodlogooutlg img,
  body.gf-tablet-menu.gf-phone-menu img.prodlogooutlg,
  body.gf-phone-menu img.prodlogooutlg{
    max-width:48px !important;
    max-height:26px !important;
  }

  /* Product title */
  body.gf-tablet-menu.gf-phone-menu .itemtitleoutlg,
  body.gf-phone-menu .itemtitleoutlg{
    min-height:0 !important;
    max-height:none !important;
    height:auto !important;

    margin:6px 48px 5px 0 !important;
    padding:0 !important;

    font-size:13.5px !important;
    font-weight:900 !important;
    line-height:1.08 !important;
  }

  /* Term text */
  body.gf-tablet-menu.gf-phone-menu .termdisplaylg,
  body.gf-phone-menu .termdisplaylg{
    margin:0 0 5px 0 !important;
    padding:0 !important;

    font-size:10.75px !important;
    font-weight:850 !important;
    line-height:1.16 !important;
  }

  /* Description */
  body.gf-tablet-menu.gf-phone-menu .itemdesout,
  body.gf-phone-menu .itemdesout{
    margin:0 0 5px 0 !important;

    font-size:10.75px !important;
    font-weight:750 !important;
    line-height:1.28 !important;
  }

  /* Price/payment row */
  body.gf-tablet-menu.gf-phone-menu .propricez,
  body.gf-tablet-menu.gf-phone-menu .propmtz,
  body.gf-phone-menu .propricez,
  body.gf-phone-menu .propmtz{
    font-size:10.5px !important;
    line-height:1.15 !important;
    margin:0 10px 0 0 !important;
  }

}

/* =========================================================
   Phone Compact View - Larger Product Logos
   Keeps same card format
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg,
  body.gf-phone-menu .prodlogooutlg{
    top:13px !important;
    right:12px !important;

    width:58px !important;
    max-width:58px !important;
    height:32px !important;
    max-height:32px !important;
  }

  body.gf-tablet-menu.gf-phone-menu .prodlogooutlg img,
  body.gf-phone-menu .prodlogooutlg img,
  body.gf-tablet-menu.gf-phone-menu img.prodlogooutlg,
  body.gf-phone-menu img.prodlogooutlg{
    max-width:58px !important;
    max-height:32px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
  }

  /* Give title a little more right-side room protection */
  body.gf-tablet-menu.gf-phone-menu .itemtitleoutlg,
  body.gf-phone-menu .itemtitleoutlg{
    max-width:calc(100% - 62px) !important;
    margin-right:62px !important;
  }
}

/* =========================================================
   Phone Select Button CTA Upgrade
   Normal screen uses .smtbutton2
   Accept/Decline screen uses .smtbutton
   ========================================================= */

@media only screen and (max-width: 767px){

  /* Normal phone menu: hide accept/decline Select button */
  body.gf-tablet-menu.gf-phone-menu:not(.gf-selected-view) .smtbutton,
  body.gf-phone-menu:not(.gf-selected-view) .smtbutton{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* Normal phone menu: show main Select button */
  body.gf-tablet-menu.gf-phone-menu:not(.gf-selected-view) .smtbutton2,
  body.gf-phone-menu:not(.gf-selected-view) .smtbutton2{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /* Accept/Decline selected screen: show accept/decline Select button */
  body.gf-tablet-menu.gf-phone-menu.gf-selected-view .smtbutton,
  body.gf-phone-menu.gf-selected-view .smtbutton{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /* Accept/Decline selected screen: hide main menu Select button */
  body.gf-tablet-menu.gf-phone-menu.gf-selected-view .smtbutton2,
  body.gf-phone-menu.gf-selected-view .smtbutton2{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* Shared CTA styling */
  body.gf-tablet-menu.gf-phone-menu .smtbutton,
  body.gf-tablet-menu.gf-phone-menu .smtbutton2,
  body.gf-phone-menu .smtbutton,
  body.gf-phone-menu .smtbutton2{
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;

    margin:7px 0 0 0 !important;
    padding:12px 14px !important;

    background:#0597f2 !important;
    color:#ffffff !important;
    border:1px solid #0597f2 !important;
    border-radius:12px !important;

    font-size:14px !important;
    font-weight:900 !important;
    line-height:1.1 !important;
    letter-spacing:.01em !important;

    text-align:center !important;
    text-transform:none !important;

    box-shadow:
      0 2px 4px rgba(15,23,42,.08),
      0 8px 18px rgba(15,23,42,.10) !important;

    cursor:pointer !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  body.gf-tablet-menu.gf-phone-menu .smtbutton:active,
  body.gf-tablet-menu.gf-phone-menu .smtbutton2:active,
  body.gf-phone-menu .smtbutton:active,
  body.gf-phone-menu .smtbutton2:active{
    transform:scale(.98) !important;
    box-shadow:
      0 1px 2px rgba(15,23,42,.08),
      0 4px 10px rgba(15,23,42,.10) !important;
  }
}

/* =========================================================
   Phone Column Edit Button
   Clear customer-facing button beside column info icon
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .gf-column-action-wrap,
  body.gf-tablet-menu.gf-phone-menu .gf-tablet-column-action-wrap,
  body.gf-phone-menu .gf-column-action-wrap,
  body.gf-phone-menu .gf-tablet-column-action-wrap{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;

    right:8px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:1002 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-column-edit-btn,
  body.gf-phone-menu .gf-column-edit-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    height:26px !important;
    min-height:26px !important;

    padding:0 10px !important;
    margin:0 !important;

    background:#ffffff !important;
    color:#057ed0 !important;
    border:1px solid #b9e2fb !important;
    border-radius:999px !important;

    font-size:11px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:-.01em !important;

    box-shadow:0 3px 9px rgba(5,151,242,.14) !important;

    cursor:pointer !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent !important;
    user-select:none !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-column-edit-btn:active,
  body.gf-phone-menu .gf-column-edit-btn:active{
    transform:scale(.97) !important;
    background:#eef8ff !important;
  }

  /* Give header enough room for Edit Column + info icon */
  body.gf-tablet-menu.gf-phone-menu .columns,
  body.gf-phone-menu .columns{
    padding-right:118px !important;
  }
}

/* =========================================================
   Phone Column Header Layout
   Info left, title center, Edit Column right
   Prevents title/button overlap on small phones
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .columns,
  body.gf-phone-menu .columns{
    position:relative !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:42px !important;

    /* left room for info icon, right room for Edit Column */
    padding:8px 96px 8px 38px !important;

    text-align:center !important;
    overflow:visible !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-column-title-main,
  body.gf-phone-menu .gf-column-title-main{
    display:block !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    text-align:center !important;

    font-size:19px !important;
    font-weight:900 !important;
    line-height:1 !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-column-action-wrap,
  body.gf-tablet-menu.gf-phone-menu .gf-tablet-column-action-wrap,
  body.gf-phone-menu .gf-column-action-wrap,
  body.gf-phone-menu .gf-tablet-column-action-wrap{
    position:absolute !important;
    inset:auto !important;

    top:50% !important;
    left:0 !important;
    right:0 !important;
    transform:translateY(-50%) !important;

    display:block !important;

    width:100% !important;
    height:28px !important;

    z-index:1002 !important;
    pointer-events:none !important;
  }

  /* Info icon on the left */
  body.gf-tablet-menu.gf-phone-menu .gf-column-action-btn,
  body.gf-tablet-menu.gf-phone-menu .gf-column-signal-btn,
  body.gf-phone-menu .gf-column-action-btn,
  body.gf-phone-menu .gf-column-signal-btn{
    position:absolute !important;
    left:8px !important;
    right:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    width:25px !important;
    height:25px !important;
    min-width:25px !important;
    min-height:25px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:15px !important;
    font-weight:900 !important;
    line-height:1 !important;

    border-radius:999px !important;
    border:1.5px solid #b9e2fb !important;
    background:#ffffff !important;
    color:#0597f2 !important;

    box-shadow:0 3px 9px rgba(5,151,242,.14) !important;

    pointer-events:auto !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
  }

  /* Edit Column button on the right */
  body.gf-tablet-menu.gf-phone-menu .gf-column-edit-btn,
  body.gf-phone-menu .gf-column-edit-btn{
    position:absolute !important;
    right:8px !important;
    left:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    height:26px !important;
    min-height:26px !important;

    padding:0 9px !important;
    margin:0 !important;

    background:#ffffff !important;
    color:#057ed0 !important;
    border:1px solid #b9e2fb !important;
    border-radius:999px !important;

    font-size:10.5px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:-.02em !important;

    box-shadow:0 3px 9px rgba(5,151,242,.14) !important;

    pointer-events:auto !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
    white-space:nowrap !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-column-edit-btn:active,
  body.gf-phone-menu .gf-column-edit-btn:active{
    transform:translateY(-50%) scale(.97) !important;
    background:#eef8ff !important;
  }
}

/* =========================================================
   Phone Details Panel Cleanup
   Removes field-title feel, increases readability, adds close X
   ========================================================= */

@media only screen and (max-width: 767px){

 body.gf-tablet-menu.gf-phone-menu #gfPhoneDetailsPanel,
body.gf-phone-menu #gfPhoneDetailsPanel{
  position:fixed !important;
  top:112px !important;
  left:14px !important;
  right:14px !important;

  padding:16px 18px 16px 18px !important;

  background:#ffffff !important;
  border:1px solid #d8e1ea !important;
  border-radius:16px !important;

  box-shadow:
    0 12px 34px rgba(15,23,42,.16),
    0 3px 8px rgba(15,23,42,.08) !important;

  color:#0f172a !important;
  font-size:14px !important;
  font-weight:750 !important;
  line-height:1.45 !important;

  z-index:2000001 !important;
}

  body.gf-tablet-menu.gf-phone-menu #gfPhoneDetailsPanel strong,
  body.gf-phone-menu #gfPhoneDetailsPanel strong{
    display:none !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhoneDetailsPanel div,
body.gf-phone-menu #gfPhoneDetailsPanel div{
  margin:0 0 7px 0 !important;
  padding:0 !important;

  color:#0f172a !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}

  body.gf-tablet-menu.gf-phone-menu #gfPhoneDetailsPanel div:last-child,
  body.gf-phone-menu #gfPhoneDetailsPanel div:last-child{
    margin-bottom:0 !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhoneDetailsClose,
  body.gf-phone-menu #gfPhoneDetailsClose{
    position:absolute !important;
    top:8px !important;
    right:8px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:30px !important;
    height:30px !important;

    padding:0 !important;
    margin:0 !important;

    background:#ffffff !important;
    color:#334155 !important;
    border:1px solid #d8e1ea !important;
    border-radius:999px !important;

    font-size:18px !important;
    font-weight:900 !important;
    line-height:1 !important;

    box-shadow:0 3px 8px rgba(15,23,42,.08) !important;

    cursor:pointer !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

  body.gf-tablet-menu.gf-phone-menu #gfPhoneDetailsClose:active,
  body.gf-phone-menu #gfPhoneDetailsClose:active{
    transform:scale(.96) !important;
    background:#f8fafc !important;
  }
}

/* =========================================================
   Phone Column Header Layout - Edit Button Short Text
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu .columns,
  body.gf-phone-menu .columns{
    padding:8px 60px 8px 38px !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-column-edit-btn,
  body.gf-phone-menu .gf-column-edit-btn{
    min-width:44px !important;
    height:26px !important;
    min-height:26px !important;
    padding:0 10px !important;
    font-size:10.5px !important;
  }
}

/* =========================================================
   Phone Product Drag Lock Visual Behavior
   Normal screen = no drag feel
   Edit screen = draggable feel
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-phone-menu:not(.gf-phone-column-editing) li.productclassout,
  body.gf-phone-menu:not(.gf-phone-column-editing) li[data-id],
  body.gf-tablet-menu.gf-phone-menu:not(.gf-phone-column-editing) li.productclassout,
  body.gf-tablet-menu.gf-phone-menu:not(.gf-phone-column-editing) li[data-id]{
    cursor:default !important;
    touch-action:pan-y !important;
  }

  body.gf-phone-menu.gf-phone-column-editing li.productclassout,
  body.gf-phone-menu.gf-phone-column-editing li[data-id],
  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing li.productclassout,
  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing li[data-id]{
    cursor:grab !important;
    touch-action:pan-y !important;
  }

  body.gf-phone-menu.gf-phone-column-editing li.productclassout:active,
  body.gf-phone-menu.gf-phone-column-editing li[data-id]:active,
  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing li.productclassout:active,
  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing li[data-id]:active{
    cursor:grabbing !important;
  }
}

/* =========================================================
   Phone Header Logo - Wide OEM Logo Fix
   Makes wide/short logos like Toyota more visible
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu #grid-containertop .logo,
  body.gf-phone-menu #grid-containertop .logo{
    flex:0 0 58px !important;
    width:58px !important;
    max-width:58px !important;
    height:32px !important;
    max-height:32px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 10px 0 0 !important;
    padding:0 !important;

    overflow:visible !important;
  }

  body.gf-tablet-menu.gf-phone-menu #grid-containertop .logo img,
  body.gf-phone-menu #grid-containertop .logo img{
    display:block !important;

    width:auto !important;
    height:auto !important;

    max-width:58px !important;
    max-height:28px !important;

    object-fit:contain !important;
  }

  /* Give customer/vehicle text enough room after wider logo */
  body.gf-tablet-menu.gf-phone-menu #gfPhoneHeaderInfo,
  body.gf-phone-menu #gfPhoneHeaderInfo{
    min-width:0 !important;
    margin-left:0 !important;
  }
}

/* =========================================================
   Phone Column Edit Screen
   Customer-facing stacked edit flow
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-tablet-menu.gf-phone-menu #gfPhoneColumnEditScreen,
  body.gf-phone-menu #gfPhoneColumnEditScreen{
    display:none;

    position:fixed !important;
    inset:0 !important;

    width:100vw !important;
    height:100dvh !important;

    background:#f4f6fb !important;

    z-index:3000000 !important;

    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing #gfPhoneColumnEditScreen,
  body.gf-phone-menu.gf-phone-column-editing #gfPhoneColumnEditScreen{
    display:block !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-card,
  body.gf-phone-menu .gf-phone-edit-card{
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    height:100% !important;

    padding:14px 14px 12px 14px !important;

    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-header,
  body.gf-phone-menu .gf-phone-edit-header{
    position:relative !important;

    flex:0 0 auto !important;

    padding:8px 46px 12px 0 !important;
    margin:0 0 8px 0 !important;

    border-bottom:1px solid #e4eaf1 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-title,
  body.gf-phone-menu .gf-phone-edit-title{
    color:#0f172a !important;
    font-size:20px !important;
    font-weight:900 !important;
    line-height:1.1 !important;
    letter-spacing:-.02em !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-subtitle,
  body.gf-phone-menu .gf-phone-edit-subtitle{
    margin-top:4px !important;

    color:#687385 !important;
    font-size:12px !important;
    font-weight:750 !important;
    line-height:1.25 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-close,
  body.gf-phone-menu .gf-phone-edit-close{
    position:absolute !important;
    top:4px !important;
    right:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:36px !important;
    height:36px !important;

    padding:0 !important;
    margin:0 !important;

    background:#ffffff !important;
    color:#0f172a !important;
    border:1px solid #d8e1ea !important;
    border-radius:999px !important;

    font-size:22px !important;
    font-weight:900 !important;
    line-height:1 !important;

    box-shadow:0 4px 12px rgba(15,23,42,.08) !important;

    cursor:pointer !important;
    touch-action:manipulation !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-section,
  body.gf-phone-menu .gf-phone-edit-section{
    flex:1 1 0 !important;
    min-height:0 !important;

    display:flex !important;
    flex-direction:column !important;

    margin:0 0 10px 0 !important;

    background:#ffffff !important;
    border:1px solid #d8e1ea !important;
    border-radius:16px !important;

    box-shadow:0 4px 14px rgba(15,23,42,.06) !important;

    overflow:hidden !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-section-title,
  body.gf-phone-menu .gf-phone-edit-section-title{
    flex:0 0 auto !important;

    padding:10px 12px !important;

    color:#0f172a !important;
    font-size:14px !important;
    font-weight:900 !important;
    line-height:1 !important;

    background:#ffffff !important;
    border-bottom:1px solid #e4eaf1 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-list,
  body.gf-phone-menu .gf-phone-edit-list{
    flex:1 1 auto !important;
    min-height:0 !important;

    padding:8px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    -webkit-overflow-scrolling:touch !important;
    box-sizing:border-box !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-footer,
  body.gf-phone-menu .gf-phone-edit-footer{
    flex:0 0 auto !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;

    padding:4px 0 0 0 !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-cancel,
  body.gf-phone-menu .gf-phone-edit-cancel,
  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-done,
  body.gf-phone-menu .gf-phone-edit-done{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:44px !important;

    padding:12px 14px !important;

    border-radius:12px !important;

    font-size:14px !important;
    font-weight:900 !important;
    line-height:1 !important;

    cursor:pointer !important;
    touch-action:manipulation !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-cancel,
  body.gf-phone-menu .gf-phone-edit-cancel{
    background:#ffffff !important;
    color:#334155 !important;
    border:1px solid #d8e1ea !important;
  }

  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-done,
  body.gf-phone-menu .gf-phone-edit-done{
    background:#0597f2 !important;
    color:#ffffff !important;
    border:1px solid #0597f2 !important;
    box-shadow:0 8px 18px rgba(5,151,242,.20) !important;
  }
}

/* =========================================================
   Phone Column Edit Product Cards
   Add / Remove customer-facing actions
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-phone-menu .gf-phone-edit-product,
  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-product{
    position:relative !important;

    width:100% !important;
    margin:0 0 7px 0 !important;
    padding:0 !important;

    list-style:none !important;
    touch-action:pan-y !important;
  }

  body.gf-phone-menu .gf-phone-edit-product .item-container,
  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-product .item-container{
    min-height:82px !important;
    padding-right:82px !important;
  }

  body.gf-phone-menu .gf-phone-edit-add-btn,
  body.gf-phone-menu .gf-phone-edit-remove-btn,
  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-add-btn,
  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-remove-btn{
    position:absolute !important;
    right:10px !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-width:62px !important;
    height:34px !important;

    padding:0 12px !important;
    margin:0 !important;

    border-radius:999px !important;

    font-size:12px !important;
    font-weight:900 !important;
    line-height:1 !important;

    cursor:pointer !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent !important;

    z-index:20 !important;
  }

  body.gf-phone-menu .gf-phone-edit-add-btn,
  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-add-btn{
    background:#0597f2 !important;
    color:#ffffff !important;
    border:1px solid #0597f2 !important;
    box-shadow:0 6px 14px rgba(5,151,242,.18) !important;
  }

  body.gf-phone-menu .gf-phone-edit-remove-btn,
  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-remove-btn{
    background:#ffffff !important;
    color:#f24607 !important;
    border:1px solid #f6b39a !important;
  }

  body.gf-phone-menu .gf-phone-edit-add-btn:active,
  body.gf-phone-menu .gf-phone-edit-remove-btn:active,
  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-add-btn:active,
  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-remove-btn:active{
    transform:translateY(-50%) scale(.97) !important;
  }
}

/* =========================================================
   Phone Edit Screen Scroll Fix
   Allows section scrolling while keeping Add/Remove buttons tappable
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-phone-menu.gf-phone-column-editing #gfPhoneColumnEditScreen,
  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing #gfPhoneColumnEditScreen{
    touch-action:auto !important;
  }

  body.gf-phone-menu.gf-phone-column-editing .gf-phone-edit-section,
  body.gf-phone-menu.gf-phone-column-editing .gf-phone-edit-list,
  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing .gf-phone-edit-section,
  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing .gf-phone-edit-list{
    overflow-y:auto !important;
    overflow-x:hidden !important;

    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    overscroll-behavior:contain !important;
  }

  body.gf-phone-menu.gf-phone-column-editing .gf-phone-edit-product,
  body.gf-phone-menu.gf-phone-column-editing .gf-phone-edit-product li,
  body.gf-phone-menu.gf-phone-column-editing .gf-phone-edit-product .item-container,
  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing .gf-phone-edit-product,
  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing .gf-phone-edit-product li,
  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing .gf-phone-edit-product .item-container{
    touch-action:pan-y !important;
  }

  body.gf-phone-menu.gf-phone-column-editing .gf-phone-edit-add-btn,
  body.gf-phone-menu.gf-phone-column-editing .gf-phone-edit-remove-btn,
  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing .gf-phone-edit-add-btn,
  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing .gf-phone-edit-remove-btn{
    touch-action:manipulation !important;
  }
}

/* =========================================================
   Phone Edit Counts / Empty State
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-phone-menu .gf-phone-edit-section-title,
  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-section-title{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  body.gf-phone-menu .gf-phone-edit-count,
  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-count{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-width:24px !important;
    height:22px !important;

    padding:0 8px !important;

    background:#eef8ff !important;
    color:#057ed0 !important;
    border:1px solid #cfeaff !important;
    border-radius:999px !important;

    font-size:11px !important;
    font-weight:900 !important;
    line-height:1 !important;
  }

  body.gf-phone-menu .gf-phone-edit-empty,
  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-empty{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:72px !important;

    margin:0 !important;
    padding:16px !important;

    color:#687385 !important;
    background:#f8fafc !important;
    border:1px dashed #d8e1ea !important;
    border-radius:12px !important;

    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.3 !important;
    text-align:center !important;
  }
}

@media only screen and (max-width: 767px){

  body.gf-phone-menu .gf-phone-edit-section-title,
  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-section-title{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  body.gf-phone-menu .gf-phone-edit-count,
  body.gf-tablet-menu.gf-phone-menu .gf-phone-edit-count{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:24px !important;
    height:22px !important;
    padding:0 8px !important;
    background:#eef8ff !important;
    color:#057ed0 !important;
    border:1px solid #cfeaff !important;
    border-radius:999px !important;
    font-size:11px !important;
    font-weight:900 !important;
    line-height:1 !important;
  }
}


/* =========================================================
   Phone Completed Selection Screen
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-phone-completed{
    overflow:hidden !important;
    background:#f4f6fb !important;
  }

  body.gf-phone-completed #gfPhoneCompleteScreen{
    display:flex !important;
  }

  .gf-phone-complete-screen{
    display:none;

    position:fixed;
    inset:0;

    width:100vw;
    height:100dvh;

    align-items:center;
    justify-content:center;

    padding:24px 18px;

    background:#f4f6fb;

    box-sizing:border-box;

    z-index:20000;
  }

  .gf-phone-complete-card{
    width:100%;
    max-width:420px;

    padding:30px 24px 26px;

    background:#ffffff;

    border:1px solid #e4eaf1;
    border-radius:22px;

    box-shadow:0 20px 50px rgba(15,23,42,.12);

    text-align:center;

    box-sizing:border-box;
  }

  .gf-phone-complete-check{
    width:62px;
    height:62px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 16px;

    border-radius:999px;

    background:#ecfdf3;
    color:#28a745;

    font-size:32px;
    font-weight:900;
    line-height:1;
  }

  .gf-phone-complete-title{
    margin:0 0 7px;

    color:#0f172a;

    font-size:24px;
    font-weight:900;
    line-height:1.15;
  }

  .gf-phone-complete-subtitle{
    margin:0 0 24px;

    color:#687385;

    font-size:13px;
    font-weight:600;
    line-height:1.4;
  }

  .gf-phone-complete-payment-wrap{
    margin:0 0 18px;
    padding:17px 14px;

    background:#f0f8ff;

    border:1px solid #cfeaff;
    border-radius:14px;
  }

  .gf-phone-complete-label{
    margin-bottom:5px;

    color:#687385;

    font-size:11px;
    font-weight:800;

    text-transform:uppercase;
    letter-spacing:.05em;
  }

  .gf-phone-complete-payment{
    color:#057ed0;

    font-size:27px;
    font-weight:900;
    line-height:1.1;
  }

  .gf-phone-complete-summary{
    overflow:hidden;

    border:1px solid #e4eaf1;
    border-radius:14px;

    text-align:left;
  }

  .gf-phone-complete-summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:14px 16px;
  }

  .gf-phone-complete-summary-row + .gf-phone-complete-summary-row{
    border-top:1px solid #e4eaf1;
  }

  .gf-phone-complete-summary-title{
    color:#0f172a;

    font-size:14px;
    font-weight:850;
  }

  .gf-phone-complete-summary-sub{
    margin-top:2px;

    color:#687385;

    font-size:11px;
    font-weight:600;
  }

  .gf-phone-complete-count{
    min-width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 8px;

    background:#eef8ff;
    color:#057ed0;

    border-radius:999px;

    font-size:15px;
    font-weight:900;

    box-sizing:border-box;
  }

  .gf-phone-complete-declined .gf-phone-complete-count{
    background:#fff4f0;
    color:#f24607;
  }

  .gf-phone-complete-customer{
    margin-top:18px;

    color:#334155;

    font-size:12px;
    font-weight:700;
    line-height:1.4;
  }

  .gf-phone-complete-footer{
    margin-top:20px;

    color:#94a3b8;

    font-size:11px;
    font-weight:600;
  }

}


/* =========================================================
   Completed Phone Screen
   ========================================================= */

@media only screen and (max-width:767px){

  body.gf-phone-completed #gfPhoneNav{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  body.gf-phone-completed #gfPhoneCompleteScreen{
    display:flex !important;
  }

  .gf-phone-complete-screen{
    display:none;

    position:fixed;
    inset:0;

    width:100vw;
    height:100dvh;

    align-items:flex-start;
    justify-content:center;

    padding:24px 16px;

    background:#f4f6fb;

    overflow-y:auto;
    box-sizing:border-box;

    z-index:20000;
  }

  .gf-phone-complete-card{
    position:relative;

    width:100%;
    max-width:420px;

    margin:auto 0;

    padding:30px 22px 24px;

    background:#fff;

    border:1px solid #e4eaf1;
    border-radius:22px;

    box-shadow:0 20px 50px rgba(15,23,42,.12);

    box-sizing:border-box;
  }

  .gf-phone-complete-close{
    position:absolute;

    top:12px;
    right:12px;

    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:1px solid #e4eaf1;
    border-radius:999px;

    background:#fff;
    color:#687385;

    font-size:20px;
    font-weight:700;
    line-height:1;

    cursor:pointer;
  }

  .gf-phone-complete-check{
    width:62px;
    height:62px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 15px;

    background:#ecfdf3;
    color:#28a745;

    border-radius:999px;

    font-size:32px;
    font-weight:900;
  }

  .gf-phone-complete-title{
    text-align:center;

    color:#0f172a;

    font-size:23px;
    font-weight:900;
  }

  .gf-phone-complete-subtitle{
    margin:6px 0 20px;

    text-align:center;

    color:#687385;

    font-size:13px;
    font-weight:600;
  }

  .gf-phone-complete-payment-wrap{
    margin-bottom:18px;
    padding:15px;

    text-align:center;

    background:#f0f8ff;

    border:1px solid #cfeaff;
    border-radius:14px;
  }

  .gf-phone-complete-label{
    color:#687385;

    font-size:10px;
    font-weight:850;
    letter-spacing:.05em;
    text-transform:uppercase;
  }

  .gf-phone-complete-payment{
    margin-top:4px;

    color:#057ed0;

    font-size:26px;
    font-weight:900;
  }

  .gf-phone-complete-section{
    margin-top:14px;

    overflow:hidden;

    border:1px solid #dbe6ee;
    border-radius:13px;
  }

  .gf-phone-complete-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:10px 13px;

    background:#f8fbfd;

    color:#0f172a;

    font-size:12px;
    font-weight:900;
  }

  .gf-phone-complete-section-head span:last-child{
    min-width:26px;
    height:26px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#e9f6ff;
    color:#057ed0;

    border-radius:999px;
  }

  .gf-phone-complete-section-declined
  .gf-phone-complete-section-head span:last-child{
    background:#fff1ec;
    color:#f24607;
  }

  .gf-phone-complete-list{
    padding:4px 13px;
  }

  .gf-phone-complete-item{
    display:flex;
    align-items:center;
    gap:8px;

    padding:9px 0;

    border-bottom:1px solid #eef2f6;

    color:#334155;

    font-size:12px;
    font-weight:700;
  }

  .gf-phone-complete-item:last-child{
    border-bottom:0;
  }

  .gf-phone-complete-item-mark{
    color:#28a745;
    font-weight:900;
  }

  .gf-phone-complete-section-declined
  .gf-phone-complete-item-mark{
    color:#f24607;
  }

  .gf-phone-complete-customer{
    margin-top:18px;

    text-align:center;

    color:#334155;

    font-size:12px;
    font-weight:700;
  }

  .gf-phone-complete-footer{
    margin-top:17px;

    text-align:center;

    color:#94a3b8;

    font-size:11px;
    font-weight:600;
  }

}

/* =========================================================
   Final Selection Stored Snapshot
   ========================================================= */

.gf-final-snapshot{
  position:absolute;

  left:-10000px;
  top:0;

  width:720px;

  padding:34px 38px;

  background:#ffffff;
  color:#0f172a;

  font-family:Inter, Arial, sans-serif;

  box-sizing:border-box;
}

.gf-final-snapshot-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding-bottom:18px;
  margin-bottom:18px;

  border-bottom:2px solid #e4eaf1;
}

.gf-final-snapshot-brand{
  color:#057ed0;

  font-size:24px;
  font-weight:900;
}

.gf-final-snapshot-status{
  color:#687385;

  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
}

.gf-final-snapshot-customer{
  font-size:20px;
  font-weight:900;
}

.gf-final-snapshot-vehicle{
  margin-top:4px;

  color:#687385;

  font-size:14px;
  font-weight:700;
}

.gf-final-snapshot-selection{
  margin:22px 0;

  padding:18px 20px;

  background:#f0f8ff;

  border:1px solid #cfeaff;
  border-radius:14px;
}

.gf-final-snapshot-column{
  color:#0f172a;

  font-size:17px;
  font-weight:900;
}

.gf-final-snapshot-payment-label{
  margin-top:12px;

  color:#687385;

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.05em;
}

.gf-final-snapshot-payment{
  margin-top:3px;

  color:#057ed0;

  font-size:29px;
  font-weight:900;
}

.gf-final-snapshot-columns{
  display:flex;
  gap:18px;

  align-items:flex-start;
}

.gf-final-snapshot-section{
  flex:1;

  border:1px solid #dbe6ee;
  border-radius:12px;

  overflow:hidden;
}

.gf-final-snapshot-section-title{
  padding:11px 13px;

  background:#f8fbfd;

  font-size:13px;
  font-weight:900;
}

.gf-final-snapshot-section-title span{
  color:#687385;
}

.gf-final-snapshot-item{
  display:flex;
  align-items:flex-start;
  gap:8px;

  padding:9px 13px;
  border-top:1px solid #eef2f6;

  color:#0f172a;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

.gf-final-snapshot-item:before{
  content:"✓";

  flex:0 0 14px;
  width:14px;
  min-width:14px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  color:#28a745;
  font-weight:900;
  line-height:1;

  margin-right:0;
  margin-top:1px;
}

.gf-final-snapshot-declined .gf-final-snapshot-item:before{
  content:"✕";
  color:#f24607;
}

.gf-final-snapshot-signature{
  margin-top:26px;
  padding-top:18px;

  border-top:1px solid #e4eaf1;
}

.gf-final-snapshot-signature-title{
  margin-bottom:8px;

  color:#687385;

  font-size:11px;
  font-weight:800;

  text-transform:uppercase;
}

.gf-final-snapshot-signature img{
  display:block;

  max-width:420px;
  max-height:120px;

  object-fit:contain;
}

.gf-final-snapshot-date{
  margin-top:18px;

  color:#94a3b8;

  font-size:11px;
  font-weight:600;
}



/* =========================================================
   Phone-only UI hidden outside active phone states
   ========================================================= */

#gfPhoneCompleteScreen,
#gfPhoneColumnEditScreen{
  display:none;
}

body.gf-tablet-menu #siggy{
  width:100% !important;
  max-width:560px !important;

  margin:14px auto 0 !important;
  padding:14px 18px 16px !important;

  box-sizing:border-box !important;

  background:#ffffff !important;
  border:1px solid #e4eaf1 !important;
  border-radius:16px !important;

  text-align:center !important;
}

.gf-phone-edit-payment-preview{
  position:sticky;
  top:0;
  z-index:5;

  margin:10px 0 16px;
  padding:12px 14px;

  background:#f0f8ff;
  border:1px solid #cfeaff;
  border-radius:14px;

  text-align:center;
}

.gf-phone-edit-payment-label{
  margin-bottom:2px;

  color:#687385;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.gf-phone-edit-payment-value{
  color:#0f172a;
  font-size:24px;
  font-weight:850;
  line-height:1.1;
}

.gf-phone-edit-payment-period{
  color:#687385;
  font-size:12px;
  font-weight:700;
}

/* =========================================================
   Product Info Above Phone Add / Remove Screen
   ========================================================= */

@media only screen and (max-width: 767px){

  body.gf-phone-menu.gf-phone-column-editing #popcenter,
  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing #popcenter{
    position:fixed !important;
    z-index:4000001 !important;
  }

  body.gf-phone-menu.gf-phone-column-editing .dim,
  body.gf-tablet-menu.gf-phone-menu.gf-phone-column-editing .dim{
    position:fixed !important;
    z-index:4000000 !important;
  }

}

@media only screen and (max-width: 767px){

  body.gf-phone-menu .np,
  body.gf-tablet-menu.gf-phone-menu .np{
   font-size: 18px !important;
    font-weight: 850 !important;
    color: #0f172a !important;
    line-height: 1.1 !important;
  }

}



@media only screen and (max-width: 767px){

  body.gf-phone-menu #gfPhoneNav,
  body.gf-tablet-menu.gf-phone-menu #gfPhoneNav{

    background:rgba(255,255,255,.58) !important;

    border:1px solid rgba(203,213,225,.58) !important;

    border-radius:24px !important;

    box-shadow:
      0 8px 24px rgba(15,23,42,.12),
      0 2px 6px rgba(15,23,42,.06) !important;

    backdrop-filter:blur(1px) !important;
    -webkit-backdrop-filter:blur(1px) !important;

    overflow:hidden !important;
  }

}