.pickup-store-section {
  width: 100%;
  float: left;
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}
/* Flipping Ribbon */
.ribbon-container {
  height: 22px;
  perspective: 1000px;
}
.ribbon-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-in-out;
}
.ribbon-container.top-seller-main-div {
  width: calc(100% + 23px);
}
.ribbon-container.flipped .ribbon-flipper {
  transform: rotateY(180deg);
}
.ribbon-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
}
.ribbon-front {
  transform: rotateX(0deg);
}
.ribbon-back {
  transform: rotateY(180deg);
}
.ribbon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.ribbon-text {
  position: relative;
  z-index: 2;
  font-family: "Open Sans";
  font-weight: 600;
  text-align: center;
  color: #fff;
  font-size: 12px;
  user-select: none;
}
.ribbon-shape {
  position: relative;
  background: #c40000;
  height: 20px;
  padding: 0 18px 0 12px;
  display: inline-flex;
  align-items: center;
  color: #fff;
  justify-content: center;
}
.ribbon-shape::after {
  content: "";
  position: absolute;
  top: 10px;
  right: -1px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #fff;
  transform: translateY(-50%) rotate(178deg);
}
/* Ribbon large text custom css */
.second_content_product.second_content .top-seller-main-div .top-seller-div {
  padding: 0 3px;
  font-size: 12px;
}
.second_content_product.second_content .top-seller-main-div .top-seller-div span {
  padding-left: 2px;
}
/* Yellow Dot on PLP and PDP pages */
/* Yellow dot on product details, product listing and home page sections CSS Start
   Store-specific (APP_ID 12838), and only for products the API marks with IsYellowDotItem -
   ProductGetDetail on the product page, ProductGetList on the listings. is_yellow_dot_item() in
   includes/user_functions.php checks both and decides whether .yd-img-anchor is added, so these
   rules match nothing on any other store. Product page: a wrapper around the main <img>
   (single-image and multi-image layouts alike), because the boxes around it are wider than the
   image or also hold the disclaimer text. Product cards - listings (product-listing,
   product-listing-carrotads, collection-products) and the home page sections (featured carousel in
   index.php; the list sections, staff picks and top liquor / wine / beer picks in load.php; For You
   in for-you-section.php): the card's own .product-image-sub, the white box around just the image.

   Bottom right corner of the image, a little inside the edge. Product shots are centred on white,
   so the corner is empty space and clear of the favourite heart and the SALE badge. A white ring
   and a shadow lift it off white product shots - flat yellow on white has almost no contrast.
   pointer-events:none so it never takes a click or a zoom hover meant for the image. */
.yd-img-anchor {
  position: relative;
}
.yd-img-anchor::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffd60a;
  box-shadow: 0 0 0 4px #fff, 0 3px 8px rgba(0, 0, 0, 0.38);
  pointer-events: none;
  z-index: 3;
}
/* The mobile image and the multi-image zoom image are narrower than their centred boxes, so the
   wrapper shrinks to the image or the dot would sit out at the box edge instead of on its corner. */
.product_img_mobile .yd-img-anchor, .main-img-bg2 .yd-img-anchor {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
}
/* The video button hides the zoom image (d-none) and plays the video in its place - no dot then. */
.yd-img-anchor:has(> .d-none)::after {
  display: none;
}
@media (max-width: 767.5px) {
  .yd-img-anchor::after {
    right: 8px;
    bottom: 8px;
    width: 22px;
    height: 22px;
    box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0, 0, 0, 0.38);
  }
}
/* A card's image box is roughly half the product page image, so the dot is smaller. */
.product-image-sub.yd-img-anchor::after {
  right: 10px;
  bottom: 10px;
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0, 0, 0, 0.38);
}
/* Yellow dot on product details, product listing and home page sections CSS End */
/*# sourceMappingURL=custom.map */