/* ==========================================================================
   STAY FREE ENTERPRISE, /shop (The Stay Free Series)
   Native storefront for Holly's five Payhip products. Covers are self-hosted
   WebP; checkout stays on Payhip (buy-button overlay, direct-checkout link
   as the no-JS fallback). Structural variety: hero split (3D cover fan) ->
   shelf of three books -> asymmetric kit split -> inline 3-step strip +
   disclosure -> centered-prose close -> standard footer. Zero WebGL: the
   fan, tilt and drift are CSS 3D + GSAP (shop-fx.js). Consumes tokens.css
   custom properties only. Palette governance: gold = foil/material only,
   never additive glow; shadows are taupe-tinted elevation tokens.
   ========================================================================== */

/* ================================================================= HERO */
.sf-shop-hero { padding-block: var(--sf-space-8) var(--sf-space-8); overflow: hidden; }
.sf-shop-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sf-space-7);
  align-items: center;
}
.sf-shop-hero__copy { max-width: 40rem; }
.sf-shop-hero__title { margin-bottom: var(--sf-space-4); }
.sf-shop-hero__title em {
  font-style: italic;
  font-weight: 460;
  color: var(--sf-teal);
}
.sf-shop-hero__sub {
  font-size: var(--sf-text-md);
  color: var(--sf-text-secondary);
  max-width: 34rem;
  margin-bottom: var(--sf-space-5);
}
.sf-shop-hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-4); }
.sf-shop-hero__note { font-size: var(--sf-text-sm); color: var(--sf-text-secondary); flex-basis: 100%; }
.sf-shop-hero__by {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-2);
  margin-top: var(--sf-space-5);
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
}
.sf-shop-hero__by::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--sf-gold);
}

/* ---- the 3D stage: three covers fanned in perspective ----
   CSS owns the resting (fanned) composition so the hero reads correctly
   with zero JS and under reduced motion. shop-fx.js pre-paint-arms the
   stacked start state and tweens each cover to the SAME numbers below
   (keep FAN in shop-fx.js in sync with these custom properties). */
.sf-shop-stage {
  position: relative;
  /* explicit width: every child is absolutely positioned, so as a grid
     item with auto margins this box would otherwise shrink to 0 x 0 */
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 34rem;
  margin-inline: auto;
  perspective: 1400px;
  perspective-origin: 50% 42%;
}
.sf-shop-stage__group {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.sf-shop-stage__book {
  position: absolute;
  left: 28%;
  top: 10%;
  width: 44%;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: var(--sf-elevation-3);
  transform: translate3d(var(--bx, 0), var(--by, 0), var(--bz, 0)) rotate(var(--rz, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--sf-dur-slow) var(--sf-ease-out), box-shadow var(--sf-dur-base) var(--sf-ease-out);
}
.sf-shop-stage__book img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* paper-edge highlight along the fore-edge: sells the cover as an object */
.sf-shop-stage__book::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.35), inset -1px 0 0 rgba(138, 128, 116, 0.28);
  pointer-events: none;
}
/* fanned resting composition (percent of own width/height) */
.sf-shop-stage__book--keep { --bx: -46%; --by: 9%;  --bz: -70px; --ry: -12deg; --rz: -9deg; z-index: 1; }
.sf-shop-stage__book--fund { --bx: 46%;  --by: 9%;  --bz: -70px; --ry: 12deg;  --rz: 9deg;  z-index: 2; }
.sf-shop-stage__book--check { --bx: 0;   --by: 0;   --bz: 50px;  --ry: 0deg;   --rz: 0deg;  z-index: 3; }

/* armed = stacked start state, only applied pre-paint when motion can run
   (see the inline arm script on /shop); shop-fx.js un-arms as it tweens. */
.sf-shop-hero--armed .sf-shop-stage__book { transition: none; }
.sf-shop-hero--armed .sf-shop-stage__book--keep  { --bx: -2%; --by: 2%; --bz: -2px; --ry: 0deg; --rz: -1deg; }
.sf-shop-hero--armed .sf-shop-stage__book--fund  { --bx: 2%;  --by: 1%; --bz: -1px; --ry: 0deg; --rz: 1deg; }
.sf-shop-hero--armed .sf-shop-stage__book--check { --bx: 0;   --by: 0;  --bz: 0;    --ry: 0deg; --rz: 0deg; }

/* "Free" foil tag pinned to the front cover's corner */
.sf-shop-stage__tag {
  position: absolute;
  z-index: 4;
  left: 64%;
  top: 7%;
  padding: 6px 12px;
  border-radius: var(--sf-radius-sm);
  font-size: var(--sf-text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-charcoal);
  transform: rotate(6deg);
  transition: opacity var(--sf-dur-base) var(--sf-ease-out);
}
.sf-shop-hero--armed .sf-shop-stage__tag { opacity: 0; }

/* soft "table" shadow under the fan, taupe-tinted, never black */
.sf-shop-stage::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%; bottom: 6%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(138, 128, 116, 0.28), rgba(138, 128, 116, 0));
  filter: blur(6px);
  pointer-events: none;
}

@media (max-width: 900px) {
  .sf-shop-hero { padding-block: var(--sf-space-5) var(--sf-space-7); }
  .sf-shop-hero__grid { grid-template-columns: 1fr; gap: var(--sf-space-4); }
  /* 16rem keeps the headline and the free-book CTA inside an 844px first viewport */
  .sf-shop-stage { order: -1; max-width: 16rem; }
  .sf-shop-stage__book--keep { --bx: -40%; }
  .sf-shop-stage__book--fund { --bx: 40%; }
}

/* ======================================================== THE SHELF (01-03) */
.sf-shop-series { padding-block: var(--sf-space-8); }
.sf-shop-series__head { max-width: 42rem; margin-bottom: var(--sf-space-6); }
.sf-shop-series__head p { color: var(--sf-text-secondary); }
.sf-shop-series__author {
  display: block;
  margin-top: var(--sf-space-3);
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
}
.sf-shop-series__author strong { color: var(--sf-teal); font-weight: 700; margin-right: 0.3em; }

.sf-shop-shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sf-space-5);
  align-items: start;
}

.sf-shop-book {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-3);
}
.sf-shop-book__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-3);
}
/* the cover and its foil tag share one box sized to the cover, so the tag
   always sits on the book's corner (the stand is wider than the cover) */
.sf-shop-book__object {
  position: relative;
  width: min(100%, 15rem);
  margin-inline: auto;
}
.sf-shop-book__num {
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-sm);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sf-teal);
  display: flex;
  align-items: center;
  gap: var(--sf-space-2);
}
.sf-shop-book__num::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--sf-gold), transparent);
}

/* the cover stands on a gold shelf line; the shadow pools beneath it */
.sf-shop-book__stand {
  position: relative;
  padding: var(--sf-space-4) var(--sf-space-5) var(--sf-space-5);
  perspective: 900px;
}
.sf-shop-book__stand::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: var(--sf-space-3);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sf-gold) 18%, var(--sf-gold) 82%, transparent);
}
.sf-shop-book__cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--sf-elevation-2);
  transform-style: preserve-3d;
  transform: rotateY(-5deg) translateY(0);
  transition: transform var(--sf-dur-base) var(--sf-ease-out), box-shadow var(--sf-dur-base) var(--sf-ease-out);
}
.sf-shop-book__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-shop-book__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.35), inset -1px 0 0 rgba(138, 128, 116, 0.28);
  pointer-events: none;
}
.sf-shop-book:hover .sf-shop-book__cover,
.sf-shop-book:focus-within .sf-shop-book__cover {
  transform: rotateY(-9deg) translateY(-8px);
  box-shadow: var(--sf-elevation-3);
}
/* fine pointers: shop-fx.js drives --tx/--ty for a live tilt that follows the cursor.
   Listed with the hover selectors so it outranks the static hover pose above. */
.sf-shop-book:hover .sf-shop-book__cover[data-tilt],
.sf-shop-book:focus-within .sf-shop-book__cover[data-tilt],
.sf-shop-book__cover[data-tilt] { transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, -5deg)) translateY(var(--lift, 0)); }
.sf-shop-book__cover[data-tilt],
.sf-shop-toolkit__cover[data-tilt] { will-change: transform; }

.sf-shop-book__title { font-size: var(--sf-text-xl); line-height: 1.12; }
.sf-shop-book__sub {
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
  margin-top: 2px;
}
.sf-shop-book__hook {
  font-family: var(--sf-font-display);
  font-style: italic;
  font-size: var(--sf-text-md);
  line-height: 1.35;
  color: var(--sf-text-primary);
}
.sf-shop-book__body { font-size: var(--sf-text-sm); color: var(--sf-text-secondary); }
.sf-shop-book__list {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-1);
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
}
.sf-shop-book__list li { display: flex; align-items: flex-start; gap: var(--sf-space-2); }
.sf-shop-book__list li::before {
  content: "";
  width: 5px; height: 5px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--sf-gold);
  flex: 0 0 auto;
}

.sf-shop-book__buy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sf-space-3);
  margin-top: var(--sf-space-2);
  padding-top: var(--sf-space-3);
  border-top: 1px solid rgba(14, 74, 60, 0.1);
}
.sf-shop-price {
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-lg);
  color: var(--sf-teal);
  letter-spacing: -0.01em;
}
.sf-shop-price--free { font-style: italic; }
.sf-shop-book__fine {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-secondary);
  line-height: 1.5;
}

/* free-book foil tag on the shelf (same material as the hero tag) */
.sf-shop-book__tag {
  position: absolute;
  z-index: 2;
  top: -10px;
  right: -14px;
  padding: 5px 10px;
  border-radius: var(--sf-radius-sm);
  font-size: var(--sf-text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-charcoal);
  transform: rotate(4deg);
}

@media (max-width: 900px) {
  .sf-shop-shelf { grid-template-columns: 1fr; gap: var(--sf-space-6); }
  .sf-shop-book {
    display: grid;
    grid-template-columns: 11rem 1fr;
    grid-template-areas: "num num" "stand copy";
    column-gap: var(--sf-space-4);
  }
  .sf-shop-book__num { grid-area: num; }
  .sf-shop-book__stand { grid-area: stand; padding-inline: 0; align-self: start; }
  .sf-shop-book__copy { grid-area: copy; }
  .sf-shop-book__object { width: 100%; }
}
@media (max-width: 560px) {
  .sf-shop-book { grid-template-columns: 1fr; grid-template-areas: "num" "stand" "copy"; }
  .sf-shop-book__object { width: min(100%, 12rem); }
}

/* ================================================ KIT: BUNDLE + TOOLKIT */
.sf-shop-kit { padding-block: var(--sf-space-8); }
.sf-shop-kit__head { max-width: 42rem; margin-bottom: var(--sf-space-6); }
.sf-shop-kit__head p { color: var(--sf-text-secondary); }
.sf-shop-kit__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--sf-space-5);
  /* cards size to their own content (the toolkit card runs taller because
     its cover sits above the copy); stretching left the bundle with a dead
     band above its buy row */
  align-items: start;
}

.sf-shop-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-3);
  padding: var(--sf-space-6) var(--sf-space-5);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-bg-primary);
  border: 1px solid rgba(14, 74, 60, 0.1);
  box-shadow: var(--sf-elevation-2);
}
/* foil-texture gold edge (same vocabulary as the Two Paths cards) painted as a
   pseudo-element: border-image ignores border-radius and bleeds a square gold
   L down the left edge */
.sf-shop-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sf-gold), transparent 85%);
  pointer-events: none;
}
/* hover sheen sweep: foil highlight band, never additive glow */
.sf-shop-card::after {
  content: "";
  position: absolute;
  inset: -4px;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
}
.sf-shop-card:hover::after,
.sf-shop-card:focus-within::after {
  transform: translateX(130%);
  transition: transform 0.7s var(--sf-ease-out);
}
.sf-shop-card:hover,
.sf-shop-card:focus-within {
  box-shadow: var(--sf-elevation-3);
  transform: translateY(-3px);
  transition: transform var(--sf-dur-fast) var(--sf-ease-out), box-shadow var(--sf-dur-fast) var(--sf-ease-out);
}
.sf-shop-card__kicker {
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
  font-size: var(--sf-text-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-teal);
}
.sf-shop-card__badge {
  display: inline-block;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: var(--sf-radius-sm);
  font-size: var(--sf-text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-charcoal);
}
.sf-shop-card__title { font-size: var(--sf-text-2xl); line-height: 1.1; }
.sf-shop-card__sub { font-size: var(--sf-text-sm); color: var(--sf-text-secondary); }
.sf-shop-card__hook {
  font-family: var(--sf-font-display);
  font-style: italic;
  font-size: var(--sf-text-md);
  line-height: 1.35;
  color: var(--sf-text-primary);
}
.sf-shop-card__body { font-size: var(--sf-text-sm); color: var(--sf-text-secondary); }
.sf-shop-card .sf-shop-book__list { margin-block: var(--sf-space-1); }
.sf-shop-card__buy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sf-space-3) var(--sf-space-4);
  margin-top: auto;
  padding-top: var(--sf-space-4);
  border-top: 1px solid rgba(14, 74, 60, 0.1);
}
.sf-shop-card__save {
  font-size: var(--sf-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sf-teal);
}
.sf-shop-card__formats {
  display: inline-flex;
  gap: var(--sf-space-1);
}
.sf-shop-card__formats span {
  font-size: var(--sf-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-teal);
  padding: 2px 8px;
  border: 1px solid rgba(14, 74, 60, 0.22);
  border-radius: var(--sf-radius-sm);
}

/* featured bundle: sand field + a static mini-fan of the three covers */
.sf-shop-bundle {
  background: var(--sf-bg-alt);
  display: grid;
  grid-template-columns: 1fr minmax(16rem, 0.95fr);
  grid-template-areas: "copy fan" "buy buy";
  column-gap: var(--sf-space-5);
}
.sf-shop-bundle__copy { grid-area: copy; display: flex; flex-direction: column; gap: var(--sf-space-3); }
.sf-shop-bundle .sf-shop-card__buy { grid-area: buy; }
.sf-shop-bundle__fan {
  grid-area: fan;
  position: relative;
  /* sized from its own column, never from the row: all children are
     absolute, so without an explicit width the box took the row height
     and the covers rendered oversized */
  width: 100%;
  max-width: 24rem;
  height: auto;
  justify-self: center;
  align-self: center;
  aspect-ratio: 1 / 1;
  perspective: 900px;
}
.sf-shop-bundle__fan img {
  position: absolute;
  left: 28%;
  top: 12%;
  width: 44%;
  height: auto; /* the HTML height attribute maps to height:720px; auto lets aspect-ratio size it from width */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: var(--sf-elevation-2);
  transform: translate3d(var(--bx, 0), var(--by, 0), var(--bz, 0)) rotate(var(--rz, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--sf-dur-base) var(--sf-ease-out);
}
.sf-shop-bundle__fan img:nth-child(1) { --bx: -44%; --by: 8%; --bz: -40px; --ry: -10deg; --rz: -8deg; z-index: 1; }
.sf-shop-bundle__fan img:nth-child(2) { --bx: 44%;  --by: 8%; --bz: -40px; --ry: 10deg;  --rz: 8deg;  z-index: 2; }
.sf-shop-bundle__fan img:nth-child(3) { --bx: 0;    --by: 0;  --bz: 30px;  --ry: 0deg;   --rz: 0deg;  z-index: 3; }
.sf-shop-bundle:hover .sf-shop-bundle__fan img:nth-child(1) { --bx: -52%; --rz: -11deg; }
.sf-shop-bundle:hover .sf-shop-bundle__fan img:nth-child(2) { --bx: 52%;  --rz: 11deg; }
.sf-shop-bundle:hover .sf-shop-bundle__fan img:nth-child(3) { --by: -3%; }

/* toolkit: single cover beside the copy, same stand treatment as the shelf */
.sf-shop-toolkit__cover {
  position: relative;
  display: block;
  width: min(100%, 11rem);
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--sf-elevation-2);
  transform: rotateY(-6deg);
  transition: transform var(--sf-dur-base) var(--sf-ease-out), box-shadow var(--sf-dur-base) var(--sf-ease-out);
}
.sf-shop-toolkit__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-shop-toolkit__cover[data-tilt] { transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, -6deg)) translateY(var(--lift, 0)); }
.sf-shop-toolkit:hover .sf-shop-toolkit__cover { box-shadow: var(--sf-elevation-3); }

@media (max-width: 960px) {
  .sf-shop-kit__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sf-shop-bundle { grid-template-columns: 1fr; grid-template-areas: "fan" "copy" "buy"; }
  .sf-shop-bundle__fan { max-width: 16rem; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-shop-card::after { display: none; }
  .sf-shop-card:hover, .sf-shop-card:focus-within { transform: none; }
}

/* ========================================================= HOW IT WORKS */
.sf-shop-how { padding-block: var(--sf-space-8); }
.sf-shop-how__head { max-width: 40rem; margin-inline: auto; text-align: center; margin-bottom: var(--sf-space-6); }
.sf-shop-how__head p { color: var(--sf-text-secondary); margin-inline: auto; }
.sf-shop-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sf-space-4);
  margin-bottom: var(--sf-space-6);
}
/* chrome-less on purpose: the kit section above is already a row of chromed
   cards, so the steps read as a timeline on the sand field, not a third card row */
.sf-shop-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-2);
  padding: 0 var(--sf-space-3) 0 0;
}
.sf-shop-step__pin { width: 30px; height: 30px; display: block; }
.sf-shop-step__n {
  font-size: var(--sf-text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-teal);
}
.sf-shop-step__title { font-size: var(--sf-text-lg); }
.sf-shop-step__body { font-size: var(--sf-text-sm); color: var(--sf-text-secondary); }
/* dashed connector between steps, same travel motif as the Ladder */
.sf-shop-step + .sf-shop-step::before {
  content: "";
  position: absolute;
  top: 15px; left: calc(-1 * var(--sf-space-4));
  width: var(--sf-space-4);
  border-top: 1.5px dashed color-mix(in srgb, var(--sf-gold) 55%, transparent);
}
@media (max-width: 820px) {
  .sf-shop-steps { grid-template-columns: 1fr; }
  .sf-shop-step + .sf-shop-step::before { display: none; }
}

/* compliance block: same left-rule skeleton as the risk-reversal line on Home */
.sf-shop-disclosure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sf-space-4);
  padding: var(--sf-space-5);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-bg-primary);
  border-left: 3px solid var(--sf-teal);
  box-shadow: var(--sf-elevation-1);
}
.sf-shop-disclosure p { flex: 1 1 28rem; font-size: var(--sf-text-sm); color: var(--sf-text-primary); max-width: none; }
.sf-shop-disclosure strong { color: var(--sf-teal); }
.sf-shop-disclosure a { text-decoration: underline; text-underline-offset: 2px; }

/* deep links (/shop#check-it from Home, #series from the hero) land clear of the sticky nav */
.sf-shop-series, .sf-shop-kit, .sf-shop-how, .sf-shop-close, .sf-shop-book, .sf-shop-card { scroll-margin-top: calc(92px + var(--sf-space-4)); }

/* ================================================================ CLOSE */
.sf-shop-close { padding-block: var(--sf-space-8); }
.sf-shop-close__cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sf-space-2);
  margin-top: var(--sf-space-5);
}
.sf-shop-close__note { font-size: var(--sf-text-sm); color: var(--sf-text-secondary); }

/* ===================================================== REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .sf-shop-stage__book, .sf-shop-book__cover, .sf-shop-toolkit__cover, .sf-shop-bundle__fan img { transition: none; }
  .sf-shop-book:hover .sf-shop-book__cover, .sf-shop-book:focus-within .sf-shop-book__cover { transform: rotateY(-5deg); }
}