/* ============================================================
   SKS Product Card — shared styles for the sks-product-card snippet
   Loaded from anywhere the snippet is rendered (bestsellers,
   collection grid, related products, search results, etc.)
   ============================================================ */

.sks-prod-card {
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  border: 1px solid #C8C2BC;
}

.sks-prod-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  border-color: #B8520A;
}

/* Image wrapper — 2/3 aspect ratio (taller than the previous 3/4) so
   full-body product photos (kilts, dresses, models standing head-to-toe)
   fit inside the frame without `object-fit: cover` cropping the head
   and feet. 2/3 matches the natural aspect of most of the catalogue's
   full-body shots, so the card stays filled (no letterboxing) while the
   model is visible from head to feet. */
.sks-prod-card__img-wrap {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #F5F0E8;
}

/* Square-shape override — added by a parent .sks-square-cards class on
   the grid wrapper (sks-collection-grid + sks-bestsellers expose a
   "Card image shape: Square" setting that flips this on). For products
   shot square (brooches, sporrans, pins, flat-lays) the 1/1 frame fills
   edge-to-edge without the portrait whitespace the 2/3 frame would
   create. Square cards are scoped under the parent class instead of a
   modifier on .sks-prod-card so the snippet itself stays template-
   agnostic. */
.sks-square-cards .sks-prod-card__img-wrap {
  aspect-ratio: 1 / 1;
}

.sks-prod-card__img-wrap img,
.sks-prod-card__img-wrap svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease, transform 0.6s ease;
  position: absolute;
  inset: 0;
  display: block;
}

/* Front image — locked to always-visible. Even if another rule (existing
   or future) tries to fade it on hover, this wins. Single-image cards
   (no back image rendered) stay visible on hover. */
.sks-prod-card__img-front {
  opacity: 1 !important;
}

.sks-prod-card__img-back {
  opacity: 0;
}

/* On hover, fade the back image in to cover the front. Both images are
   position:absolute inset:0 object-fit:cover (see .sks-prod-card__img-wrap
   img rule above), so the back at opacity:1 physically overlays the front
   — no need to also fade the front out. */
.sks-prod-card:hover .sks-prod-card__img-back {
  opacity: 1;
}

/* On hover, both images scale up slightly for a subtle zoom-in lift.
   `overflow: hidden` on .sks-prod-card__img-wrap clips the overflow so the
   scaled image doesn't burst out of the card. The transition (0.6s ease on
   transform) is already set by the wrap-img rule above. Single-image cards
   only have the front to scale; two-image cards scale both (the visible
   back during hover, and the front which sits underneath unchanged). */
.sks-prod-card:hover .sks-prod-card__img-front,
.sks-prod-card:hover .sks-prod-card__img-back {
  transform: scale(1.05);
}

/* Badges */
.sks-prod-card__badge {
  position: absolute;
  top: 14px;
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 3;
  line-height: 1.2;
  font-family: 'Jost', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sks-prod-card__badge--custom {
  left: 14px;
  background: #1A5C2A;
  color: #fff;
}

.sks-prod-card__badge--sale {
  right: 14px;
  background: #8B1F1F;
  color: #fff;
}

/* Desktop shows "Save X%"; mobile switches to compact "-X%" so the
   badge stays legible on small cards. Toggled at the same 749px
   breakpoint used elsewhere for the mobile grid. */
.sks-prod-card__badge-mob { display: none; }
@media (max-width: 749px) {
  .sks-prod-card__badge-desk { display: none; }
  .sks-prod-card__badge-mob { display: inline; }
}

.sks-prod-card__badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Quick view slide-up */
.sks-prod-card__qv {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(30, 45, 59, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  text-align: center;
  padding: 13px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  transform: translateY(100%);
  transition: transform 0.4s ease;
  z-index: 4;
  font-family: 'Jost', sans-serif;
}

.sks-prod-card:hover .sks-prod-card__qv {
  transform: translateY(0);
}

/* Info block */
.sks-prod-card__info {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
}

.sks-prod-card__type {
  font-size: 11px;
  color: #9A9088;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 500;
  font-family: 'Jost', sans-serif;
}

.sks-prod-card__name {
  font-family: 'Playfair Display', serif;
  font-size: 14.5px;
  color: #1A1A1A;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 6px;
}

.sks-prod-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.1;
  margin-bottom: 6px;
}

.sks-prod-card__price-now {
  font-size: 15px;
  color: #B8520A;
  font-weight: 600;
  font-family: 'Jost', sans-serif;
}

.sks-prod-card__price-was {
  font-size: 11.5px;
  color: #9A9088;
  text-decoration: line-through;
  font-family: 'Jost', sans-serif;
}

/* "From" prefix shown on outfit-builder products (real price is 0, starting
   price comes from custom.card_price). Reads as a quiet label, not a price. */
.sks-prod-card__price-from {
  font-size: 11.5px;
  color: #9A9088;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-family: 'Jost', sans-serif;
  margin-right: -3px;
}

.sks-prod-card__reviews {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #9A9088;
  font-family: 'Jost', sans-serif;
}

/* Rating now sits between the title and the price — small gap below it. */
.sks-prod-card .sks-prod-card__reviews {
  margin: 0 0 8px;
}

.sks-prod-card__stars {
  display: inline-flex;
  gap: 1.5px;
  color: #B8520A;
  font-size: 13px;
  line-height: 1;
}

.sks-prod-card__stars .star-empty {
  color: rgba(184, 82, 10, 0.28);
}

.sks-prod-card__rev-count {
  color: #9A9088;
}

/* Mobile compactness */
@media screen and (max-width: 749px) {
  .sks-prod-card__info {
    padding: 12px 14px 14px;
  }

  .sks-prod-card__name {
    font-size: 13.5px;
  }

  .sks-prod-card__price-now {
    font-size: 14px;
  }

  /* Quick view doesn't work on touch — hide */
  .sks-prod-card__qv {
    display: none;
  }
}

/* ── Wishlist heart on card ─────────────────────────────────────────
   Sits at top-LEFT corner of the image so it doesn't collide with the
   sale badge (which lives top-right). On desktop it's hidden by
   default (opacity 0) — revealed when the card is hovered. On mobile
   / touch (≤749px), always visible because there's no hover cue. */
.sks-prod-card__wl {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: #4A4440;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(74, 68, 64, .16);
  box-shadow: 0 2px 6px rgba(26, 26, 26, .08);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.sks-prod-card__wl svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke-width: 2.2;
}

/* Desktop: reveal on card hover or when heart itself is focused */
.sks-prod-card:hover .sks-prod-card__wl,
.sks-prod-card__wl:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
.sks-prod-card__wl:hover {
  background: #FFFFFF;
  color: #B8520A;
  border-color: rgba(184, 82, 10, .4);
}
.sks-prod-card__wl:focus-visible {
  outline: 2px solid #B8520A;
  outline-offset: 2px;
}

/* Saved state — filled amber heart */
.sks-prod-card__wl.is-saved {
  opacity: 1;
  transform: translateY(0);
  background: #FFFFFF;
  color: #B8520A;
  border-color: rgba(184, 82, 10, .5);
}
.sks-prod-card__wl.is-saved svg { fill: #B8520A; stroke: #B8520A; }

/* Micro-animation on save toggle */
@keyframes sksWlPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.sks-prod-card__wl.is-saved svg { animation: sksWlPop .35s ease; }

/* Mobile / touch: always visible so there's a tap target */
@media screen and (max-width: 749px), (hover: none) {
  .sks-prod-card__wl {
    opacity: 1;
    transform: none;
    width: 34px;
    height: 34px;
    top: 10px;
    left: 10px;
  }
  .sks-prod-card__wl svg { width: 18px; height: 18px; }
}


.sks-prod-card__img-wrap svg
 {
    top: 7px;
    left: 7px;
}