/* ==========================================================
   ScaleZenn WooCommerce Product Showcase  —  scalezenn
   ========================================================== */

/* ── CSS variable defaults ─────────────────────────────── */
.scalezenn-fps-wrap {
  --szn-left-w:   30%;
  --szn-right-w:  70%;
  --szn-col-gap:  0px;
}

/* ── Universal box-sizing reset ───────────────────────────── */
.scalezenn-fps-wrap,
.scalezenn-fps-wrap * {
  box-sizing:  border-box;
  margin:      0;
  padding:     0;
}

/* ══════════════════════════════════════════════════════════
   OUTER WRAPPER
══════════════════════════════════════════════════════════ */
.scalezenn-fps-wrap {
  display:     flex;
  flex-wrap:   nowrap;
  align-items: stretch;
  gap:         var(--szn-col-gap);
  width:       100%;
  font-family: inherit;
  line-height: normal;
}

/* ══════════════════════════════════════════════════════════
   LEFT COLUMN
══════════════════════════════════════════════════════════ */
.scalezenn-fps-left {
  flex:       0 0 var(--szn-left-w);
  width:      var(--szn-left-w);
  max-width:  var(--szn-left-w);
  min-height: 200px;
  position:   relative;
  overflow:   hidden;
  background: #f0f0f0;
}

.scalezenn-fps-left__img-link {
  display:  block;
  position: absolute;
  inset:    0;
  overflow: hidden;
}

.scalezenn-fps-left__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.35s ease;
}

.scalezenn-fps-left__img-link:hover .scalezenn-fps-left__img {
  transform: scale(1.04);
}

.scalezenn-fps-left__title-wrap {
  position:        absolute;
  bottom:          0;
  left:            0;
  right:           0;
  z-index:         20;
  display:         block;
  text-decoration: none;
}

.scalezenn-fps-left__title-bar {
  width:      100%;
  padding:    14px 12px;
  background: rgba(0, 0, 0, 0.55);
  text-align: center;
}

.scalezenn-fps-left__title {
  display:        block;
  color:          #fff;
  font-size:      1rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow:    0 1px 4px rgba(0,0,0,0.6);
}

/* ══════════════════════════════════════════════════════════
   RIGHT COLUMN
══════════════════════════════════════════════════════════ */
.scalezenn-fps-right {
  flex:      1 1 0%;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT GRID
══════════════════════════════════════════════════════════ */
.scalezenn-fps-grid {
  display:       grid;
  gap:           6px;
  /* Extra row gap to give space for the floating price pill */
  row-gap:       20px;
  height:        100%;
  align-content: start;
}

.scalezenn-fps-grid--2col { grid-template-columns: repeat(2, 1fr); }
.scalezenn-fps-grid--3col { grid-template-columns: repeat(3, 1fr); }
.scalezenn-fps-grid--4col { grid-template-columns: repeat(4, 1fr); }

/* ══════════════════════════════════════════════════════════
   PRODUCT CARD
   overflow: visible  — lets the price pill float below.
   position: relative — price pill positions against this.
   padding-bottom     — reserves space so the pill doesn't
                        overlap the next row's image.
══════════════════════════════════════════════════════════ */
.scalezenn-fps-product {
  background:     #fff;
  overflow:       visible;      /* ✅ visible so pill can float out */
  position:       relative;
  transition:     box-shadow 0.25s ease;
  /* padding-bottom: 14px;          space for the pill below the image */
}

.scalezenn-fps-product:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.13);
}

/* ── Product image wrapper ─────────────────────────────── */
.scalezenn-fps-product__img-wrap {
  display:         block;
  position:        relative;
  overflow:        hidden;      /* ✅ hidden here clips the zoom effect */
  text-decoration: none;
  aspect-ratio:    1 / 1;
  background:      #f0f0f0;
}

.scalezenn-fps-product__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.35s ease;
}

.scalezenn-fps-product__img-wrap:hover .scalezenn-fps-product__img {
  transform: scale(1.05);
}

.scalezenn-fps-product__no-img {
  width:  100%;
  height: 100%;
  background: linear-gradient(135deg, #e8e8e8, #d5d5d5);
}

/* ── Sale badge ────────────────────────────────────────── */
.scalezenn-fps-badge {
  position:       absolute;
  top:            7px;
  left:           7px;
  background:     #e74c3c;
  color:          #fff;
  font-size:      0.62rem;
  font-weight:    700;
  padding:        3px 6px;
  border-radius:  3px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index:        5;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   PRICE BAR  — floating pill below the product image
   .scalezenn-fps-price-bar-main is positioned absolute
   relative to .scalezenn-fps-product (overflow:visible).
   It will NOT cause a ResizeObserver loop because the
   product card's measured size includes padding-bottom,
   and the pill sits within that padded zone.
══════════════════════════════════════════════════════════ */
.scalezenn-fps-price-bar-main {
  position:   absolute;
  bottom:     -8px;
  left:       0;
  width:      100%;
  text-align: center;
  z-index:    10;
}

.scalezenn-fps-price-bar {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             4px;

  padding:         5px 10px;
  border-radius:   5px;
  background:      rgba(255, 255, 255, 0.96);
  /*box-shadow:      0 2px 8px rgba(0,0,0,0.12);*/
}

/* ── Price text ─────────────────────────────────────────── */
.scalezenn-fps-price {
  display:     inline-block;
  line-height: 1;
  white-space: nowrap;
  font-family: inherit;
}

.scalezenn-fps-price--current {
  font-size:   12px;
  font-weight: 700;
  color:       #1a1a1a;
}

.scalezenn-fps-price--regular {
  font-size:       12px;
  font-weight:     400;
  color:           #999;
  text-decoration: line-through;
}

/* ══════════════════════════════════════════════════════════
   OUT-OF-STOCK OVERLAY
══════════════════════════════════════════════════════════ */
.scalezenn-fps-oos-overlay {
  position:       absolute;
  inset:          0;
  z-index:        6;
  display:        flex;
  align-items:    center;
  justify-content:center;
  background:     rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.scalezenn-fps-oos-label {
  display:        inline-block;
  background:     rgba(30, 30, 30, 0.88);
  color:          #fff;
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding:        6px 12px;
  border-radius:  4px;
  text-align:     center;
  white-space:    nowrap;
  box-shadow:     0 2px 8px rgba(0,0,0,0.35);
}

.scalezenn-fps-product--oos .scalezenn-fps-product__img {
  filter: brightness(0.78) grayscale(0.2);
}

/* ══════════════════════════════════════════════════════════
   VIEW MORE TILE
══════════════════════════════════════════════════════════ */
.scalezenn-fps-view-more {
  position:       relative;
  overflow:       hidden;
  padding-bottom: 0;  /* no price pill on view-more tile */
}

.scalezenn-fps-view-more__link {
  display:         block;
  position:        relative;
  aspect-ratio:    1 / 1;
  overflow:        hidden;
  text-decoration: none;
}

.scalezenn-fps-view-more__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  filter:     brightness(0.68);
  transition: transform 0.35s ease, filter 0.25s ease;
}

.scalezenn-fps-view-more__link:hover .scalezenn-fps-view-more__img {
  transform: scale(1.06);
  filter:    brightness(0.5);
}

.scalezenn-fps-view-more__overlay {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(10,10,10,0.42);
  transition:      background 0.25s;
}

.scalezenn-fps-view-more__link:hover .scalezenn-fps-view-more__overlay {
  background: rgba(10,10,10,0.58);
}

.scalezenn-fps-view-more__text {
  color:          #fff;
  font-size:      1rem;
  font-weight:    800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align:     center;
  padding:        10px 8px;
  text-shadow:    0 2px 8px rgba(0,0,0,0.7);
  line-height:    1.3;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

@media (min-width: 641px) and (max-width: 1024px) {
  .scalezenn-fps-grid--4col {
    grid-template-columns: repeat(3, 1fr);
  }
  .scalezenn-fps-wrap {
    --szn-left-w:  28%;
    --szn-right-w: 72%;
  }
}

@media (max-width: 640px) {
  .scalezenn-fps-wrap {
    flex-direction: column;
    /*gap: 0 !important;*/
  }
  .scalezenn-fps-left {
    flex:       none !important;
    width:      100% !important;
    max-width:  100% !important;
    height:     220px;
    min-height: 180px;
  }
  .scalezenn-fps-right {
    width: 100%;
  }
  .scalezenn-fps-grid--2col,
  .scalezenn-fps-grid--3col,
  .scalezenn-fps-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 360px) {
  .scalezenn-fps-left {
    height: 180px;
  }
}