/* ============================================================
   Skinshare Product Cards

   This file styles LAYOUT, not brand. Fonts, text colour, link colour, price
   styling and the add-to-cart button all come from the active theme (Flatsome) —
   the card inherits them so it looks native to the store.

   The only colours declared here are for the elements the theme has no opinion
   about (discount badge, save amount, urgency text, stars), and each is a
   custom property that falls back to a Flatsome variable first, then a sane
   default. Override any of them in Customizer → Additional CSS:

     .ss-pc { --ss-pc-accent: #b5493d; --ss-pc-radius: 0; }

   Everything is scoped under .ss-pc, and the grid is ul.ss-pc__grid (NOT
   ul.products), so this can't leak into Flatsome's own product grids.
   ============================================================ */

.ss-pc {
  /* Structure. */
  --ss-pc-cols: 4;
  --ss-pc-cols-tablet: 3;
  --ss-pc-cols-mobile: 2;
  --ss-pc-gap: 1.25rem;
  --ss-pc-radius: 6px;
  --ss-pc-pad: 0.9rem;

  /* Surfaces — neutral, so they sit on any theme background. */
  --ss-pc-card-bg: #fff;
  --ss-pc-border: rgba(0, 0, 0, 0.09);
  --ss-pc-media-bg: rgba(0, 0, 0, 0.03);

  /* Attention colours. Flatsome exposes --fs-color-* ; we defer to them. */
  --ss-pc-accent: var(--fs-color-alert, #b5493d);   /* discount badge, save, urgency */
  --ss-pc-star: #e0a127;
  --ss-pc-muted: rgba(0, 0, 0, 0.55);
}

/* Don't inherit the theme's box model — a 100%-width button would overflow the card. */
.ss-pc,
.ss-pc *,
.ss-pc *::before,
.ss-pc *::after { box-sizing: border-box; }

.ss-pc__heading { margin: 0 0 1.25rem; }

.ss-pc__grid {
  display: grid;
  grid-template-columns: repeat(var(--ss-pc-cols), minmax(0, 1fr));
  gap: var(--ss-pc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ss-pc__grid > li { margin: 0; padding: 0; list-style: none; }

@media (max-width: 782px) {
  .ss-pc__grid { grid-template-columns: repeat(var(--ss-pc-cols-tablet), minmax(0, 1fr)); gap: 1rem; }
}
@media (max-width: 600px) {
  .ss-pc__grid { grid-template-columns: repeat(var(--ss-pc-cols-mobile), minmax(0, 1fr)); gap: 0.75rem; }
}

/* ---------- Card ---------- */
.ss-pc .ss-product-card {
  display: flex;
  flex-direction: column;
  background: var(--ss-pc-card-bg);
  border: 1px solid var(--ss-pc-border);
  border-radius: var(--ss-pc-radius);
  overflow: hidden;
  /* font + colour deliberately inherited from the theme */
}
.ss-pc .ss-product-card.is-out-of-stock { opacity: 0.72; }

.ss-pc .ss-product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--ss-pc-media-bg);
}
.ss-pc .ss-product-card__media a { display: block; height: 100%; }
.ss-pc .ss-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-pc .ss-product-card__badge { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; }

.ss-pc .ss-product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  padding: var(--ss-pc-pad);
}

/* Eyebrow / title: theme font + theme link colour, we only set scale and rhythm. */
.ss-pc .ss-product-card__cat {
  font-size: 0.7em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ss-pc-muted);
  /* One line only — never let a long name wrap the eyebrow. */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-pc .ss-product-card__title {
  margin: 0;
  font-size: 1em;
  line-height: 1.3;
}
.ss-pc .ss-product-card__title a { color: inherit; text-decoration: none; }

/* Price row — Woo/Flatsome style .price itself; we only place it and the save note. */
.ss-pc .ss-product-card__pricing {
  margin-top: auto;
  padding-top: 0.3rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.ss-pc .ss-product-card__pricing .price,
.ss-pc .ss-product-card__pricing .amount { margin: 0; }

.ss-pc .ss-product-card__save {
  font-size: 0.75em;
  font-weight: 600;
  color: var(--ss-pc-accent);
  white-space: nowrap;
}

/* Social proof / urgency row. */
.ss-pc .ss-product-card__proof {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.75em;
}
.ss-pc .ss-product-card__sold { color: var(--ss-pc-muted); }
.ss-pc .ss-product-card__stock { color: var(--ss-pc-accent); font-weight: 600; }

/* ---------- Rating ----------
   CSS-drawn stars rather than Woo's .star-rating, which depends on the "star"
   webfont and degrades to a literal "SSSSS" when a theme hasn't loaded it. */
.ss-pc .ss-rating { display: inline-flex; align-items: center; gap: 0.35em; line-height: 1; }
.ss-pc .ss-stars {
  --pct: 0%;
  position: relative;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 0.9em;
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
}
.ss-pc .ss-stars::before { content: "\2605\2605\2605\2605\2605"; color: rgba(0, 0, 0, 0.18); }
.ss-pc .ss-stars::after {
  content: "\2605\2605\2605\2605\2605";
  color: var(--ss-pc-star);
  position: absolute;
  inset: 0;
  width: var(--pct);
  overflow: hidden;
}
.ss-pc .ss-rating__value { font-size: 0.8em; font-weight: 600; }
.ss-pc .ss-rating__count { font-size: 0.8em; color: var(--ss-pc-muted); }

/* ---------- Badge ---------- */
.ss-pc .ss-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1;
  padding: 0.35em 0.6em;
  border-radius: var(--ss-pc-radius);
}
.ss-pc .ss-badge--sale { background: var(--ss-pc-accent); color: #fff; }
.ss-pc .ss-badge--neutral { background: rgba(0, 0, 0, 0.6); color: #fff; }

/* ---------- Call to action ----------
   The button keeps the theme's own .button class, so Flatsome styles it exactly
   like every other add-to-cart button on the store. We only make it full width. */
.ss-pc .ss-product-card__cta { margin-top: 0.6rem; }
.ss-pc .ss-product-card__cta a,
.ss-pc .ss-product-card__cta button { width: 100%; margin: 0; text-align: center; }
.ss-pc .ss-product-card__cta .added_to_cart {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  font-size: 0.8em;
  text-align: center;
}