/* =========================================================
   BLACK HAT — SUPPLIES
   V54 PRODUCT IMAGE PRESENTATION
   Built on the locked US Products catalog styling.
   ========================================================= */


/* =========================================================
   SUPPLIES WORDMARK
   ========================================================= */

.supplies-v50-page .catalog-header{
  overflow:visible;
}

.supplies-v50-page .supplies-title{
  margin:0 auto;
  padding:0;
  line-height:0;
  text-align:center;
}

.supplies-v50-page .supplies-title-image{
  width:min(720px,68vw);
  overflow:visible;

  background:transparent !important;

  filter:none !important;
}

.supplies-v50-page .supplies-title-image img{
  display:block;

  width:100%;
  height:auto;

  margin:0 auto;

  object-fit:contain;

  background:transparent;

  filter:
    drop-shadow(
      0 7px 9px rgba(0,0,0,.58)
    );
}

.supplies-v50-page .gold-rule{
  width:105px;
  height:3px;

  margin:
    14px auto 15px;

  background:#d7a324;
}


/* =========================================================
   PRODUCT ART AREA
   ========================================================= */

.supplies-v50-page .product-art{
  position:relative;

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

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

  overflow:hidden;

  background:
    radial-gradient(
      ellipse at 50% 82%,
      rgba(218,159,26,.22),
      transparent 52%
    ),
    #050505;
}


/*
  Disable the inherited US vial placeholder.
*/

.supplies-v50-page .product-art::before,
.supplies-v50-page .product-art::after{
  display:none !important;
  content:none !important;
}


/* =========================================================
   SUPPLIES PRODUCT IMAGES
   ========================================================= */

.supplies-v50-page .product-art img{
  display:block !important;

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

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

  margin:0 !important;

  object-fit:contain !important;

  transform-origin:center center;

  filter:none !important;

  transition:
    transform .18s ease;
}


/* =========================================================
   STORAGE CASES
   The source JPGs contain substantial black padding.
   Scale the actual artwork inside the fixed card window.
   ========================================================= */

.supplies-v50-page
.product-card[data-product-slug^="3ml-x-2-"]
.product-art img{
  transform:scale(2.72);
}


.supplies-v50-page
.product-card[data-product-slug^="3ml-x-4-"]
.product-art img{
  transform:scale(2.72);
}


.supplies-v50-page
.product-card[data-product-slug^="3ml-x-10-"]
.product-art img{
  transform:scale(2.72);
}


/* =========================================================
   1ML INSULIN SYRINGE
   ========================================================= */

.supplies-v50-page
.product-card[data-product-slug="1ml-insulin-syringe"]
.product-art img{
  transform:scale(1.72);
}


/* =========================================================
   3ML BAC WATER
   Reuses the existing catalog vial artwork.
   This image already has the correct product scale.
   ========================================================= */

.supplies-v50-page
.product-card[data-product-slug="3ml-bac-water"]
.product-art img{
  transform:scale(1.02);

  width:auto !important;
  height:195px !important;

  max-width:88% !important;
}


/* =========================================================
   LUER LOCK NEEDLES
   ========================================================= */

.supplies-v50-page
.product-card[data-product-slug="luer-lock-needle-30ga"]
.product-art img{
  transform:scale(1.72);
}


/* =========================================================
   ALCOHOL PADS
   ========================================================= */

.supplies-v50-page
.product-card[data-product-slug="alcohol-pads"]
.product-art img{
  transform:scale(1.72);
}


/* =========================================================
   1ML LUER LOCK SYRINGE
   ========================================================= */

.supplies-v50-page
.product-card[data-product-slug="1ml-luer-lock-syringe-p3"]
.product-art img{
  transform:scale(1.72);
}


/* =========================================================
   HOSPIRA BAC WATER
   ========================================================= */

.supplies-v50-page
.product-card[data-product-slug="hospira-bac-water"]
.product-art img{
  transform:scale(1.62);
}


/* =========================================================
   PRODUCT INFORMATION
   ========================================================= */

.supplies-v50-page .product-info h2{
  font-size:18px;
}

.product-meta{
  min-height:17px;

  margin:
    0 0 5px;

  color:#aaa;

  font-size:10px;
  line-height:1.25;
}

.product-variant{
  margin:
    0 0 14px;

  color:#d6a12b;

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

  letter-spacing:.025em;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.catalog-pagination{
  display:flex;

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

  gap:8px;

  margin-top:28px;
}

.catalog-pagination button{
  min-width:38px;
  height:38px;

  border:
    1px solid #71531d;

  background:#080808;

  color:#ddd;

  cursor:pointer;
}

.catalog-pagination button.active{
  background:#d6a12b;

  color:#050505;

  border-color:#d6a12b;

  font-weight:900;
}

.catalog-pagination button:hover{
  border-color:#d6a12b;

  color:#d6a12b;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:800px){

  .supplies-v50-page .supplies-title-image{
    width:min(88vw,720px);
  }

  .supplies-v50-page .product-art{
    height:195px;
    min-height:195px !important;
  }

  .supplies-v50-page
  .product-card[data-product-slug="3ml-bac-water"]
  .product-art img{
    height:185px !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:520px){

  .supplies-v50-page .supplies-title-image{
    width:92vw;
  }

  .supplies-v50-page .product-art{
    height:215px;
    min-height:215px !important;
  }

}