/* Snuscorp product card. Anatomy + measurements per build/design-spec.md §3.4 / §1.6. */

.product-card{position:relative;display:block;border-radius:var(--product-card-radius);
  background:transparent;height:100%;}
.product-card.product-card-greyBg{background:var(--color-product-card-grey);}
.product-card.product-card-whiteBg{background:#fff;}

.product-card .top-label{display:flex;align-items:center;justify-content:center;
  width:100%;height:27px;padding:4px;border-radius:10px 10px 0 0;
  background:var(--color-accent);color:#fff;
  font-family:var(--font-body-family);font-size:12px;font-weight:500;line-height:1;
  text-transform:uppercase;text-align:center;}
.product-card .top-label-hidden{display:none;}

.product-card-flex{display:flex;flex-direction:column;height:100%;padding:10px;}

.product-featured-image{position:relative;margin-bottom:15px;overflow:hidden;}
@media only screen and (min-width:768px){.product-featured-image{margin-bottom:20px;}}
.product-featured-image-link{position:relative;display:block;width:100%;height:0;
  padding-bottom:100%;overflow:hidden;}
.product-featured-image-link img{position:absolute;inset:0;width:100%;height:100%;
  padding:var(--product-card-image-padding);object-fit:contain;
  transition:opacity .25s cubic-bezier(.104,.204,.492,1);}
.product-primary-image{opacity:1;z-index:2;}
.product-secondary-image{opacity:0;z-index:1;}
.thb-hover:hover .product-primary-image{opacity:0;}
.thb-hover:hover .product-secondary-image{opacity:1;}

/* SAVE circle */
.product-featured-image .badge.onsale{position:absolute;z-index:30;top:8px;right:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  width:60px;height:60px;padding:0;border-radius:50%;
  background:var(--color-badge-sale);color:var(--color-badge-text);letter-spacing:.5px;}
@media only screen and (min-width:768px){
  .product-featured-image .badge.onsale{top:16px;right:16px;}
}
.badge.onsale .save-label{margin-top:10px;font-size:10px;font-weight:400;line-height:1;
  text-transform:uppercase;}
.badge.onsale .percentage{margin:0;font-size:24px;font-weight:400;line-height:1;}

.product-featured-image .badge.out-of-stock{position:absolute;z-index:30;top:8px;right:8px;}
@media only screen and (min-width:768px){
  .product-featured-image .badge.out-of-stock{top:16px;right:16px;}
}
.product-featured-image .badge.non-returnable{position:absolute;z-index:30;bottom:8px;left:8px;}
@media only screen and (min-width:768px){
  .product-featured-image .badge.non-returnable{bottom:16px;left:16px;}
}

/* info */
.product-card-info{display:flex;flex-direction:column;flex:1 1 auto;padding:0 5%;text-align:center;}
.product-card.text-center .product-card-info{align-items:center;}
.product-card-title{display:block;margin-bottom:5px;
  font-family:var(--font-body-family);font-size:15px;font-weight:500;line-height:22.5px;
  text-transform:uppercase;color:var(--color-accent);}
.product-card .price{display:block;font-family:var(--font-body-family);font-size:15px;
  letter-spacing:.3px;line-height:1.5;color:var(--color-price);}
.product-card .price del{display:inline;font-size:15px;font-weight:400;
  text-decoration:line-through;color:var(--color-price);}
.product-card .price ins{display:inline;text-decoration:none;font-size:16px;font-weight:500;
  color:#000;}
.product-card .price .pack-size{font-size:16px;font-weight:500;}
.product-card .price .price-per-pack{font-size:16px;font-weight:500;
  color:var(--color-price-light);white-space:nowrap;}
.product-card .price .amount,.product-card .price bdi{font-size:inherit;font-weight:inherit;
  color:inherit;text-decoration:inherit;}
.product-card--add-to-cart-button{width:100%;margin-top:10px;}
@media only screen and (min-width:768px){
  .product-card--add-to-cart-button{margin-top:15px;}
}

/* grids */
.products.row{margin:0 -4px;width:calc(100% + 8px);}
@media only screen and (min-width:768px){
  .products.row{margin:0 -15px;width:calc(100% + 30px);}
}
.products.row > .columns{margin-bottom:20px;display:flex;}
.products.row > .columns > *{width:100%;}
@media only screen and (min-width:768px){
  .products.row > .columns{margin-bottom:30px;}
}
.products-empty{width:100%;padding:30px 0;text-align:center;font-size:15px;opacity:.6;}