/*
 * Cartão de produto das grades de coleção e busca (template-parts/snippets/rp-cl-card.php) e a grade card-grid.
 * Visual do tema publicado, com CSS próprio. O cartão "swipe" vem de assets/oe-collection-experience.css (do lojista).
 */

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(16px, 1.263vw); } }
@media (min-width: 1280px) { .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Cartão simples (busca) */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1;
  border-radius: clamp(10px, 1.053vw, 16px);
  background: #fafafa;
  overflow: hidden;
  color: rgb(23, 23, 23);
}
.product-card__media { position: relative; }
.product-card__media > a.media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #fafafa;
}
.product-card__media > a.media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity .4s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.product-card__media > a.media .product-card__secondary { opacity: 0; }
@media (hover: hover) and (min-width: 768px) {
  .product-card:hover .product-card__media > a.media img:not(.product-card__secondary) { opacity: 0; }
  .product-card:hover .product-card__media > a.media .product-card__secondary { opacity: 1; }
  .product-card:hover .product-card__media > a.media img:only-child { opacity: 1; transform: scale(1.03); }
}
.product-card__placeholder { position: absolute; inset: 0; background: rgba(23, 23, 23, .06); }
.badges { position: absolute; z-index: 2; top: 12px; left: 12px; display: grid; gap: 12px; pointer-events: none; }
.product-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
  width: 100%;
  /* Medidas do tema publicado: clamp(16px, 1.263vw, 24px) em cima e clamp(16px, 2.105vw, 40px) nos lados e embaixo. */
  padding: clamp(16px, 1.263vw, 24px) clamp(16px, 2.105vw, 40px) clamp(16px, 2.105vw, 40px);
  text-align: left;
}
.product-card__details { display: flex; flex-direction: column; align-items: baseline; gap: 8px; width: 100%; }
.product-card__details > p { flex-grow: 1; margin: 0; }
@media (min-width: 1024px) { .product-card__details { flex-direction: row; } }
/* Nome: text-base-xl do tema publicado (de 12px a 16px conforme a largura), espaçamento herdado da página. */
.product-card__title {
  font-size: clamp(12px, .873rem + .3175vw, 16px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: none;
}
.product-card .price { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; line-height: 1; white-space: nowrap; }
@media (min-width: 768px) { .product-card .price { gap: 6px; } }
@media (min-width: 1024px) { .product-card .price { flex-direction: column; align-items: flex-end; } }
.product-card .price__regular { font-size: 12px; line-height: inherit; }
.product-card .price small { font-size: .8em; }
.product-card .price__sale { display: none; }

/* Cartão "swipe" da coleção (assets/oe-collection-experience.css do lojista) */
.oe-ux-card { position: relative !important; overflow: hidden; background: #f8f8f8 !important; border-radius: 15px !important; box-shadow: none !important; isolation: isolate; }
.oe-ux-card .product-card__media { position: relative; }
.oe-ux-card.oe-enhanced .product-card__media > a.media { visibility: hidden !important; pointer-events: none !important; }
.oe-ux-card .oe-gallery {
  position: absolute; inset: 0; z-index: 1; overflow-x: auto; overflow-y: hidden;
  display: flex; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y; scroll-behavior: smooth;
}
.oe-ux-card .oe-gallery::-webkit-scrollbar { display: none; }
.oe-ux-card .oe-gallery__slide {
  display: flex; flex: 0 0 100%; min-width: 100%; height: 100%; scroll-snap-align: center;
  align-items: center; justify-content: center; text-decoration: none; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.oe-ux-card .oe-gallery__slide img {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
  padding: 7%; box-sizing: border-box; mix-blend-mode: multiply;
}
.oe-ux-card .product-card__content { position: relative !important; min-height: 90px; padding: 3px 13px 13px !important; gap: 2px; }
.oe-ux-card .oe-gallery__pagination { display: flex; align-items: center; justify-content: center; gap: 7px; height: 14px; margin: 1px 0 13px; }
.oe-ux-card .oe-gallery__dot {
  -webkit-appearance: none; appearance: none; padding: 0; border: 0; background: #d1d1d1;
  width: 5px; height: 5px; min-width: 5px; border-radius: 6px; cursor: pointer;
  transition: width .23s ease, background .23s ease, transform .23s ease;
}
.oe-ux-card .oe-gallery__dot[aria-current="true"] { background: #262626; width: 19px; }
.oe-ux-card .oe-gallery__dot:focus-visible { outline: 2px solid #171717; outline-offset: 4px; }
.oe-ux-card .product-card__details { align-items: flex-start !important; display: flex !important; flex-direction: column !important; gap: 6px !important; padding-bottom: 1px; }
.oe-ux-card .product-card__details > p { margin: 0 !important; width: 100%; padding-right: 1px; line-height: 1.3 !important; flex: none !important; }
.oe-ux-card .product-card__title {
  font-family: inherit !important; font-weight: 500 !important;
  font-size: clamp(11px, 3.1vw, 13px) !important; line-height: 1.28 !important;
  letter-spacing: -.022em !important; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em;
}
.oe-ux-card .product-card__details > .flex { width: 100%; padding-right: 75px; }
/* No computador (1024px+) o preço fica à direita, como no tema publicado (lg:flex-col lg:items-end). */
.oe-ux-card .product-card__details .price { font-size: 12px !important; line-height: 1.2 !important; }
.oe-ux-card .oe-quick-add {
  position: absolute; right: 12px; bottom: 12px; z-index: 5; appearance: none;
  display: flex; align-items: center; justify-content: center;
  min-width: 65px; height: 34px; padding: 0 13px; background: #171717; color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 999px;
  font-family: inherit; font-size: 10px; letter-spacing: .06em; font-weight: 600; line-height: 1;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .16);
  cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent; text-decoration: none;
}
.oe-ux-card .oe-quick-add:active { transform: scale(.95); }
.oe-ux-card .oe-quick-add[disabled], .oe-ux-card .oe-quick-add[aria-disabled="true"] { background: #888; box-shadow: none; cursor: not-allowed; }
.oe-ux-card .oe-quick-add[data-state="success"] { background: #294537; }
.oe-ux-card .oe-quick-add:focus-visible { outline: 2px solid #171717; outline-offset: 3px; }
@media (min-width: 750px) {
  .oe-ux-card .product-card__title { font-size: 13px !important; }
  /* O CSS do lojista tem right: 15px; bottom: 14px aqui, mas a regra geral vem depois e vence: fica 12px. */
  .oe-ux-card .product-card__content { padding: 4px 15px 15px !important; }
  .oe-ux-card .oe-gallery__pagination { margin-bottom: 14px; }
}
@media (max-width: 749px) {
  .oe-ux-card .product-card__content { padding: 2px 10px 11px !important; min-height: 82px; }
  .oe-ux-card .oe-gallery__pagination { margin: 0 0 11px; }
  .oe-ux-card .product-card__details .price { font-size: 11px !important; }
  .oe-ux-card .product-card__details > .flex { padding-right: 62px; }
  .oe-ux-card .oe-quick-add { right: 9px; bottom: 10px; min-width: 56px; height: 31px; font-size: 9px; padding: 0 10px; }
}

/* Aviso "adicionado" */
.oe-ux-toast {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: min(calc(100vw - 24px), 390px); width: max-content;
  background: #171717; color: #fff; z-index: 100; display: flex;
  align-items: center; gap: 12px; border-radius: 15px; padding: 13px 17px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .2); font: 500 12px/1.3 system-ui, sans-serif;
  transition: opacity .22s ease, transform .22s ease;
}
.oe-ux-toast.oe-ux-toast--shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.oe-ux-toast__message { font-size: 12px; line-height: 1.4; }
.oe-ux-toast__link { white-space: nowrap; color: #fff !important; font-size: 11px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.oe-ux-toast__close { border: 0; background: none; color: #fff; padding: 2px; cursor: pointer; font-size: 15px; }

/* Bloco de promoção no meio da grade (imagem ou vídeo) */
.product-card--promo { display: block; background: #fafafa; min-height: 100%; }
.product-card--promo .product-card__media { position: relative; width: 100%; height: 100%; min-height: 100%; aspect-ratio: auto; overflow: hidden; }
.product-card--promo img, .product-card--promo iframe, .product-card--promo .rp-cl-promo__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.product-card--promo .rp-cl-promo__video { background: #171717; }

@media (prefers-reduced-motion: reduce) {
  .oe-ux-card .oe-gallery, .oe-ux-card .oe-gallery__dot, .oe-ux-card .oe-quick-add, .oe-ux-toast { transition: none !important; scroll-behavior: auto !important; }
}