/* ════════════════════════════════════════════════════════════════════
   Personalized rail — for-you refresh.

   Mounts on /store and /bakery. All styles are scoped to .pr-rail.
   Visual tokens reuse store.css's --navy / --accent / --gold / --rose
   etc. Defensive hex fallbacks throughout for embedded contexts.
   ════════════════════════════════════════════════════════════════════ */

@property --pr-ang { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@property --pr-ang2 { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@property --pr-ang3 { syntax:'<angle>'; initial-value:0deg; inherits:false; }

.pr-rail{
  display:none;                  /* hidden until JS resolves customer derived */
  /* asymmetric margin — generous above (separates from the action row),
     tight below so collections sit close beneath without a padding stack */
  margin:28px auto 4px;
  max-width:1180px;
  padding:0 24px;
  /* Local fallbacks so the rail still renders if a host page forgets
     the design-system tokens. */
  --pr-navy:#1B1A6B;
  --pr-accent:#2D2FA8;
  --pr-gold:#C8A96E;
  --pr-gold-dk:#8B6914;
  --pr-gold-soft:#F0DDB3;
  --pr-rose:#E879A6;
  --pr-rose-dk:#BE5C82;
  --pr-ink-2:#3D3E5C;
  --pr-muted:#6B6B7B;
  --pr-border:#EDE8DC;
  --pr-cream:#FAF8F3;
  --pr-ease:cubic-bezier(.22,.8,.36,1);
  --pr-spring:cubic-bezier(.34,1.56,.64,1);
}
.pr-rail.is-ready{display:block;}

/* Rail head */
.pr-rail-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;margin:24px 0 14px;
}
.pr-rail-head h2{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(20px,2.4vw,24px);font-weight:900;
  color:var(--navy,var(--pr-navy));letter-spacing:-.028em;line-height:1.05;
  margin:0;text-transform:lowercase;
}
.pr-rail-head h2 em{
  font-family:inherit;font-style:normal;font-weight:900;
  color:var(--accent,#2D2FA8);
}
.pr-rail[data-theme="bakery"] .pr-rail-head h2 em{color:#7E5320;}
.pr-rail-head .fy-eyebrow{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent,#2D2FA8);margin-bottom:5px;
}
.pr-rail-head .pr-sub{font-size:12.5px;color:var(--muted,var(--pr-muted));font-weight:500;margin-top:2px;}
.pr-rail-head a.pr-history{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px;font-weight:700;color:var(--navy,var(--pr-navy));
  letter-spacing:-.005em;white-space:nowrap;text-decoration:none;
  padding:8px 12px;border-radius:10px;
  transition:background .15s ease;
}
.pr-rail-head a.pr-history:hover{background:rgba(27,26,107,.06);}

/* Grid (returning state — 3 cards desktop, scroll-snap mobile) */
.pr-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:14px;
}
@media (max-width:780px){
  .pr-grid{grid-template-columns:1fr;}
}

/* ─── Base card ─── */
.pr-card.fy-card{
  background:#fff;
  border:1px solid var(--border,var(--pr-border));
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 2px 14px rgba(27,26,107,.04);
  transition:transform .22s var(--pr-ease), box-shadow .22s var(--pr-ease);
  position:relative;display:flex;flex-direction:column;
  min-width:0;
}
.pr-card.fy-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px -10px rgba(27,26,107,.18);
}

/* ─── Horizontal row layout for the slim signed-in cards ───
   At ~150px tall each card has plenty of horizontal width but no
   vertical room. Lay out as: [art column] [text body] [price+CTA].
   Mobile (≤520px) reverts to the default vertical stack. */
/* ────────────────────────────────────────────────────────
   Two-column grid layout for the slim signed-in cards.
   Left column: full-height visual. Right column: body on top,
   foot (price + CTA) on the bottom — original "info bar" layout.
   Mobile (≤520px) reverts to the default vertical stack.
   ──────────────────────────────────────────────────────── */
@media (min-width:521px){
  .pr-card.fy-card.reorder,
  .pr-card.fy-card.fav-empty,
  .pr-card.fy-card.rec{
    display:grid;
    grid-template-columns:152px 1fr;
    grid-template-rows:1fr auto;
    flex-direction:initial;align-items:initial;
  }
  /* Reorder is the lead card on the rail (1.2fr in pr-grid) — give the
     polaroid stack more room since its 3 floating thumbs are the visual
     hook of the whole rail. */
  .pr-card.fy-card.reorder{grid-template-columns:200px 1fr;}
  /* ART (col 1, spanning both rows) */
  .pr-card.fy-card.reorder > .fy-stack,
  .pr-card.fy-card.fav-empty .fav-empty-art,
  .pr-card.fy-card.rec > .fy-art{
    grid-column:1;grid-row:1 / 3;
    width:auto;align-self:stretch;
    padding:0;aspect-ratio:auto;border-bottom:0;
  }
  .pr-card.fy-card.reorder > .fy-stack{
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#FFF7E5 0%,#F0DDB3 100%);
    border-right:1px solid rgba(139,105,20,.16);
  }
  .pr-card.fy-card.fav-empty .fav-empty-art{
    display:grid;place-items:center;
    background:linear-gradient(135deg,#FFE4ED 0%,#FFC4DC 60%,#FFA5C8 100%);
    border-right:1px solid rgba(232,121,166,.2);
  }
  /* BODY (col 2, row 1) */
  .pr-card.fy-card.reorder > .fy-body,
  .pr-card.fy-card.fav-empty > .fy-body,
  .pr-card.fy-card.rec > .fy-body{
    grid-column:2;grid-row:1;min-width:0;
    padding:10px 14px 6px;gap:2px;
    align-items:flex-start;text-align:left;justify-content:center;
  }
  .pr-card.fy-card.reorder > .fy-body .fy-eye,
  .pr-card.fy-card.fav-empty > .fy-body .fy-eye,
  .pr-card.fy-card.rec > .fy-body .fy-eye{
    justify-content:flex-start;margin-bottom:1px;font-size:9.5px;letter-spacing:.13em;
  }
  .pr-card.fy-card.reorder > .fy-body .fy-title,
  .pr-card.fy-card.fav-empty > .fy-body .fy-title,
  .pr-card.fy-card.rec > .fy-body .fy-title{
    font-size:16px;line-height:1.12;
    overflow:hidden;text-overflow:ellipsis;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  }
  .pr-card.fy-card.reorder > .fy-body .reorder-names,
  .pr-card.fy-card.fav-empty > .fy-body .fy-meta,
  .pr-card.fy-card.rec > .fy-body .fy-meta{
    font-size:11.5px;line-height:1.35;color:var(--muted,var(--pr-muted));
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  }
  /* FOOT (col 2, row 2) — price + CTA on a single row, accent top border */
  .pr-card.fy-card.reorder > .fy-foot,
  .pr-card.fy-card.fav-empty > .fy-foot,
  .pr-card.fy-card.rec > .fy-foot{
    grid-column:2;grid-row:2;
    flex-direction:row;justify-content:space-between;align-items:center;
    gap:8px;padding:8px 14px;
    border-top:1px solid rgba(0,0,0,.06);border-left:0;
  }
  .pr-card.fy-card.reorder > .fy-foot{border-top-color:rgba(139,105,20,.16);}
  .pr-card.fy-card.fav-empty > .fy-foot{border-top-color:rgba(232,121,166,.2);}
  .pr-card.fy-card.reorder > .fy-foot .fy-cta,
  .pr-card.fy-card.fav-empty > .fy-foot .fy-cta,
  .pr-card.fy-card.rec > .fy-foot .fy-cta{
    height:28px;padding:0 12px;font-size:12px;white-space:nowrap;
  }
  .pr-card.fy-card.reorder > .fy-foot .fy-price,
  .pr-card.fy-card.rec > .fy-foot .fy-price{font-size:14px;}
  /* "no favorites yet" is redundant with the EMPTY eyebrow — hide it */
  .pr-card.fy-card.fav-empty > .fy-foot .fy-foot-muted{display:none;}
  /* When fav-empty foot-muted is hidden, push the CTA to the right */
  .pr-card.fy-card.fav-empty > .fy-foot{justify-content:flex-end;}
  /* rec art-pill nudged into the corner of the photo column */
  .pr-card.fy-card.rec > .fy-art .fy-art-pill{top:6px;left:6px;font-size:9px;padding:3px 7px;}
}

/* Card body / foot — shared */
.pr-card.fy-card .fy-body{
  padding:8px 16px 8px;
  display:flex;flex-direction:column;gap:3px;flex:1;
  position:relative;z-index:1;
}
.pr-card.fy-card .fy-eye{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-dark,var(--pr-gold-dk));
  margin-bottom:4px;
  display:flex;align-items:center;gap:7px;
}
.pr-card.fy-card .fy-eye svg{width:11px;height:11px;}
.pr-card.fy-card .fy-eye-rose{color:var(--rose,var(--pr-rose));}
.pr-card.fy-card .fy-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:16px;font-weight:900;letter-spacing:-.022em;
  color:var(--navy,var(--pr-navy));line-height:1.18;
  text-transform:lowercase;
}
.pr-card.fy-card .fy-meta{
  font-size:12.5px;color:var(--muted,var(--pr-muted));font-weight:500;line-height:1.4;
}
.pr-card.fy-card .fy-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 16px 8px;
  border-top:1px solid var(--border,var(--pr-border));
  position:relative;z-index:1;
}
.pr-card.fy-card .fy-price{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;font-size:15px;color:var(--navy,var(--pr-navy));
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.pr-card.fy-card .fy-foot-muted{
  font-size:12.5px;color:var(--muted,var(--pr-muted));font-weight:600;
}

/* CTA button — navy by default, override per card */
.pr-card.fy-card .fy-cta{
  display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 14px;border-radius:99px;
  background:var(--navy,var(--pr-navy));color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;font-size:13px;letter-spacing:-.012em;
  text-decoration:none;border:0;cursor:pointer;
  transition:transform .15s var(--pr-spring), background .2s ease;
}
.pr-card.fy-card .fy-cta:hover{
  background:var(--accent,var(--pr-accent));
  transform:translateY(-1px);
}
.pr-card.fy-card .fy-cta:active{transform:scale(.96);}
.pr-card.fy-card .fy-cta svg{width:13px;height:13px;}
.pr-card.fy-card .fy-cta-rose{
  background:var(--rose,var(--pr-rose));
}
.pr-card.fy-card .fy-cta-rose:hover{background:var(--pr-rose-dk);}

/* ────────────────────────────────────────────────────────
   Reorder card — white + animated gold conic outline +
   3 overlapping polaroid thumbs.
   ──────────────────────────────────────────────────────── */
.pr-card.fy-card.reorder{
  background:#fff;
  border-color:transparent;
  text-align:center;
  isolation:isolate;
  cursor:pointer;
  box-shadow:0 12px 36px -10px rgba(139,105,20,.16),
             0 0 0 1.5px rgba(200,169,110,.45);
}
.pr-card.fy-card.reorder:focus-visible{
  outline:2px solid var(--accent,var(--pr-accent));outline-offset:3px;
}
.pr-card.fy-card.reorder::before{
  content:"";position:absolute;inset:-1.5px;border-radius:inherit;
  background:conic-gradient(from var(--pr-ang,0deg),
    rgba(200,169,110,0) 0%,
    rgba(232,200,122,.85) 12%,
    rgba(255,230,168,1) 22%,
    rgba(232,200,122,.85) 32%,
    rgba(200,169,110,0) 50%,
    rgba(200,169,110,0) 100%);
  pointer-events:none;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1.5px;z-index:0;
  animation:prReorderSpin 5s linear infinite;
}
@keyframes prReorderSpin{ to { --pr-ang:360deg; } }
.pr-card.fy-card.reorder::after{
  content:"";position:absolute;top:-30%;right:-25%;width:75%;height:160%;
  background:radial-gradient(circle,rgba(200,169,110,.18),transparent 60%);
  pointer-events:none;z-index:0;
}
.pr-card.fy-card.reorder > *{position:relative;z-index:1;}

.pr-card.fy-card.reorder .fy-stack{
  display:flex;justify-content:center;align-items:center;
  padding:6px 14px 2px;margin:0;
}
.pr-card.fy-card.reorder .fy-thumb{
  width:34px;height:34px;flex-shrink:0;
  border-radius:10px;
  background-size:cover;background-position:center;
  background-color:#1B1A6B;
  border:2px solid #fff;
  box-shadow:0 6px 14px -4px rgba(20,16,68,.24),
             0 2px 6px -2px rgba(20,16,68,.12);
  margin-right:-10px;
  transition:transform .35s var(--pr-spring);
}
.pr-card.fy-card.reorder .fy-thumb:nth-child(1){
  z-index:1;
  animation:prThumbFloatLeft 3.4s ease-in-out infinite;
  animation-delay:-.6s;
}
.pr-card.fy-card.reorder .fy-thumb:nth-child(2){
  z-index:3;
  animation:prThumbFloatMid 3.6s ease-in-out infinite;
}
.pr-card.fy-card.reorder .fy-thumb:nth-child(3){
  margin-right:0;z-index:2;
  animation:prThumbFloatRight 3.4s ease-in-out infinite;
  animation-delay:-1.2s;
}
/* Gentle bob + sway around each thumb's slot tilt — same playful feel
   as the signed-out tease cards but in-place, so the thumbnails stay
   readable. Hover overrides reset the transform for the spread effect. */
@keyframes prThumbFloatLeft{
  0%,100%{ transform:rotate(-7deg) translateY(2px); }
  50%   { transform:rotate(-10deg) translateY(-3px); }
}
@keyframes prThumbFloatMid{
  0%,100%{ transform:translateY(-4px) rotate(0deg); }
  50%   { transform:translateY(-9px) rotate(2deg); }
}
@keyframes prThumbFloatRight{
  0%,100%{ transform:rotate(7deg) translateY(2px); }
  50%   { transform:rotate(10deg) translateY(-3px); }
}
.pr-card.fy-card.reorder:hover .fy-thumb{animation-play-state:paused;}
.pr-card.fy-card.reorder:hover .fy-thumb:nth-child(1){transform:translate(-6px,-2px) rotate(-12deg);}
.pr-card.fy-card.reorder:hover .fy-thumb:nth-child(2){transform:translateY(-10px) scale(1.04);}
.pr-card.fy-card.reorder:hover .fy-thumb:nth-child(3){transform:translate(6px,-2px) rotate(12deg);}

.pr-card.fy-card.reorder .fy-body{padding:6px 18px 6px;align-items:center;gap:2px;}
.pr-card.fy-card.reorder .fy-eye{justify-content:center;color:var(--gold-dark,var(--pr-gold-dk));margin-bottom:0;}
.pr-card.fy-card.reorder .fy-title{font-size:16px;color:var(--navy,var(--pr-navy));}
.pr-card.fy-card.reorder .reorder-names{
  font-size:12px;color:var(--pr-ink-2);font-weight:600;line-height:1.35;letter-spacing:-.01em;
}
.pr-card.fy-card.reorder .reorder-names b{color:var(--navy,var(--pr-navy));font-weight:800;}

.pr-card.fy-card.reorder .fy-foot{
  border-top-color:rgba(139,105,20,.14);
  justify-content:space-between;padding:6px 16px 8px;
}
.pr-card.fy-card.reorder .fy-price{color:var(--navy,var(--pr-navy));font-size:15px;}

.pr-card.fy-card.reorder .fy-cta{
  background:var(--gold-dark,var(--pr-gold-dk));
  color:#fff;font-weight:800;
  box-shadow:0 4px 12px -4px rgba(139,105,20,.4);
}
.pr-card.fy-card.reorder .fy-cta:hover{
  background:#6E5210;transform:translateY(-1px);
  box-shadow:0 8px 18px -4px rgba(139,105,20,.5);
}

@media (max-width:520px){
  .pr-card.fy-card.reorder .fy-stack{padding:6px 8px 2px;}
  .pr-card.fy-card.reorder .fy-thumb{width:32px;height:32px;margin-right:-9px;}
}

/* ────────────────────────────────────────────────────────
   Recommendation card
   ──────────────────────────────────────────────────────── */
.pr-card.fy-card.rec .fy-art{
  background-size:cover;background-position:center;
  position:relative;
}
@media (max-width:520px){
  .pr-card.fy-card.rec .fy-art{aspect-ratio:8/1;}
}
.pr-card.fy-card.rec .fy-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.18));
}
.pr-card.fy-card .fy-art-pill{
  position:absolute;top:10px;left:10px;z-index:2;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  padding:5px 11px;border-radius:99px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-dark,var(--pr-gold-dk));
  display:inline-flex;align-items:center;gap:5px;
}
.pr-card.fy-card .fy-art-pill svg{width:11px;height:11px;}
.pr-card.fy-card .fy-art-pill-rose{color:var(--rose,var(--pr-rose));}

/* ────────────────────────────────────────────────────────
   Empty favorites tile — rose gradient + bobbing heart + tap-me
   ──────────────────────────────────────────────────────── */
.pr-card.fy-card.fav-empty .fav-empty-art{
  background:linear-gradient(135deg,#FFE4ED 0%,#FFC4DC 60%,#FFA5C8 100%);
  position:relative;display:grid;place-items:center;
}
.pr-card.fy-card.fav-empty .fav-empty-heart{
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.9);backdrop-filter:blur(6px);
  display:grid;place-items:center;
  color:var(--rose,var(--pr-rose));
  box-shadow:0 6px 16px -3px rgba(232,121,166,.5);
  animation:prEmptyHeartBob 2.2s ease-in-out infinite;
}
.pr-card.fy-card.fav-empty .fav-empty-heart svg{width:16px;height:16px;}
@keyframes prEmptyHeartBob{
  0%,100%{transform:scale(1) rotate(-3deg);}
  50%{transform:scale(1.1) rotate(3deg);}
}
.pr-card.fy-card.fav-empty .fav-empty-tap{
  position:absolute;top:6px;right:-12px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rose,var(--pr-rose));
  background:#fff;padding:2px 7px;border-radius:99px;
  box-shadow:0 4px 10px rgba(232,121,166,.3);
  z-index:2;
  animation:prTapBob 2.2s 0.4s ease-in-out infinite;
}
@keyframes prTapBob{
  0%,100%{transform:translateY(0) rotate(6deg);}
  50%{transform:translateY(-3px) rotate(-3deg);}
}

/* ────────────────────────────────────────────────────────
   Favorites carousel — pink shimmer outline, slides swap by JS
   ──────────────────────────────────────────────────────── */
.pr-card.fy-card.fav-carousel,
.pr-card.fy-card.fav-grid{
  position:relative;
  isolation:isolate;
  border-color:transparent;
  box-shadow:0 8px 24px -8px rgba(232,121,166,.22),
             0 0 0 1.5px rgba(232,121,166,.32);
}
.pr-card.fy-card.fav-carousel::before,
.pr-card.fy-card.fav-grid::before{
  content:"";position:absolute;inset:-1.5px;border-radius:inherit;
  background:conic-gradient(from var(--pr-ang2,0deg),
    rgba(232,121,166,0) 0%,
    rgba(255,182,210,.85) 12%,
    rgba(255,210,228,1) 22%,
    rgba(232,121,166,.85) 32%,
    rgba(232,121,166,0) 50%,
    rgba(232,121,166,0) 100%);
  pointer-events:none;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1.5px;z-index:0;
  animation:prFavSpin 6s linear infinite;
}
@keyframes prFavSpin{ to { --pr-ang2:360deg; } }
.pr-card.fy-card.fav-carousel > *,
.pr-card.fy-card.fav-grid > *{position:relative;z-index:1;}

/* Slides flow normally inside the card — only the active slide is
   visible (.hidden toggles via JS). Each slide owns its art, body, foot
   plus pill/arrows/dots overlaid on the art block. */
.pr-card.fy-card.fav-carousel .fav-slide{
  display:flex;flex-direction:column;flex:1;
}
.pr-card.fy-card.fav-carousel .fav-slide.hidden{display:none;}
.pr-card.fy-card.fav-carousel .fy-art{
  position:relative;
  aspect-ratio:8/1;
  background-size:cover;background-position:center;
  background-color:#1B1A6B;
}
.pr-card.fy-card.fav-carousel .fy-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.18));
  pointer-events:none;
}

/* Arrows pinned to the art's vertical center (top:50% of art region). */
.pr-card.fy-card.fav-carousel .fav-arrow{
  position:absolute;top:50%;z-index:5;
  transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border:1px solid rgba(27,26,107,.06);
  display:grid;place-items:center;color:var(--navy,var(--pr-navy));
  box-shadow:0 6px 16px -4px rgba(27,26,107,.25);
  transition:transform .15s var(--pr-spring),box-shadow .15s ease;
  cursor:pointer;padding:0;
}
.pr-card.fy-card.fav-carousel .fav-arrow.prev{left:8px;}
.pr-card.fy-card.fav-carousel .fav-arrow.next{right:8px;}
.pr-card.fy-card.fav-carousel .fav-arrow svg{width:14px;height:14px;}
.pr-card.fy-card.fav-carousel .fav-arrow:hover{
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 10px 22px -4px rgba(27,26,107,.35);
}
.pr-card.fy-card.fav-carousel .fav-arrow:active{transform:translateY(-50%) scale(.94);}

/* Dots pinned to the art's bottom edge (8px above bottom of art). */
.pr-card.fy-card.fav-carousel .fav-dots{
  position:absolute;bottom:8px;left:50%;z-index:4;
  transform:translateX(-50%);
  display:inline-flex;gap:5px;align-items:center;
  background:rgba(0,0,0,.4);backdrop-filter:blur(4px);
  padding:4px 8px;border-radius:99px;
}
.pr-card.fy-card.fav-carousel .fav-dots i{
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.4);
  transition:all .25s var(--pr-ease);
}
.pr-card.fy-card.fav-carousel .fav-dots i.is-on{
  background:#fff;width:14px;border-radius:99px;
}

/* ────────────────────────────────────────────────────────
   Favorites grid card (mobile)
   ──────────────────────────────────────────────────────── */
.pr-card.fy-card.fav-grid{flex-direction:column;}
.pr-card.fy-card.fav-grid .fav-grid-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 8px;
}
.pr-card.fy-card.fav-grid .fav-grid-head .lab{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rose,var(--pr-rose));
  display:inline-flex;align-items:center;gap:5px;
}
.pr-card.fy-card.fav-grid .fav-grid-head .lab svg{width:11px;height:11px;}
.pr-card.fy-card.fav-grid .fav-grid-head .ct{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11px;font-weight:700;color:var(--muted,var(--pr-muted));
  background:rgba(232,121,166,.12);
  padding:3px 9px;border-radius:99px;
}
.pr-card.fy-card.fav-grid .fav-grid-tiles{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:0 14px 12px;
}
.pr-card.fy-card.fav-grid .fav-tile{
  position:relative;border-radius:14px;overflow:hidden;
  aspect-ratio:1.1;
  background-size:cover;background-position:center;
  background-color:#1B1A6B;
  cursor:pointer;text-decoration:none;color:inherit;
  transition:transform .15s var(--pr-spring);
}
.pr-card.fy-card.fav-grid .fav-tile:hover{transform:translateY(-2px);}
.pr-card.fy-card.fav-grid .fav-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55));
}
.pr-card.fy-card.fav-grid .fav-tile-name{
  position:absolute;bottom:7px;left:9px;right:9px;z-index:2;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11.5px;font-weight:800;color:#fff;letter-spacing:-.012em;
  text-shadow:0 1px 4px rgba(0,0,0,.4);line-height:1.2;
  text-transform:lowercase;
}
.pr-card.fy-card.fav-grid .fav-tile-add{
  position:absolute;top:7px;right:7px;z-index:3;
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.95);
  display:grid;place-items:center;color:var(--navy,var(--pr-navy));
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.pr-card.fy-card.fav-grid .fav-tile-add svg{width:13px;height:13px;}
.pr-card.fy-card.fav-grid .fav-grid-foot{
  padding:8px 16px 14px;
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--border,var(--pr-border));
  margin-top:auto;
}
.pr-card.fy-card.fav-grid .fav-grid-foot-hint{
  font-size:11.5px;color:var(--muted,var(--pr-muted));font-weight:600;
}
.pr-card.fy-card.fav-grid .fav-grid-link{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px;font-weight:800;color:var(--rose,var(--pr-rose));
  letter-spacing:-.01em;text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;padding:6px 0;
}

/* ────────────────────────────────────────────────────────
   Desktop / mobile swap for fav slot
   On desktop: show .fav-carousel, hide .fav-grid.
   On mobile (≤780px): the reverse.
   ──────────────────────────────────────────────────────── */
.pr-card.fy-card.fav-grid{display:none;}
@media (max-width:780px){
  .pr-card.fy-card.fav-carousel{display:none;}
  .pr-card.fy-card.fav-grid{display:flex;}
}

/* ────────────────────────────────────────────────────────
   Mobile orbit-carousel — the .pr-grid becomes a horizontal
   scroll-snap track. Non-active cards pull back with a subtle
   perspective rotateY.
   ──────────────────────────────────────────────────────── */
@media (max-width:780px){
  .pr-rail{padding:0 16px;margin-bottom:8px;}
  .pr-rail-head{margin:18px 0 10px;gap:10px 12px;flex-wrap:wrap;}
  .pr-rail-head h2{font-size:20px;}
  .pr-rail-head .pr-sub{font-size:12px;}
  .pr-rail-head a.pr-history{font-size:11.5px;padding:6px 10px;}

  .pr-grid{
    display:flex;flex-direction:row;
    grid-template-columns:none;
    gap:0;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding:0;
    padding:14px 0 4px;
    margin:0 -16px;
    perspective:900px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    align-items:flex-start;
  }
  .pr-grid::-webkit-scrollbar{display:none;}
  .pr-grid > .pr-card.fy-card{
    /* tighter gutter on mobile so cards don't feel like they're barely
       fitting against the screen edges */
    flex:0 0 calc(100% - 72px);
    max-width:340px;
    margin:0 16px;
    scroll-snap-align:center;
    transform-origin:center center;
    transform:scale(.92) rotateY(0deg);
    transition:transform .35s cubic-bezier(.22,.8,.36,1),
               box-shadow .35s var(--pr-ease);
    will-change:transform;
    /* keep all carousel cards the same compact size — no rectangular outliers */
    align-self:stretch;
    min-height:380px;
  }
  .pr-grid > .pr-card.fy-card.is-front{
    transform:scale(1) rotateY(0deg);
    box-shadow:0 18px 36px -10px rgba(27,26,107,.22);
  }
  .pr-grid > .pr-card.fy-card.is-side-l{
    transform:scale(.88) rotateY(14deg) translateZ(-30px);
  }
  .pr-grid > .pr-card.fy-card.is-side-r{
    transform:scale(.88) rotateY(-14deg) translateZ(-30px);
  }
  /* Mobile: hide the conic-gradient shimmer pseudo-elements. They use a
     mask-composite trick that ships with visible seams on some mobile
     browsers (the user-reported "line down the middle showing two
     different shades"). The static colored borders + shadows stay. */
  .pr-card.fy-card.reorder::before,
  .pr-card.fy-card.fav-carousel::before,
  .pr-card.fy-card.fav-grid::before,
  .fy-newcomer::after,
  /* The gold radial bleeding from the top-right of the newcomer card
     paints a visible color split through the card on mobile (the
     "dividing line in the middle that makes it two separate colors"
     the user keeps reporting). Kill it on mobile — the card stays
     pure white, no split. Desktop keeps it for warmth. */
  .fy-newcomer::before{display:none;}
}

/* ────────────────────────────────────────────────────────
   Mobile dot indicator (kept from original wiring)
   ──────────────────────────────────────────────────────── */
.pr-mdots{display:none;}
@media (max-width:780px){
  .pr-mdots{
    display:flex;align-items:center;justify-content:center;gap:18px;
    padding:8px 12px 4px;
  }
  .pr-mdot-row{display:inline-flex;gap:6px;}
  .pr-mdot{
    width:6px;height:6px;border-radius:50%;
    background:rgba(20,16,68,.18);
    transition:width .25s ease,background .25s ease;
  }
  .pr-mdot.on{background:var(--navy,var(--pr-navy));width:22px;border-radius:99px;}
  .pr-mlabel{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:10.5px;font-weight:800;letter-spacing:.10em;
    color:var(--muted,var(--pr-muted));text-transform:uppercase;
    min-width:70px;text-align:center;
  }
  .pr-mlabel b{color:var(--navy,var(--pr-navy));font-weight:900;}
}

/* ────────────────────────────────────────────────────────
   Skeleton (loading state) — matches the new card height
   ──────────────────────────────────────────────────────── */
.pr-skel{
  background:#fff;border:1.5px solid var(--border,var(--pr-border));border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;
}
.pr-skel-art{aspect-ratio:8/1;background:#F0F1F7;}
.pr-skel-body{padding:14px 18px 16px;display:flex;flex-direction:column;gap:8px;}
.pr-skel-line{
  height:12px;border-radius:6px;
  background:linear-gradient(90deg,#F0F1F7 25%,#E4E5F0 50%,#F0F1F7 75%);
  background-size:400% 100%;
  animation:prShimmer 1.4s ease infinite;
}
.pr-skel-line.short{width:50%;}
.pr-skel-line.med{width:80%;}
@keyframes prShimmer{
  0%{background-position:100% 50%;}
  100%{background-position:-100% 50%;}
}

/* ════════════════════════════════════════════════════════════
   PROMO STATES
   - 'guest'        — split card with sign-in + navy tease block
   - 'first-order'  — white card, navy/accent shimmer, navy stars
   - 'no-match-here' — the original dashed card (bakery edge case)
   ════════════════════════════════════════════════════════════ */

/* Signed-out (guest) */
.fy-signed-out{
  background:#fff;border:1px solid var(--border,var(--pr-border));border-radius:18px;
  padding:10px 14px;
  display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:center;
  box-shadow:0 2px 14px rgba(27,26,107,.04);
  grid-column:1 / -1;
}
/* The signed-out promo carries its own eyebrow + headline ("sign in for
   the personal touch · reorders. favorites. picks."), so the rail's
   outer head ("sign in for personalized picks · your store, smarter")
   is redundant. Hide it whenever the guest promo is mounted, not just
   on mobile. */
.pr-rail:has(.fy-signed-out) .pr-rail-head{display:none;}
@media (max-width:780px){.fy-signed-out{grid-template-columns:1fr;}}
/* Mobile compact — full-width tease + long paragraph eats a whole
   viewport on a phone. Drop both; the headline + sign-in pill carry
   the entire job. Selectors all pin to .fy-signed-out so they out-
   specificity the default styles further down in this file. */
@media (max-width:640px){
  .fy-signed-out{padding:14px 16px;gap:10px;}
  .fy-signed-out .fy-signed-out-l{gap:8px;}
  .fy-signed-out .fy-signed-out-eye{font-size:10px;}
  .fy-signed-out .fy-signed-out-l h3{font-size:18px;line-height:1.1;}
  .fy-signed-out p{display:none;}
  .fy-signed-out .fy-signed-out-actions{margin-top:4px;}
  .fy-signed-out .fy-btn-primary{height:38px;padding:0 18px;font-size:13px;}
  .fy-signed-out .fy-btn-primary svg{width:11px;height:11px;}
  .fy-signed-out .fy-btn-ghost{height:38px;padding:0 12px;font-size:13px;}
  .fy-signed-out .fy-tease{display:none;}
  /* (rule moved out of mobile-only — see below for full-width hide) */
  /* The mobile rail flips .pr-grid into a horizontal scroll-snap
     carousel for returning customers (3 cards). The guest promo is a
     single block — opt out of the carousel so it stretches full width
     instead of sitting at its natural content size with empty space
     on the right. */
  .pr-rail:has(.fy-signed-out) .pr-grid{
    display:block;margin:0;padding:0;overflow:visible;perspective:none;
  }
  .pr-rail:has(.fy-signed-out) .fy-signed-out{width:100%;}
}
.fy-signed-out-l{display:flex;flex-direction:column;gap:6px;}
.fy-signed-out-eye{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dark,var(--pr-gold-dk));
}
.fy-signed-out h3{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:16px;font-weight:900;letter-spacing:-.028em;
  color:var(--navy,var(--pr-navy));line-height:1.1;margin:0;
  text-transform:lowercase;
}
.fy-signed-out h3 em{font-style:normal;color:var(--accent,#2D2FA8);}
.fy-signed-out p{
  font-size:12px;color:var(--muted,var(--pr-muted));
  line-height:1.4;font-weight:500;max-width:48ch;margin:0;
}
.fy-signed-out-actions{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:2px;
}
.fy-btn-primary{
  display:inline-flex;align-items:center;gap:7px;
  height:32px;padding:0 16px;border-radius:99px;
  background:var(--navy,var(--pr-navy));color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;font-size:14px;letter-spacing:-.012em;
  text-decoration:none;border:0;cursor:pointer;
  box-shadow:0 6px 18px -4px rgba(27,26,107,.4);
  transition:transform .15s var(--pr-spring),background .2s;
}
.fy-btn-primary:hover{background:var(--accent,var(--pr-accent));transform:translateY(-2px);}
.fy-btn-primary svg{width:13px;height:13px;}
.fy-btn-ghost{
  display:inline-flex;align-items:center;
  height:32px;padding:0 12px;border-radius:99px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;font-size:13.5px;color:var(--pr-ink-2);letter-spacing:-.012em;
  text-decoration:none;background:transparent;border:0;cursor:pointer;
  transition:background .15s,color .15s;
}
.fy-btn-ghost:hover{background:rgba(27,26,107,.06);color:var(--navy,var(--pr-navy));}

.fy-tease{
  position:relative;border-radius:12px;overflow:hidden;
  background:linear-gradient(140deg,#1A1A2E 0%,var(--navy,var(--pr-navy)) 60%,var(--accent,var(--pr-accent)) 100%);
  min-height:96px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:8px 12px;color:#fff;
}
.fy-tease::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 70% 20%,rgba(200,169,110,.22),transparent 60%);
}
.fy-tease-pill{
  position:absolute;top:8px;left:10px;z-index:2;
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);
  border:1px solid rgba(200,169,110,.32);
  padding:3px 8px;border-radius:99px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pr-gold-soft);
  display:inline-flex;align-items:center;gap:5px;
}
.fy-tease-pill svg{width:9px;height:9px;}
.fy-tease-cards{
  position:absolute;top:50%;right:12px;left:auto;
  width:80px;height:48px;
  transform:translateY(-50%);
  pointer-events:none;
}
.fy-tease-cards .tc{
  position:absolute;top:4px;right:0;
  width:36px;height:40px;border-radius:7px;
  border:2px solid rgba(255,255,255,.16);
  box-shadow:0 10px 22px -4px rgba(0,0,0,.45);
  animation:8s cubic-bezier(.5,.05,.4,1) infinite;
  will-change:transform,opacity;
}
.fy-tease-cards .tc.tc-gold{
  background:linear-gradient(135deg,#FFE6A8 0%,#C8A96E 55%,#8B6914 100%);
  animation-name:prTeaseOrbitGold;
}
.fy-tease-cards .tc.tc-navy{
  background:linear-gradient(135deg,#5B5BC4 0%,#2D2FA8 55%,#1B1A6B 100%);
  border-color:rgba(200,169,110,.5);
  animation-name:prTeaseOrbitNavy;
  z-index:2;
}
.fy-tease-cards .tc.tc-cream{
  background:linear-gradient(135deg,#FFFCF4 0%,#F0DDB3 55%,#C8A96E 100%);
  animation-name:prTeaseOrbitCream;
}
/* Each card orbits right→formation→bob→spin-out-left→loop. Slot
   positions match the previous static fan: gold at left edge tilted
   -8°, navy centered upright, cream at right tilted +8°. The exit
   spins out a full 360° to "rotate like a circle" before fading. */
@keyframes prTeaseOrbitGold{
  0%   { transform:translate(140px, 0) rotate(40deg); opacity:0; }
  10%  { transform:translate(60px, -2px) rotate(10deg); opacity:.7; }
  18%  { transform:translate(-74px, 2px) rotate(-8deg); opacity:1; }
  30%  { transform:translate(-74px, -3px) rotate(-8deg); opacity:1; }
  42%  { transform:translate(-74px, 3px) rotate(-8deg); opacity:1; }
  54%  { transform:translate(-74px, -3px) rotate(-8deg); opacity:1; }
  66%  { transform:translate(-74px, 2px) rotate(-8deg); opacity:1; }
  78%  { transform:translate(-150px, -4px) rotate(-120deg); opacity:.75; }
  88%  { transform:translate(-420px, 0) rotate(-300deg); opacity:0; }
  100% { transform:translate(140px, 0) rotate(40deg); opacity:0; }
}
@keyframes prTeaseOrbitNavy{
  0%   { transform:translate(140px, 0) rotate(40deg); opacity:0; }
  10%  { transform:translate(60px, -2px) rotate(10deg); opacity:.7; }
  18%  { transform:translate(-52px, -3px) rotate(0deg); opacity:1; }
  30%  { transform:translate(-52px, -8px) rotate(0deg); opacity:1; }
  42%  { transform:translate(-52px, -2px) rotate(0deg); opacity:1; }
  54%  { transform:translate(-52px, -8px) rotate(0deg); opacity:1; }
  66%  { transform:translate(-52px, -3px) rotate(0deg); opacity:1; }
  78%  { transform:translate(-140px, -4px) rotate(-120deg); opacity:.75; }
  88%  { transform:translate(-420px, 0) rotate(-300deg); opacity:0; }
  100% { transform:translate(140px, 0) rotate(40deg); opacity:0; }
}
@keyframes prTeaseOrbitCream{
  0%   { transform:translate(140px, 0) rotate(40deg); opacity:0; }
  10%  { transform:translate(60px, -2px) rotate(10deg); opacity:.7; }
  18%  { transform:translate(-30px, 2px) rotate(8deg); opacity:1; }
  30%  { transform:translate(-30px, -3px) rotate(8deg); opacity:1; }
  42%  { transform:translate(-30px, 3px) rotate(8deg); opacity:1; }
  54%  { transform:translate(-30px, -3px) rotate(8deg); opacity:1; }
  66%  { transform:translate(-30px, 2px) rotate(8deg); opacity:1; }
  78%  { transform:translate(-130px, -4px) rotate(-120deg); opacity:.75; }
  88%  { transform:translate(-420px, 0) rotate(-300deg); opacity:0; }
  100% { transform:translate(140px, 0) rotate(40deg); opacity:0; }
}
.fy-tease-text{position:relative;z-index:1;max-width:60%;}
.fy-tease-text .v{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px;font-weight:900;letter-spacing:-.022em;color:#fff;line-height:1.15;
}
.fy-tease-text .l{font-size:10.5px;color:rgba(255,255,255,.62);font-weight:600;margin-top:2px;}

/* Newcomer — first order */
.fy-newcomer{
  background:#fff;
  border:1px solid var(--border,var(--pr-border));border-radius:16px;
  padding:14px 16px;
  display:grid;grid-template-columns:.65fr 1.6fr;gap:16px;align-items:center;
  position:relative;overflow:hidden;
  isolation:isolate;
  box-shadow:0 6px 20px -10px rgba(45,47,168,.14),
             0 0 0 1.5px rgba(45,47,168,.2);
  grid-column:1 / -1;
}
.fy-newcomer::after{
  content:"";position:absolute;inset:-1.5px;border-radius:inherit;
  background:conic-gradient(from var(--pr-ang3,0deg),
    rgba(45,47,168,0) 0%,
    rgba(91,79,201,.6) 12%,
    rgba(168,166,232,.95) 22%,
    rgba(91,79,201,.6) 32%,
    rgba(45,47,168,0) 50%,
    rgba(45,47,168,0) 100%);
  pointer-events:none;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1.5px;z-index:0;
  animation:prNewcomerSpin 7s linear infinite;
}
@keyframes prNewcomerSpin{ to { --pr-ang3:360deg; } }
.fy-newcomer > *{position:relative;z-index:1;}
.fy-newcomer::before{
  content:"";position:absolute;top:-40%;right:-15%;width:55%;height:200%;
  background:radial-gradient(circle,rgba(200,169,110,.18),transparent 60%);
  pointer-events:none;z-index:0;
}
.fy-newcomer-art{
  aspect-ratio:1.7;
  background:transparent;
  position:relative;overflow:hidden;display:grid;place-items:center;
}
.fy-newcomer-art::before{display:none;}
.fy-newcomer-art-radials-disabled{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 70% 30%,rgba(45,47,168,.06),transparent 60%),
    radial-gradient(circle at 20% 80%,rgba(200,169,110,.1),transparent 55%);
}
/* perk-badges — three icon discs that map to the three perks below */
.fy-newcomer-art .perk-badges{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:14px;padding:0 8px;
}
.fy-newcomer-art .perk-badges .pb{
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;
  box-shadow:0 14px 28px -8px rgba(20,16,68,.22),0 4px 10px -2px rgba(20,16,68,.1);
}
.fy-newcomer-art .perk-badges .pb svg{width:24px;height:24px;}
.fy-newcomer-art .perk-badges .pb-reorder{
  background:linear-gradient(135deg,#FFE9B0 0%,var(--gold,#C8A96E) 60%,var(--gold-dark,#8B6914) 100%);
  color:#fff;
  animation:prPerkBob 3.2s ease-in-out infinite;
}
.fy-newcomer-art .perk-badges .pb-fav{
  background:linear-gradient(135deg,#FFE0EC 0%,#FFB6D2 55%,var(--rose,#E879A6) 100%);
  color:#fff;
  margin-top:-14px;
  animation:prPerkBob 3.2s .55s ease-in-out infinite reverse;
}
.fy-newcomer-art .perk-badges .pb-pick{
  background:linear-gradient(135deg,#A8A6E8 0%,var(--accent,#2D2FA8) 55%,var(--navy,#1B1A6B) 100%);
  color:#fff;
  margin-top:18px;
  animation:prPerkBob 3.2s 1.1s ease-in-out infinite;
}
@keyframes prPerkBob{
  0%,100%{transform:translateY(0) rotate(0);}
  50%{transform:translateY(-8px) rotate(6deg);}
}
.fy-newcomer-body{position:relative;z-index:1;}
.fy-newcomer-eye{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent,#2D2FA8);margin-bottom:8px;
}
.fy-newcomer h3{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:18px;font-weight:900;letter-spacing:-.025em;
  color:var(--navy,var(--pr-navy));line-height:1.1;margin-bottom:4px;
  text-transform:lowercase;
}
.fy-newcomer h3 em{font-style:normal;color:var(--accent,#2D2FA8);}
.fy-newcomer p{
  font-size:13px;color:var(--muted,var(--pr-muted));line-height:1.45;font-weight:500;
  margin-bottom:8px;max-width:54ch;
}
.fy-perks{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;}
.fy-perk{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12.5px;font-weight:700;color:var(--pr-ink-2);
}
.fy-perk svg{width:14px;height:14px;color:var(--gold-dark,var(--pr-gold-dk));}
.fy-newcomer-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}

/* Mobile compaction — collapse to a single column with the three
   badges centered ABOVE the copy. The previous version used
   aspect-ratio:5 on the art container (~68px tall on a 343 viewport),
   then bumped badges to 62×62 at ≤520 — taller than the container,
   so they clipped. It also nuked the eyebrow + perks list, leaving
   just a 14px headline + a button. Tommy: "it eats half the icons,
   the modules should be big enough to show all text and icons in it."

   New approach: badges sized to ~52×52 in a clean centered row, art
   container sized by `min-height` (no aspect-ratio crush). Eyebrow,
   headline, perks list, and CTA all visible at readable sizes. The
   long `<p>` description still hides — it's redundant with the
   checkmark perks below. */
@media (max-width:780px){
  .fy-newcomer{
    grid-template-columns:1fr;
    padding:18px 18px 20px;
    gap:14px;
    margin:0 14px;
    box-shadow:0 4px 14px -8px rgba(45,47,168,.18),0 0 0 1px rgba(45,47,168,.18);
  }
  /* Stack art on top, copy below. Reset the desktop column ratio. */
  .fy-newcomer-art{
    aspect-ratio:auto;
    min-height:72px;
    padding:6px 0 4px;
  }
  /* Reset the asymmetric badge offsets — they were tuned for the
     desktop overlap layout and create a wobble when stacked here. */
  .fy-newcomer-art .perk-badges{
    gap:18px;padding:0;
    justify-content:center;
  }
  .fy-newcomer-art .perk-badges .pb{width:52px;height:52px;}
  .fy-newcomer-art .perk-badges .pb svg{width:22px;height:22px;}
  .fy-newcomer-art .perk-badges .pb-fav,
  .fy-newcomer-art .perk-badges .pb-pick{margin-top:0;}

  /* Keep the paragraph hidden (it's long; perks list below carries
     the same info more compactly) — but bring the eyebrow + perks
     list back so the section has real content, not just a headline. */
  .fy-newcomer p{display:none;}
  .fy-newcomer-eye{display:block;}
  .fy-perks{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:8px;}
  .fy-perk{font-size:12px;}

  /* Headline + button at readable sizes. */
  .fy-newcomer h3{font-size:17px;margin-bottom:4px;line-height:1.2;}
  .fy-newcomer-actions{margin-top:10px;}
  .fy-newcomer-actions .fy-btn-primary{
    height:40px;font-size:13px;padding:0 18px;
  }
}
/* Small phones (≤520px) — tighten margins + badge gap so the row
   fits cleanly on a 320-wide viewport without orphaning a badge. */
@media (max-width:520px){
  .fy-newcomer{
    padding:16px 16px 18px;
    margin:0 10px;
  }
  .fy-newcomer-art{min-height:68px;padding:4px 0;}
  .fy-newcomer-art .perk-badges{gap:14px;}
  .fy-newcomer-art .perk-badges .pb{width:48px;height:48px;}
  .fy-newcomer-art .perk-badges .pb svg{width:20px;height:20px;}
  .fy-newcomer h3{font-size:16px;}
}

/* Original promo (no-match-here · bakery edge case) — kept simple */
.pr-promo{
  position:relative;
  background:linear-gradient(135deg,rgba(232,200,122,.08) 0%,rgba(200,169,110,.04) 100%);
  border:1.5px dashed var(--gold,var(--pr-gold));
  border-radius:18px;
  padding:22px 26px;
  display:flex;align-items:center;gap:20px;
  grid-column:1 / -1;
}
.pr-rail[data-theme="bakery"] .pr-promo{
  background:linear-gradient(135deg,rgba(232,176,104,.10) 0%,rgba(198,139,58,.04) 100%);
  border-color:#C68B3A;
}
.pr-promo-ico{
  width:54px;height:54px;flex-shrink:0;border-radius:14px;
  background:linear-gradient(135deg,#8B6914,#C8A96E,#E8C87A);
  display:grid;place-items:center;color:#1A1508;font-size:26px;font-weight:900;
  font-family:'Plus Jakarta Sans',sans-serif;
  box-shadow:0 8px 18px -8px rgba(200,169,110,.55);
}
.pr-rail[data-theme="bakery"] .pr-promo-ico{
  background:linear-gradient(135deg,#7E5320,#C68B3A,#E8B068);color:#fff;
}
.pr-promo-body{flex:1;min-width:0;}
.pr-promo-eye{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:#7A5A1F;margin-bottom:4px;
}
.pr-rail[data-theme="bakery"] .pr-promo-eye{color:#7E5320;}
.pr-promo-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:17px;font-weight:900;color:var(--navy,var(--pr-navy));letter-spacing:-.015em;line-height:1.25;
  margin-bottom:4px;text-transform:lowercase;
}
.pr-promo-title em{font-style:normal;font-weight:900;color:#7A5A1F;}
.pr-rail[data-theme="bakery"] .pr-promo-title em{color:#7E5320;}
.pr-promo-meta{font-size:13px;color:var(--muted,var(--pr-muted));line-height:1.5;}
.pr-promo-actions{flex-shrink:0;display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.pr-promo .pr-btn{
  background:var(--navy,var(--pr-navy));color:#fff;border:none;cursor:pointer;
  padding:11px 20px;border-radius:99px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12.5px;font-weight:800;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;
  transition:transform .15s ease, background .2s ease;
}
.pr-promo .pr-btn:hover{transform:translateY(-1px);background:var(--accent,var(--pr-accent));}
@media (max-width:760px){
  .pr-promo{flex-direction:column;align-items:flex-start;padding:18px;gap:14px;}
  .pr-promo-actions{width:100%;justify-content:stretch;}
  .pr-promo .pr-btn{flex:1;justify-content:center;text-align:center;}
}

/* ────────────────────────────────────────────────────────
   Reduce motion
   ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .pr-card.fy-card,
  .pr-promo,
  .fy-newcomer,
  .fy-signed-out{animation:none;transition:none;}
  .pr-card.fy-card.reorder::before,
  .pr-card.fy-card.fav-carousel::before,
  .pr-card.fy-card.fav-grid::before,
  .fy-newcomer::after,
  .pr-card.fy-card.fav-empty .fav-empty-heart,
  .pr-card.fy-card.fav-empty .fav-empty-tap,
  .fy-newcomer-art .perk-badges .pb,
  .fy-tease-cards .tc,
  .pr-card.fy-card.reorder .fy-thumb{animation:none !important;}
  /* Restore the static slot transforms when motion is disabled. */
  .pr-card.fy-card.reorder .fy-thumb:nth-child(1){transform:rotate(-7deg) translateY(2px);}
  .pr-card.fy-card.reorder .fy-thumb:nth-child(2){transform:translateY(-4px);}
  .pr-card.fy-card.reorder .fy-thumb:nth-child(3){transform:rotate(7deg) translateY(2px);}
  .pr-skel-line{animation:none;background:#F0F1F7;}
}