/* Existing example designs, presented as a dedicated invitation to the cake wizard. */
.cake-showcase {
  --cake-red: #8f2632;
  --cake-cream: #fff6e8;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  width: min(calc(100% - 80px), 1260px);
  min-height: 550px;
  margin: 74px auto;
  background: var(--cake-red);
  color: var(--cake-cream);
  border: 1px solid #7f2730;
  border-radius: 28px;
  overflow: hidden;
}
.cake-showcase::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 96% 0%, #d9a88415, transparent 64%); }
.cake-showcase-copy { position: relative; z-index: 2; padding: 55px 20px 55px 58px; }
.cake-showcase .eyebrow { color: #f0caba; font-size: 10px; font-weight: 500; letter-spacing: .16em; }
.cake-showcase .eyebrow::before { width: 4px; height: 4px; background: #edc5b3; }
.cake-showcase h2 { max-width: 450px; margin: 24px 0 20px; font-size: clamp(37px, 4.2vw, 59px); font-weight: 450; line-height: 1.06; letter-spacing: -.055em; color: var(--cake-cream); }
.cake-showcase-copy > p { max-width: 350px; margin: 0; color: #eed6ca; font-size: 15px; line-height: 1.8; }
.cake-showcase .cake-showcase-cta { justify-content: space-between; min-width: 225px; min-height: 49px; margin-top: 28px; padding: 14px 19px; border: 1px solid #fff0df; border-radius: 11px; background: #fff4e5; color: #782531; font-size: 14px; font-weight: 550; }
.cake-showcase .cake-showcase-cta:hover { border-color: #fffaf2; background: #fffaf2; color: #69232a; }
.cake-showcase .cake-showcase-cta .icon { width: 18px; height: 18px; }
.cake-showcase .cake-showcase-cta:focus-visible { outline-color: #fff4e5; outline-offset: 5px; }
.cake-showcase-signature { display: flex; align-items: center; gap: 10px; margin-top: 34px; color: #e9bbab; font: italic 27px/1.1 'Cormorant Garamond', Georgia, serif; letter-spacing: -.025em; }
.cake-showcase-signature::before { content: ''; width: 34px; height: 1px; background: #e9bbab70; }
.cake-showcase-art { position: relative; min-width: 0; width: 100%; height: 550px; margin: 0; }
.cake-showcase-main { position: absolute; z-index: 1; top: 55px; right: 36px; width: 75%; height: 368px; border: 7px solid #fbefde; border-radius: 120px 120px 18px 18px; box-shadow: 0 14px 35px #41181b30; overflow: hidden; transform: rotate(5deg); }
.cake-showcase-main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cake-showcase-detail { position: absolute; z-index: 2; bottom: 42px; left: 0; width: 39%; aspect-ratio: .92; margin: 0; border: 6px solid #f9ecdc; border-radius: 10px; background: #f9ecdc; box-shadow: 0 12px 32px #41181b38; overflow: hidden; transform: rotate(-8deg); }
.cake-showcase-detail img { width: 100%; height: 100%; object-fit: cover; object-position: 47% 50%; }
.cake-showcase-note { position: absolute; z-index: 3; right: 42px; bottom: 32px; color: #f0cebb; font-size: 10px; letter-spacing: .04em; }
.cake-showcase-botanical { position: absolute; z-index: 3; top: 18px; left: 8px; width: 110px; height: 145px; color: #f4d2b8; stroke-width: 1.2; pointer-events: none; transform: rotate(-14deg); }
.cake-showcase-spark { position: absolute; z-index: 3; right: 18px; bottom: 112px; width: 40px; height: 56px; color: #e9b79f; stroke-width: 1.1; pointer-events: none; }
.cake-showcase-main,
.cake-showcase-detail { transition: transform .65s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) {
  .cake-showcase:hover .cake-showcase-main { transform: translateY(-4px) rotate(3deg); }
  .cake-showcase:hover .cake-showcase-detail { transform: translateY(-2px) rotate(-5deg); }
}
@media (min-width: 1440px) {
  .cake-showcase { width: var(--site-shell, min(calc(100% - 100px), 1260px)); max-width: 1260px; }
}
@media (min-width: 761px) and (max-width: 1050px) {
  .cake-showcase { width: calc(100% - 48px); min-height: 475px; }
  .cake-showcase-copy { padding: 38px 10px 38px 32px; }
  .cake-showcase h2 { font-size: 40px; }
  .cake-showcase-copy > p { font-size: 14px; max-width: 290px; }
  .cake-showcase-art { height: 475px; }
  .cake-showcase-main { top: 64px; right: 27px; height: 315px; border-width: 6px; }
  .cake-showcase-detail { bottom: 35px; left: 5px; width: 43%; border-width: 5px; }
  .cake-showcase-botanical { top: 26px; left: 0; width: 86px; height: 120px; }
  .cake-showcase-note { right: 28px; bottom: 20px; font-size: 9px; }
}
@media (max-width: 760px) {
  .cake-showcase { grid-template-columns: minmax(0, 1fr); width: calc(100% - 32px); min-height: 0; margin: 46px auto; border-radius: 23px; }
  .cake-showcase-copy { padding: 34px 28px 0; }
  .cake-showcase .eyebrow { font-size: 9px; letter-spacing: .13em; }
  .cake-showcase h2 { max-width: 330px; margin: 19px 0 15px; font-size: clamp(36px, 10vw, 47px); line-height: 1.08; }
  .cake-showcase-copy > p { max-width: 340px; font-size: 14px; line-height: 1.75; }
  .cake-showcase .cake-showcase-cta { min-width: 222px; min-height: 47px; margin-top: 23px; padding: 12px 17px; font-size: 13px; }
  .cake-showcase-signature { margin-top: 24px; font-size: 25px; }
  .cake-showcase-art { height: clamp(315px, 88vw, 470px); max-width: 500px; margin: 9px auto 0; }
  .cake-showcase-main { top: 20px; right: 25px; width: 65%; height: 77%; border-width: 5px; border-radius: 95px 95px 14px 14px; }
  .cake-showcase-detail { left: 25px; bottom: 35px; width: 38%; border-width: 5px; border-radius: 8px; }
  .cake-showcase-botanical { top: 10px; left: 24px; width: 76px; height: 108px; }
  .cake-showcase-spark { right: 16px; bottom: 67px; width: 28px; height: 42px; }
  .cake-showcase-note { bottom: 14px; right: 24px; font-size: 9px; }
}
@media (max-width: 359px) {
  .cake-showcase { width: calc(100% - 24px); }
  .cake-showcase-copy { padding-inline: 23px; }
  .cake-showcase h2 { font-size: 35px; }
  .cake-showcase .cake-showcase-cta { width: 100%; min-width: 0; }
  .cake-showcase-art { height: 300px; }
  .cake-showcase-main { right: 20px; }
  .cake-showcase-detail { left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cake-showcase-main,
  .cake-showcase-detail,
  .cake-showcase .cake-showcase-cta { transition: none; }
  .cake-showcase:hover .cake-showcase-main { transform: rotate(5deg); }
  .cake-showcase:hover .cake-showcase-detail { transform: rotate(-8deg); }
  .cake-showcase .cake-showcase-cta:hover { transform: none; }
}