/*
 * FreshPen catalog/PDP polish, dedicated file (see checkout-map.css /
 * account.css / delivery-schedule.css for the same pattern) so this doesn't
 * collide with other agents editing main.css tonight. Enqueued only on the
 * shop/category archive and single product pages (see functions.php,
 * freshpen_catalog_assets()).
 *
 * Two things live here:
 *
 * 1. The three collection-page content blocks below the product grid on
 *    archive-product.php ("Two formulas. Made fresh.", "Freshly Prepared
 *    Peptide", "Curated, Not Crowded.") — ported from the Shopify reference,
 *    styled to match the site's existing centered-text-block language (see
 *    .fp2rt in main.css: 12px/.22em eyebrow, clamp() heading, --mut-2 body).
 *
 * 2. The refined hover/swap image transition: a brief fade-up (opacity +
 *    translateY) combined with a quick white-tinted flash, replacing the
 *    flat opacity-only crossfade. Applied to the catalog grid card hover
 *    (.fp-shop__card-img--alt, second WooCommerce gallery image) and to the
 *    single product page's main image swap on thumbnail click
 *    (.fppd__main-img). Timing/easing matches the site's established
 *    cubic-bezier(.16,1,.3,1) (see main.css .fp2sb/.fp2rt/.fpf__top-btn/etc).
 */

/* ============================================================
   1. Collection content blocks (below the product grid)
   ============================================================ */

.fp-shop-formulas{background:var(--bg);padding-block:8px 96px;}
.fp-shop-formulas__wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px);}

.fp-shop-formulas__block{max-width:640px;margin-inline:auto;text-align:center;padding-block:56px;}
.fp-shop-formulas__block:first-child{padding-top:0;}
.fp-shop-formulas__block + .fp-shop-formulas__block{border-top:1px solid var(--line);}

.fp-shop-formulas__eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--mut-2);margin:0 0 16px;}

.fp-shop-formulas__h{font-size:clamp(24px,3.2vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0;text-wrap:balance;}
.fp-shop-formulas__h--sm{font-size:clamp(20px,2.6vw,26px);}

.fp-shop-formulas__sub{font-size:clamp(15px,1.4vw,17px);line-height:1.7;color:var(--mut-2);margin:16px auto 0;max-width:520px;}

.fp-shop-formulas__body{font-size:clamp(15px,1.4vw,17px);line-height:1.75;color:var(--mut-2);margin:18px auto 0;max-width:560px;}
.fp-shop-formulas__body:first-child{margin-top:0;}
.fp-shop-formulas__body strong{color:var(--ink-strong);font-weight:700;}

@media (max-width:480px){
  .fp-shop-formulas{padding-block:0 64px;}
  .fp-shop-formulas__block{padding-block:36px;}
}

/* ============================================================
   2a. Catalog grid — hover crossfade refinement
   ============================================================ */

.fp-shop__card-media{position:relative;}
.fp-shop__card-media img.fp-shop__card-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.fp-shop__card-img:not(.fp-shop__card-img--alt){z-index:1;}

.fp-shop__card-img--alt{
  z-index:2;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);
}

/* Quick white-tinted flash overlay, plays once as the alt photo reveals. */
.fp-shop__card-media::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:3;
  background:#fff;
  opacity:0;
  pointer-events:none;
}

.fp-shop__card:hover .fp-shop__card-img--alt,
.fp-shop__card:focus-visible .fp-shop__card-img--alt{
  opacity:1;
  transform:translateY(0);
}
.fp-shop__card:hover .fp-shop__card-media::after,
.fp-shop__card:focus-visible .fp-shop__card-media::after{
  animation:fp-shop-flash .32s cubic-bezier(.16,1,.3,1);
}

@keyframes fp-shop-flash{
  0%{opacity:0;}
  35%{opacity:.5;}
  100%{opacity:0;}
}

@media (prefers-reduced-motion: reduce){
  .fp-shop__card-img--alt{transition:opacity .2s ease;transform:none;}
  .fp-shop__card:hover .fp-shop__card-media::after,
  .fp-shop__card:focus-visible .fp-shop__card-media::after{animation:none;}
}

/* ============================================================
   2b. Single product page — main image swap refinement
   ============================================================ */

.fppd__main-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s cubic-bezier(.16,1,.3,1);
}
.fppd__main-wrap.is-swapping::after{opacity:.5;transition-duration:.12s;}

.fppd__main-img{
  transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);
}
.fppd__main-wrap.is-swapping .fppd__main-img{
  opacity:0;
  transform:translateY(10px);
}

@media (prefers-reduced-motion: reduce){
  .fppd__main-wrap.is-swapping .fppd__main-img{transform:none;}
  .fppd__main-wrap::after{transition:none;}
}