/* ================================
   ALL PATCHES PAGE
================================ */

.vd-section{
  padding: 56px 0;
}

/* HERO */
.allpatches-hero{
  padding-top: 44px;
}

.allpatches-hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 26px;
  align-items: stretch;
}

.allpatches-hero__title{
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  margin: 0 0 12px;
  font-weight: 1000;
  letter-spacing: -0.02em;
}

.allpatches-hero__lead{
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.6;
}

.allpatches-hero__actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.allpatches-hero__meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.allpatches-pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: rgba(245,247,255,.86);
  font-weight: 800;
  font-size: 12px;
}

.allpatches-hero__card{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow:hidden;
}

.allpatches-hero__cardInner{
  padding: 18px;
  display:grid;
  gap: 12px;
}

.allpatches-hero__stat{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  padding: 14px;
}

.allpatches-hero__statLabel{
  display:block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.allpatches-hero__statValue{
  display:block;
  font-size: 18px;
  font-weight: 1000;
}

/* GRID HEAD */
.allpatches-grid__head{
  margin-bottom: 18px;
}

.allpatches-grid__title{
  margin:0 0 8px;
  font-size: 26px;
  font-weight: 1000;
}

.allpatches-grid__sub{
  margin:0;
  color: var(--muted);
  line-height: 1.6;
}

/* SHOPIFY MOUNT */

.allpatches-shopifyMount{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  overflow: hidden;

  /* ✅ makes it feel centered and premium */
  max-width: 1100px;
  margin: 0 auto;

  /* ✅ more breathing room so it doesn’t feel boxed */
  padding: 22px;
}

/* ✅ on mobile: reduce padding but keep it spacious */
@media (max-width: 600px){
  .allpatches-shopifyMount{
    padding: 14px;
    border-radius: 16px;
  }
}

.allpatches-loading{
  color: var(--muted);
  font-weight: 800;
  padding: 16px 4px;
}

/* TRUST */
.allpatches-trust__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.allpatches-trust__item{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  padding: 16px;
}

.allpatches-trust__item h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 1000;
}

.allpatches-trust__item p{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 900px){
  .allpatches-hero__grid{
    grid-template-columns: 1fr;
  }
  .allpatches-trust__grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ✅ SHOPIFY BUY BUTTON — FORCE 2 COLUMNS ON MOBILE
   Shopify defaults to 1 per row unless we override the list.
========================================================= */

.allpatches-shopifyMount .shopify-buy-frame,
.allpatches-shopifyMount .shopify-buy__layout-vertical,
.allpatches-shopifyMount .shopify-buy__layout-horizontal{
  background: transparent !important;
}

/* Make sure Shopify's product set can use full width inside your padded mount */
.allpatches-shopifyMount .shopify-buy__product-set{
  width: 100% !important;
  max-width: 100% !important;
}

/* MOBILE: 2 columns */
@media (max-width: 600px){

  /* 1) Force the products container to be flex + wrapping */
  .allpatches-shopifyMount .shopify-buy__collection-products,
  .allpatches-shopifyMount .shopify-buy__product-list,
  .allpatches-shopifyMount .shopify-buy__collection-products .shopify-buy__product-list{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;

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

  /* 2) Force each product card to be 50% width */
  .allpatches-shopifyMount .shopify-buy__product{
    flex: 0 0 calc(50% - 7px) !important;
    max-width: calc(50% - 7px) !important;
    width: calc(50% - 7px) !important;

    margin: 0 !important;
  }

  /* 3) Shopify sometimes adds another wrapper with inline width:100% */
  .allpatches-shopifyMount .shopify-buy__product-list > div{
    flex: 0 0 calc(50% - 7px) !important;
    max-width: calc(50% - 7px) !important;
    width: calc(50% - 7px) !important;

    margin: 0 !important;
  }

  /* 4) Image fills the card cleanly */
  .allpatches-shopifyMount .shopify-buy__product-img-wrapper{
    width: 100% !important;
  }
  .allpatches-shopifyMount .shopify-buy__product-img-wrapper img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* 5) Stop long titles breaking layout */
  .allpatches-shopifyMount .shopify-buy__product__title,
  .allpatches-shopifyMount .shopify-buy__product__price{
    white-space: normal !important;
  }

  /* Optional: slightly tighter padding on mobile so 2 columns fit nicer */
  .allpatches-shopifyMount{
    padding: 14px;
  }
}

/* VERY SMALL PHONES: keep 2 columns but reduce gap slightly */
@media (max-width: 380px){
  .allpatches-shopifyMount .shopify-buy__collection-products,
  .allpatches-shopifyMount .shopify-buy__product-list,
  .allpatches-shopifyMount .shopify-buy__collection-products .shopify-buy__product-list{
    gap: 10px !important;
  }

  .allpatches-shopifyMount .shopify-buy__product,
  .allpatches-shopifyMount .shopify-buy__product-list > div{
    flex: 0 0 calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
  }
}

/* Shopify iframe safety (prevents weird squashing) */
.allpatches-shopifyMount iframe{
  width:100%!important;
  max-width:100%!important;
}

/* Give mobile a bit more breathing room */
@media (max-width: 600px){
  .allpatches-shopifyMount{
    padding:12px;
  }
}