/* =========================================================
   BUY ENGINE BARS (qtbe2)
   - Mobile sticky checkout bar only
   - Desktop bar intentionally excluded for now
   ========================================================= */

.qtbe2-fBar{
  display: none;
}

@media (max-width:820px){
  #packlist.qtbe2{
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  .qtbe2-fBar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483000;
    display: block;
    pointer-events: none;
  }

  .qtbe2-fBar[hidden]{
    display: none !important;
  }

  .qtbe2-fBar__btn{
    width: 100%;
    margin: 0;
    border: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    pointer-events: auto;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--be-ink);

    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
    backdrop-filter: blur(12px) saturate(165%);
    border-top: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 -14px 36px rgba(2,6,23,.10);
  }

  .qtbe2-fBar__main{
    min-width: 0;
    flex: 1 1 auto;

    display: grid;
    grid-template-columns: minmax(136px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  .qtbe2-fBar__priceCol{
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .qtbe2-fBar__k{
    font-size: 10.5px;
    line-height: 1.05;
    letter-spacing: .11em;
    text-transform: uppercase;
    font-weight: 950;
    color: var(--be-muted);
  }

  .qtbe2-fBar__p{
    font-size: clamp(20px, 5vw, 26px);
    line-height: 1.02;
    letter-spacing: -.035em;
    font-weight: 950;
    color: #0b1220;
    white-space: nowrap;
  }

  .qtbe2-fBar__save{
    font-size: 12px;
    line-height: 1.05;
    font-weight: 950;
    color: #16a34a;
    white-space: nowrap;
  }

  .qtbe2-fBar__meta{
    min-width: 0;
    display: grid;
    justify-items: end;
    align-content: center;
    gap: 3px;
  }

  .qtbe2-fBar__qty{
    max-width: min(46vw, 240px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
    line-height: 1.1;
    font-weight: 950;
    color: rgba(15,23,42,.72);
  }

  .qtbe2-fBar__hint{
    font-size: 11px;
    line-height: 1.05;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 950;
    color: color-mix(in srgb, var(--be-accent) 78%, #111);
  }

  .qtbe2-fBar__cta{
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 16px;

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

    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 28px;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0,0,0,.16);

    background:
      radial-gradient(140px 70px at 30% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 58%),
      linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
      var(--be-accent);

    box-shadow:
      0 10px 26px color-mix(in srgb, var(--be-accent) 22%, transparent),
      0 6px 16px rgba(2,6,23,.16);
  }

  .qtbe2-fBar__btn:focus-visible{
    outline: none;
    box-shadow: var(--be-focus), 0 -14px 36px rgba(2,6,23,.10);
  }
}

@media (max-width:560px){
  .qtbe2-fBar__main{
    grid-template-columns: minmax(122px, auto) minmax(0, 1fr);
    gap: 10px;
  }

  .qtbe2-fBar__cta{
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 26px;
  }

  .qtbe2-fBar__qty{
    max-width: 44vw;
  }
}

@media (max-width:420px){
  .qtbe2-fBar__btn{
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }

  .qtbe2-fBar__main{
    grid-template-columns: minmax(108px, auto) minmax(0, 1fr);
    gap: 8px;
  }

  .qtbe2-fBar__p{
    font-size: clamp(18px, 5.2vw, 22px);
  }

  .qtbe2-fBar__qty{
    max-width: 40vw;
    font-size: 12px;
  }

  .qtbe2-fBar__hint{
    font-size: 10px;
  }

  .qtbe2-fBar__cta{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 24px;
  }
}

@media (prefers-reduced-motion:reduce){
  .qtbe2-fBar,
  .qtbe2-fBar__btn{
    transition: none !important;
  }
}



/* -------------------------
   DESKTOP STICKY BUY BAR
------------------------- */
.qtbe2-dBar{
  display:none;
}

@media (min-width:821px){
  .qtbe2-dBar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9998;
    display:block;
    pointer-events:none;
    opacity:0;
    transform:translateY(16px);
    transition:
      opacity .18s ease,
      transform .18s ease;
  }

  .qtbe2-dBar[hidden]{
    display:none !important;
  }

  .qtbe2-dBar.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  .qtbe2-dBar__shell{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto 14px;
  }

  .qtbe2-dBar__btn{
    width:100%;
    min-height:74px;
    margin:0;
    padding:12px 14px;
    border:1px solid rgba(15,23,42,.10);
    border-radius:22px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    pointer-events:auto;
    cursor:pointer;
    text-align:left;
    font:inherit;
    color:var(--be-ink);

    background:
      radial-gradient(900px 160px at 12% 0%, rgba(255,255,255,.82), transparent 58%),
      radial-gradient(900px 160px at 88% 0%, var(--be-accent-soft2), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
    backdrop-filter:blur(14px) saturate(160%);
    box-shadow:
      0 20px 46px rgba(2,6,23,.14),
      0 10px 24px rgba(2,6,23,.08);
  }

  .qtbe2-dBar__btn:focus-visible{
    outline:none;
    box-shadow:
      var(--be-focus),
      0 20px 46px rgba(2,6,23,.14),
      0 10px 24px rgba(2,6,23,.08);
  }

  .qtbe2-dBar__main{
    min-width:0;
    flex:1 1 auto;
    display:flex;
    align-items:center;
    gap:18px;
  }

  .qtbe2-dBar__priceCol{
    min-width:150px;
    display:grid;
    gap:3px;
  }

  .qtbe2-dBar__k{
    font-size:10.5px;
    line-height:1.05;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:950;
    color:var(--be-muted);
  }

  .qtbe2-dBar__p{
    font-size:30px;
    line-height:1;
    letter-spacing:-.035em;
    font-weight:950;
    color:#0b1220;
    white-space:nowrap;
  }

  .qtbe2-dBar__save{
    font-size:12px;
    line-height:1.05;
    font-weight:950;
    color:#16a34a;
    white-space:nowrap;
  }

  .qtbe2-dBar__meta{
    min-width:0;
    flex:1 1 auto;
    display:grid;
    gap:5px;
  }

  .qtbe2-dBar__qty{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
    line-height:1.15;
    font-weight:950;
    color:rgba(15,23,42,.82);
  }

  .qtbe2-dBar__hint{
    font-size:11px;
    line-height:1.05;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:950;
    color:color-mix(in srgb, var(--be-accent) 78%, #111);
  }

  .qtbe2-dBar__cta{
    flex:0 0 auto;
    min-width:220px;
    padding:14px 18px;
    border-radius:18px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    color:#fff;
    white-space:nowrap;
    background:
      radial-gradient(160px 70px at 30% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 58%),
      linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
      var(--be-accent);
    box-shadow:
      0 14px 34px color-mix(in srgb, var(--be-accent) 22%, transparent),
      0 8px 18px rgba(2,6,23,.16);
  }

  .qtbe2-dBar__ctaTxt{
    color:#fff;
    font-size:15px;
    line-height:1;
    font-weight:950;
  }

  .qtbe2-dBar__ctaArrow{
    color:#fff;
    font-size:22px;
    line-height:1;
    transform:translateY(-1px);
  }
}

@media (min-width:821px) and (max-width:1100px){
  .qtbe2-dBar__btn{
    gap:14px;
    padding:11px 12px;
  }

  .qtbe2-dBar__main{
    gap:14px;
  }

  .qtbe2-dBar__p{
    font-size:26px;
  }

  .qtbe2-dBar__cta{
    min-width:190px;
    padding:13px 16px;
  }
}

@media (prefers-reduced-motion:reduce){
  .qtbe2-dBar,
  .qtbe2-dBar__btn{
    transition:none !important;
  }
}