/*
 * Loading skeletons for the recommendation widgets.
 *
 * Lived inline in app-embed.liquid until 2026-10-07. It carries no Liquid, and a theme
 * app extension's TOTAL Liquid is capped at 100 KB by Shopify — enforced at deploy time
 * — so 3.4 KB of static CSS was paying rent it did not owe. An asset costs nothing
 * against that cap.
 *
 * Linked BLOCKING rather than with the media="print" swap the widget stylesheets use:
 * this is the thing that holds the layout while the widgets load, and applying it after
 * first paint is the shift it exists to prevent.
 */
.__gai-skl-cont {
  gap: 5px;
  width: 100%;
}

.__gai-skl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  border-radius: 10px;
}

.__gai-skl-img {
  width: 100%;
  background-color: #f0f0f0;
  border-radius: 10px;
}

.__gai-skl-text {
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 5px;
}

.__gai-shimmer-effect {
  display: block !important;
  background: linear-gradient(
    90deg,
    rgba(200, 200, 200, 0.3) 25%,
    rgba(200, 200, 200, 0.5) 50%,
    rgba(200, 200, 200, 0.3) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

.__gai-skl-buy-btn {
  width: 100%;
  height: 40px;
  margin-left: 0;
  border-radius: 10px;
}

.__gai-btn-full-width {
  width: 100%;
  margin-left: 0;
}

.__gai-skl-header {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 12px 0 12px 0;
}

.__gai-skl-amz-small {
  display: block;
  margin-top: 10px;
}

.__gai-skl-title {
  width: 50%;
  height: 26px;
  border-radius: 10px;
}

.__gai-skl-amazon {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;
}

.__gai-skl-amazon .__gai-skl-card {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
}

.__gai-skl-amazon .__gai-skl-img {
  width: 50%;
  max-width: 100px;
}

.__gai-skl-holder {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

@media screen and (max-width: 768px) and (min-width: 481px) {
  .__gai-skl-amazon .__gai-skl-img {
    max-width: 150px;
  }
}

@media screen and (min-width: 768px) {
  .__gai-skl-buy-btn {
    width: 140px;
    height: 40px;
    margin-left: 30px;
  }
  .__gai-skl-amazon {
    flex-direction: row;
  }

  .__gai-skl-amazon .__gai-skl-img {
    width: 100%;
    max-width: 100%;
  }

  .__gai-skl-amz-small {
    display: none !important;
  }

  .__gai-skl-cont {
    gap: 20px;
  }

  .__gai-atc-skl {
    display: none !important;
  }
  .__gai-skl-header {
    justify-content: center;
    padding: 20px 0 20px 0;
  }

  .__gai-skl-title {
    height: 26px;
  }

  .__gai-skl-amazon .__gai-skl-card {
    max-width: 600px;
    flex-direction: column;
  }
}

/* Keyframes for animation */
@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.__gai-amz-details {
  display: none;
}

.__gai-skl-amz-saperator {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 768px) {
  .__gai-amz-details {
    display: flex;
    width: 100%;
    max-width: 25%;
    flex-direction: column;
    justify-items: center;
    align-items: center;
  }
  .__gai-skl-amz-mob-tit {
    display: none;
  }
}

.__gai-amz-prc {
  margin-bottom: 6px;
  height: 20px;
}