/* ============================================================
   VORTEX Collection Page — Minimal Override
   Only styles what we added (banner), leaves Horizon grid alone
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Banner (our custom element) ---------- */
.vxcol-banner {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0A0A0A;
}
.vxcol-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.6);
}
.vxcol-banner__placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
}
.vxcol-banner__content {
  position: relative;
  z-index: 2;
  padding: 36px 48px;
  width: 100%;
}
.vxcol-banner__title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(44px, 6vw, 84px) !important;
  font-weight: 900 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
  margin: 0 0 8px !important;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.vxcol-banner__desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: rgba(255,255,255,.75) !important;
  margin: 0 !important;
  max-width: 480px !important;
  line-height: 1.6 !important;
}

/* ---------- Hide dynamic checkout button on collection cards ---------- */
.product-grid .shopify-payment-button,
.product-grid .dynamic-checkout-cart,
.product-grid [data-shopify="payment-button"],
.product-grid .shopify-payment-button__button,
.product-grid form[action="/cart/add"] .shopify-payment-button,
.card-wrapper .shopify-payment-button,
.card-wrapper [data-shopify="payment-button"],
[class*="product-card"] .shopify-payment-button,
[class*="product-card"] [data-shopify="payment-button"] {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  .vxcol-banner { min-height: 200px; }
  .vxcol-banner__content { padding: 24px 20px; }
  .vxcol-banner__title { font-size: clamp(32px, 10vw, 52px) !important; }
}