/**
 * Reusable product card for lean child-theme pages — "floating object on a lit stage".
 * The product renders as a transparent cutout that floats on a cinematic dark stage:
 * a warm spotlight lifts it off the background, a soft contact shadow grounds it, and a
 * gold floor-glow warms the base. Falls back to a cover photo when no cutout ships for a
 * product (.sr-pcard-media without .is-float). Scope everything under .sr-pcard.
 */

.sr-pcard {
  --pc-gold: #9C7E48;
  --pc-gold-bright: #B69869;
  --pc-hi: #E9E2D5;
  --pc-meta: #9a8c70;
  --pc-ink: #0c0907;
  --pc-ease: cubic-bezier(.16, 1, .3, 1);

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--pc-hi);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;

  background: radial-gradient(122% 82% at 50% 0%, #1b140c 0%, var(--pc-ink) 58%);
  border: 1px solid rgba(182, 152, 105, .14);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 22px 56px -44px rgba(0, 0, 0, .92);
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    transform .7s var(--pc-ease),
    box-shadow .7s var(--pc-ease),
    border-color .55s ease;
  will-change: transform;
}

.sr-pcard:hover {
  transform: translateY(-8px) translateZ(0);
  border-color: rgba(182, 152, 105, .42);
  box-shadow:
    0 44px 88px -38px rgba(0, 0, 0, .96),
    0 28px 68px -34px rgba(140, 94, 51, .26);
}

.sr-pcard:focus-visible {
  outline: 2px solid var(--pc-gold-bright);
  outline-offset: 3px;
}

/* Stage */
.sr-pcard-media {
  position: relative;
  /* 5:4, matching the baked canvas exactly (1500 x 1200), so the file frames
     the product and CSS never crops it. Was 4/3 while the images were tight
     cutouts floating on a CSS stage; a 4:3 window clips a 5:4 plate. If the
     canvas ever changes, change this with it. */
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--pc-ink);
  display: grid;
  place-items: end center;
  backface-visibility: hidden;
}

.sr-pcard-media img { backface-visibility: hidden; }

/* Fallback (no cutout): the featured photo fills the stage */
.sr-pcard-media:not(.is-float) .sr-pcard-obj {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.3s var(--pc-ease);
}
.sr-pcard:hover .sr-pcard-media:not(.is-float) .sr-pcard-obj { transform: scale(1.05); }

/* Float stage — a quiet neutral lift (no glow), just enough to keep dark cabins
   from melting into black. The only warmth is the product's own render. */
/* ── THE PLATE STAGE ── rolled out 24 Aug 2026 ────────────────────────────
   REPLACED the old dark stage. What used to live here built a lit room in
   CSS: a radial dark gradient for the ground, a ::before whisper of top
   light, a ::after contact shadow, and a float that drew the cutout at
   74% x 80% of the window, bottom-anchored, with a drop-shadow under it.
   All of that existed because the featured images were TIGHT TRANSPARENT
   CUTOUTS with no ground of their own.

   They are not any more. Every product image is now a baked plate: the
   ground, the framing, the breathing room and the lighting are all IN THE
   FILE (scripts/image-bake/bake.py + plate.py, ground locked 24 Aug at
   #FAF7EF -> #E4D8C0). Keeping the old stage on top of these would pad an
   already-padded canvas down to ~74% and lay fake lighting over baked
   lighting. That is the lane rule: the file owns the image, CSS owns the
   card, and neither fakes the other.

   So the stage now does one thing: hand the whole window to the file.

   Approved by Artem 23 Aug ("please roll it out"); gradient locked by
   Francis 24 Aug. To go back, restore the block from git or from
   ~/sr_backups/hello-biz-child_2026-08-24_*.tgz AND repoint the featured
   images using ~/sr_backups/featured_images_before_rollout_20260824.json.

   NOT YET DONE, deliberately: the Elementor loop template #825 (shop grid,
   homepage, category shelves) is a separate card system that never loads
   this file. It now serves the same new images through its own styling.
   Francis sequenced it that way: "work on the child theme lean one first
   only and then we'll talk about the elementor one." */
.sr-pcard-media.is-float {
  background: none;
}
.sr-pcard-media.is-float::before,
.sr-pcard-media.is-float::after {
  content: none;
}
.sr-pcard-media.is-float .sr-pcard-obj {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  margin: 0;
  filter: none;
  transition: transform .8s var(--pc-ease);
}
/* The lift stays, it is card behaviour and not an image treatment. */
.sr-pcard:hover .sr-pcard-media.is-float .sr-pcard-obj { transform: translateY(-6px); }

/* Savings tag */
.sr-pcard-tag {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 2px;
  /* Solid ink since 24 Aug: this badge now sits on the light plate, where a
     translucent blur reads as mush. */
  background: #14100C;
  border: 1px solid rgba(182, 152, 105, .45);
  color: var(--pc-gold-bright);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}

/* Caption */
.sr-pcard-body {
  position: relative;
  z-index: 2;
  padding: 17px 22px 22px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.sr-pcard-eyebrow {
  margin-bottom: 9px;
  color: #9a8a68;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.sr-pcard-title {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-weight: 500;
  font-size: clamp(23px, 2.1vw, 27px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--pc-hi);
  text-wrap: balance;
}

.sr-pcard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--pc-meta);
  font-size: 12px;
  letter-spacing: .015em;
}

.sr-pcard-meta span + span::before {
  content: "·";
  margin-right: 8px;
  color: rgba(182, 152, 105, .55);
}

/* Footer: price + CTA */
.sr-pcard-foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.sr-pcard-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
}

.sr-pcard-was {
  color: #8a7c64;
  font-size: 13.5px;
  text-decoration: line-through;
  text-decoration-color: rgba(138, 124, 100, .7);
}

.sr-pcard-now {
  color: var(--pc-hi);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.sr-pcard-now .amount,
.sr-pcard-was .amount {
  white-space: nowrap;
  /* A price should read as a price: every figure on one baseline at one width.
     Cormorant ships old-style numerals by default (3/4/5/7/9 drop below the line),
     which makes "$959" wobble — lining + tabular fixes it on every card. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* The Timbers "Starting from … /unit" price decoration (qualifier, serif figure,
   gold currency mark, unit) lives in assets/css/timbers-price.css, shared with the
   Elementor shop-loop card so the two card systems can't drift apart. */

.sr-pcard-cta {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(182, 152, 105, .45);
  display: grid;
  place-items: center;
  color: var(--pc-gold-bright);
  transition: background .55s var(--pc-ease), color .55s var(--pc-ease), border-color .55s var(--pc-ease);
}

.sr-pcard-cta svg {
  width: 16px;
  height: 16px;
  transition: transform .55s var(--pc-ease);
}

.sr-pcard:hover .sr-pcard-cta {
  background: var(--pc-gold-bright);
  color: #0c0a08;
  border-color: var(--pc-gold-bright);
}

.sr-pcard:hover .sr-pcard-cta svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .sr-pcard,
  .sr-pcard-obj,
  .sr-pcard-cta,
  .sr-pcard-cta svg { transition: none; }
  .sr-pcard:hover,
  .sr-pcard:hover .sr-pcard-obj,
  .sr-pcard:hover .sr-pcard-cta svg { transform: none; }
}

/* ── Living inside an Elementor Loop Grid ── added 24 Aug 2026 ────────────
   Loop item #825 is now a single [sr_product_card] shortcode, so this card
   is what Elementor renders on the shop, the homepage, the collection pages
   and the city landing pages. Elementor wraps each result in its own item
   element and the shortcode widget adds another wrapper inside that, both of
   which are plain blocks with their own spacing. Left alone they box the
   card and knock the grid out of alignment.

   These rules do nothing on the hand-built lean pages, which wrap the card
   in .sa-loop-item instead, so both worlds stay on one stylesheet. */
.e-loop-item > .elementor-element,
.e-loop-item .elementor-widget-shortcode,
.e-loop-item .elementor-widget-shortcode .elementor-widget-container,
.e-loop-item .elementor-shortcode {
  height: 100%;
  margin: 0;
  padding: 0;
}
.e-loop-item {
  display: flex;
}
.e-loop-item > .elementor-element {
  flex: 1 1 auto;
  min-width: 0;
}
.e-loop-item .sr-pcard {
  width: 100%;
  height: 100%;
}