/* ═══════════════════════════════════════════════════════
   SPRINT DRIVES — SHOP AND PRODUCT FIXES (v10.13)

   Loaded after shop.css and single-product.css.

   Three things:
     1. The quantity stepper and add to cart button on
        product cards, which were breaking out of the card
        on both desktop and mobile.
     2. The frequently bought together row, which was a
        broken slider on phones.
     3. The archive layout, now the category tiles are gone.

   No shadows. 44px minimum tap targets. 24px mobile gutter.
═════════════════════════════════════════════════════════ */

:root{
  --sd-s-indigo:#2a2c7b;
  --sd-s-indigo-dk:#1c1d55;
  --sd-s-green:#cedc49;
  --sd-s-ink:#0e0f1a;
  --sd-s-mut:#5c5c6b;
  --sd-s-line:#d9d9d4;
  --sd-s-soft:#f5f5f3;
}

/* ═══════════════════════════════════════════════════════
   1. PRODUCT CARD CONTROLS

   The stepper was three separate inline-block elements
   with their own widths and borders, so they wrapped,
   overlapped and overflowed at narrow widths. It is now a
   single grid with a fixed track, which cannot wrap.
═════════════════════════════════════════════════════════ */

.sd-product-card{ overflow:hidden; }

.sd-product-foot{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
  min-width:0;
}

.sd-product-qty{
  display:grid !important;
  grid-template-columns:44px 1fr 44px;
  align-items:stretch;
  width:100%;
  min-width:0;
  height:44px;
  border:1.5px solid var(--sd-s-line);
  background:#fff;
  overflow:hidden;
}

.sd-product-qty .sd-qty-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-width:0;
  margin:0;
  padding:0;
  border:none;
  border-radius:0;
  background:var(--sd-s-soft);
  color:var(--sd-s-indigo);
  font-family:inherit;
  font-size:17px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.sd-product-qty .sd-qty-btn:hover{ background:var(--sd-s-indigo); color:#fff; }
.sd-product-qty .sd-qty-btn:disabled{ opacity:.4; cursor:not-allowed; }

.sd-product-qty .sd-qty-input,
.sd-product-qty input[type=number]{
  width:100%;
  min-width:0;
  height:100%;
  margin:0;
  padding:0 4px;
  border:none;
  border-left:1.5px solid var(--sd-s-line);
  border-right:1.5px solid var(--sd-s-line);
  border-radius:0;
  background:#fff;
  text-align:center;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  color:var(--sd-s-ink);
  -moz-appearance:textfield;
  appearance:textfield;
}
/* The spinners double up with our own buttons and steal width */
.sd-product-qty input[type=number]::-webkit-outer-spin-button,
.sd-product-qty input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.sd-product-qty .sd-qty-input:focus{ outline:2px solid var(--sd-s-indigo); outline-offset:-2px; }

.sd-product-cart-btn,
.sd-product-card .button{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  min-height:44px;
  margin:0;
  padding:11px 10px;
  border:none;
  border-radius:0;
  background:var(--sd-s-indigo);
  color:#fff;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sd-product-cart-btn:hover{ background:var(--sd-s-indigo-dk); color:#fff; }
.sd-product-cart-btn.added,
.sd-product-cart-btn.loading{ background:var(--sd-s-green); color:var(--sd-s-indigo-dk); }
.sd-product-cart-btn.sd-cart-disabled{ background:var(--sd-s-soft); color:var(--sd-s-mut); }

/* WooCommerce drops a "View basket" link in after an ajax add. It breaks
   the card rhythm and duplicates the header basket. */
.sd-product-card .added_to_cart,
ul.products li.product .added_to_cart{ display:none !important; }

@media (max-width:600px){
  .sd-product-qty{ grid-template-columns:40px 1fr 40px; height:42px; }
  .sd-product-cart-btn,
  .sd-product-card .button{ font-size:11px; letter-spacing:.02em; padding:11px 6px; }
}

/* ═══════════════════════════════════════════════════════
   2. FREQUENTLY BOUGHT TOGETHER

   Was a horizontal slider that did not fit a phone. On
   mobile the items now stack vertically, full width, in
   normal flow. Nothing to swipe, nothing clipped.
═════════════════════════════════════════════════════════ */

@media (max-width:768px){
  .sp-bundle-content,
  .sp-bundle-form,
  .sp-bundle-items,
  .sp-bundle-list{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px;
    width:100%;
    max-width:100%;
    overflow:visible !important;
    transform:none !important;
    scroll-snap-type:none;
  }

  .sp-bundle-item{
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:64px 1fr;
    gap:12px;
    align-items:center;
    padding:12px;
  }
  .sp-bundle-item img{
    width:64px !important;
    height:64px !important;
    object-fit:contain;
    margin:0 !important;
  }

  /* The plus and equals separators only make sense in a row */
  .sp-bundle-plus,
  .sp-bundle-sep,
  .sp-bundle-eq{
    justify-self:center;
    margin:0;
    transform:none;
  }

  .sp-bundle-total,
  .sp-bundle-cta{
    width:100%;
    margin-top:12px;
  }
  .sp-bundle-cta .button,
  .sp-bundle-cta button{
    width:100%;
    min-height:48px;
  }

  /* Any leftover slider chrome */
  .sp-bundle-nav,
  .sp-bundle-arrows,
  .sp-bundle-dots{ display:none !important; }
}

/* ═══════════════════════════════════════════════════════
   3. ARCHIVE LAYOUT

   The category tiles are gone, so the products need to
   start near the top rather than after a screen of
   navigation the customer had already done.
═════════════════════════════════════════════════════════ */

.woocommerce-products-header{ padding-top:20px; }

ul.products,
.sd-products-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
ul.products::before,
ul.products::after{ content:none !important; }
ul.products li.product{
  width:auto !important;
  margin:0 !important;
  float:none !important;
  min-width:0;
}

@media (max-width:1100px){
  ul.products,
  .sd-products-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:768px){
  ul.products,
  .sd-products-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .woocommerce-products-header{ padding:16px 24px 0; }
}