:root {
  --purple: #7b4bb3;
  --soft: #f4edff;
  --gold: #d6a84f;
  --dark: #2f243a;
  --white: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: var(--dark);
  background: var(--white);
}

.header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 8%;
  background: white;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.logo {
  color: var(--purple);
  font-size: 24px;
  font-weight: 800;
  text-decoration: none;
}

nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

nav a {
  color: var(--dark);
  text-decoration: none;
  font-weight: 700;
}

.menu-btn {
  display: none;
  font-size: 26px;
  background: none;
  border: none;
}

.cart-btn, .primary-btn, button {
  background: var(--purple);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.hero {
  min-height: 72vh;
  padding: 80px 8%;
  display: grid;
  align-content: center;
  background: linear-gradient(135deg, var(--soft), #fff6df);
}

.eyebrow {
  color: var(--gold);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(42px, 8vw, 82px);
  color: var(--purple);
  margin: 8px 0;
}

.hero p {
  font-size: 21px;
  max-width: 700px;
}

.section {
  padding: 64px 8%;
  text-align: center;
}

.section h2 {
  color: var(--purple);
  font-size: 36px;
}

.soft { background: var(--soft); }

.product-grid, .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 28px;
}

.product-card, .gallery-grid div, .preview, form {
  background: white;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.product-card .emoji {
  font-size: 50px;
}

.product-card h3 { margin-bottom: 4px; }
.product-card p { opacity: .78; }

.designer-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 28px;
  text-align: left;
}

.preview {
  text-align: center;
  display: grid;
  place-content: center;
}

#designEmojiUnused {
  font-size: 100px;
}

form {
  display: grid;
  gap: 16px;
}

label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

input, select {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: 1px solid #d9d1e8;
  font-size: 16px;
}


.cart-panel {
  position: fixed;
  top: 0;
  right: -420px;
  width: min(420px, 92vw);
  height: 100dvh;
  background: white;
  z-index: 10050;
  box-shadow: -8px 0 22px rgba(0,0,0,.14);
  padding: 24px;
  transition: .3s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cart-panel.open { right: 0; }

body.cart-open {
  overflow: hidden;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

body.cart-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(18, 8, 24, .62);
}

.close-btn {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  font-size: 28px;
  padding: 4px 12px;
}

.cart-item {
  border-bottom: 1px solid #eee;
  padding: 14px 0;
}

.cart-feedback {
  margin: 10px 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff8e6;
  color: #6f4d00;
  font-weight: 800;
}

.cart-item-image {
  width: 72px;
  height: 72px;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  background: #f8f0ff;
  float: left;
  margin: 0 12px 8px 0;
}

.cart-quantity-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 999px;
  background: #f8f0ff;
  font-weight: 800;
}

.cart-quantity-controls .quantity-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
}

.continue-shopping-btn {
  width: 100%;
  margin-top: 10px;
  background: white;
  color: var(--purple);
  border: 2px solid var(--purple);
}

@media (max-width: 780px) {
  .product-grid, 
  .gallery-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .product-image{
    height: 180px;
  }
  nav{
    display: none;
  }
}
@media (max-width: 480px) {
  .product-grid, .gallery-grid { grid-template-columns: 1fr; }
  .menu-btn { display: block; }
  .cart-panel {
    width: min(370px, 96vw);
    right: min(-370px, -96vw);
  }
  
}
.product-card .product-image {
  width: 100% !important;
  max-width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto 15px !important;
  background: white !important;
  border-radius: 12px !important;
  padding: 8px !important;
}


.checkout-btn {
  width: 100%;
  margin-top: 10px;
  background: var(--gold);
  color: var(--dark);
}

#clearCart {
  width: 100%;
  margin-top: 10px;
}

@media (max-width: 780px) {
  .header {
    padding: 14px 5%;
  }

  .menu-btn {
    display: block;
  }

  nav.open {
    display: grid;
    position: absolute;
    top: 64px;
    left: 5%;
    right: 5%;
    background: white;
    padding: 18px;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    z-index: 20;
  }

  .designer-box {
    grid-template-columns: 1fr;
  }
}

/* Phase 1 gallery + social proof polish */
.badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--purple);
  font-weight: 900;
  font-size: 13px;
}

.social-row, .stars {
  margin: 8px 0;
  font-size: 14px;
  font-weight: 800;
}

.stars span {
  opacity: .72;
  font-weight: 700;
}

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 24px 0 6px;
}

.filter-btn {
  background: white;
  color: var(--purple);
  border: 2px solid var(--soft);
  padding: 10px 14px;
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--purple);
  color: white;
}

.gallery-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  text-align: left;
}

.gallery-image {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  background: white;
}

.gallery-info {
  padding: 20px;
}

.gallery-info h3 {
  margin: 0 0 8px;
  color: var(--purple);
}

.gallery-info p {
  opacity: .78;
  min-height: 48px;
}

.gallery-info button {
  width: 100%;
  margin-top: 14px;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.secondary-btn {
  background: white;
  color: var(--purple);
  border: 2px solid var(--purple);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.small-note {
  font-size: 14px;
  opacity: .75;
}

.fb-modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(47,36,58,.45);
  z-index: 100;
}

.fb-modal.open {
  display: grid;
}

.fb-modal-card {
  width: min(460px, 94vw);
  background: white;
  border-radius: 26px;
  padding: 28px;
  text-align: center;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}

.fb-modal-card h2 {
  color: var(--purple);
  margin-top: 0;
}

.fb-modal-card p {
  line-height: 1.55;
}

@media (max-width: 480px) {
  .gallery-image { height: 210px; }
  .contact-actions a { width: 100%; }
}


/* Pretty Phase 1 polish - code only, no new photos needed */
body {
  background: linear-gradient(180deg, #fff 0%, #fbf7ff 42%, #fff 100%);
}

.header {
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.92);
}

.logo::before { content: "🦋 "; }
.logo::after { content: " 💗"; }

.product-grid, .gallery-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  align-items: stretch;
}

.product-card, .gallery-card {
  position: relative;
  border: 1px solid rgba(123,75,179,.10);
  box-shadow: 0 14px 34px rgba(80, 50, 120, .12);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.product-card:hover, .gallery-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(80, 50, 120, .18);
  border-color: rgba(123,75,179,.22);
}

.product-card .product-image, .gallery-image {
  border-radius: 20px;
  height: 220px !important;
  object-fit: cover;
  background: #fff;
  padding: 6px;
}

.gallery-card {
  padding: 14px;
  overflow: hidden;
}

.gallery-info {
  display: block !important;
  place-items: initial !important;
  font-size: 16px !important;
  padding: 16px 4px 4px;
}

.gallery-info h3, .product-card h3 {
  color: var(--purple);
  font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 8px 0 10px;
  min-height: 2.3em;
  overflow-wrap: anywhere;
}

.gallery-info p, .product-card p {
  font-size: .95rem;
  line-height: 1.45;
  min-height: 64px;
}

.stars {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #fff8e6;
  color: #805a00;
  font-size: .88rem !important;
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: #5d4b68;
  font-size: .9rem !important;
}

.badge {
  box-shadow: inset 0 0 0 1px rgba(123,75,179,.10);
}

.filter-btn {
  box-shadow: 0 8px 18px rgba(123,75,179,.08);
  transition: transform .18s ease, background .18s ease;
}

.filter-btn:hover {
  transform: translateY(-2px);
}

.gallery-info strong, .product-card strong {
  display: inline-block;
  margin-top: 8px;
  color: var(--dark);
  font-size: 1.08rem;
}

.gallery-info button, .product-card button {
  box-shadow: 0 10px 18px rgba(123,75,179,.18);
}

.product-variant-field {
  display: grid;
  gap: 8px;
  margin: 14px 0 12px;
  color: var(--dark);
  font-weight: 800;
  text-align: left;
}

.product-variant-field span {
  font-size: .86rem;
  color: #5d4b68;
}

.product-variant-select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(123, 75, 179, .2);
  border-radius: 14px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .94);
  color: var(--dark);
  font: inherit;
}

.product-variant-select:focus-visible {
  outline: 3px solid rgba(212, 175, 55, .55);
  outline-offset: 2px;
}

.product-card button:disabled,
.gallery-info button:disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}

.variant-product-image,
.gallery-image.variant-product-image,
.cart-item-image.focus-fish,
.cart-item-image.focus-crab,
.cart-item-image.focus-penguin {
  object-fit: cover;
}

.focus-fish {
  object-position: 14% center;
}

.focus-penguin {
  object-position: 50% center;
}

.focus-crab {
  object-position: 86% center;
}

.contact-card {
  max-width: 760px;
  margin: 22px auto 0;
  background: white;
  border-radius: 28px;
  padding: 26px;
  box-shadow: 0 16px 36px rgba(80,50,120,.12);
  border: 1px solid rgba(123,75,179,.10);
}

.copy-box {
  margin-top: 16px;
  padding: 14px;
  border-radius: 18px;
  background: var(--soft);
  color: var(--purple);
  font-weight: 800;
  word-break: break-word;
}

@media (max-width: 780px) {
  .product-grid, .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .product-card, .gallery-card { padding: 10px; }
  .product-card .product-image, .gallery-image { height: 175px !important; }
  .gallery-info h3, .product-card h3 { font-size: 1.1rem !important; }
}

@media (max-width: 520px) {
  .product-grid, .gallery-grid { grid-template-columns: 1fr; }
  .product-card .product-image, .gallery-image { height: 230px !important; }
}


/* Live customer colour preview */
.live-preview-wrap {
  display: grid;
  place-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.preview-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(123,75,179,.10);
  color: var(--purple);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.live-design-preview {
  --preview-cols: 7;
  --preview-rows: 7;
  display: grid;
  grid-template-columns: repeat(var(--preview-cols), 22px);
  grid-template-rows: repeat(var(--preview-rows), 22px);
  gap: 5px;
  justify-content: center;
  align-content: center;
  min-height: 210px;
  width: min(100%, 300px);
  margin: 0 auto;
  padding: 18px;
  border-radius: 28px;
  background: radial-gradient(circle at top left, #fff 0%, #f8f1ff 46%, #fff6df 100%);
  border: 1px solid rgba(123,75,179,.13);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.65), 0 16px 34px rgba(80,50,120,.10);
}

.bead {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bead, var(--purple));
  border: 1px solid rgba(47,36,58,.14);
  box-shadow:
    inset -4px -5px 7px rgba(0,0,0,.18),
    inset 4px 4px 7px rgba(255,255,255,.7),
    0 4px 8px rgba(80,50,120,.14);
}

.bead.empty {
  opacity: 0;
  box-shadow: none;
  border: none;
}

.preview h3 {
  margin-top: 8px;
}

.preview::after {
  content: "Live colour preview — final handmade design may vary slightly 💜";
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: #6a5878;
  text-align: center;
}

@media (max-width: 520px) {
  .live-design-preview {
    grid-template-columns: repeat(var(--preview-cols), 18px);
    grid-template-rows: repeat(var(--preview-rows), 18px);
    gap: 4px;
    min-height: 180px;
  }
  .bead { width: 18px; height: 18px; }
}

/* Final gallery fix: show full photos instead of giant cropped strips */
.gallery-grid {
  align-items: stretch;
}

.gallery-card {
  display: flex;
  flex-direction: column;
}

.gallery-image {
  width: 100% !important;
  height: 230px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #fff !important;
  border-radius: 18px !important;
  padding: 8px !important;
}

.product-card .product-image {
  object-fit: contain !important;
  object-position: center !important;
}

.gallery-info {
  flex: 1;
}

@media (max-width: 780px) {
  .gallery-image,
  .product-card .product-image {
    height: 190px !important;
  }
}

.gallery-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow: hidden;
}

.gallery-modal.open {
  display: flex;
}

.gallery-image-wrap{
  max-width: 88vw;
  max-height: 88vh;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-modal-img {
  max-width: 88vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 16px;
  background: white;
  padding: 10px;
  transition: transform 0.25s ease;
}

.gallery-modal-img.zoomed{
  transform: scale(1.8) !important;
  cursor: zoom-out;
}

.gallery-image-wrap{
  overflow: auto;
}

.gallery-close, .gallery-zoom, .gallery-nav{
  position: absolute;
  border: none;
  background: rgba(255,255,255,0.9);
  color: #2f243a;
  cursor: pointer;
  font-weight: bold;
  border-radius: 999px;
  z-index: 10000;
}

.gallery-close {
  top: 18px;
  right: 24px;
  font-size: 30px;
  width: 48px;
  height: 48px;
}

.gallery-prev{
  left: 24px;
}

.gallery-next{
  right: 24px;
}

.gallery-modal-img.zoomed{
  transform: scale(1.8) !important;
  cursor: zoom-out;
}

.gallery-image-wrap{
  overflow: auto;
}

/* Forever Beaded final fixes: cleaner header, mobile layout, and working gallery modal */
.header {
  z-index: 50;
}

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 18%, rgba(214,168,79,.24), transparent 28%),
    radial-gradient(circle at 84% 20%, rgba(123,75,179,.18), transparent 25%),
    linear-gradient(135deg, #f4edff 0%, #fff6df 58%, #ffffff 100%);
}

.hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(123,75,179,.08);
  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.cart-item button,
.remove-btn {
  padding: 9px 14px;
  font-size: 14px;
}

.gallery-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0,0,0,.92);
  justify-content: center;
  align-items: center;
  padding: 72px 76px 34px;
  overflow: hidden;
}

.gallery-modal.open {
  display: flex;
}

.gallery-image-wrap {
  width: min(100%, 1100px);
  height: min(100%, 82vh);
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-overflow-scrolling: touch;
}

.gallery-modal-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  background: white;
  padding: 10px;
  transition: transform .22s ease;
  transform-origin: center center;
  cursor: zoom-in;
}

.gallery-modal-img.zoomed {
  max-width: none;
  max-height: none;
  transform: scale(1.8) !important;
  cursor: zoom-out;
}

.gallery-close,
.gallery-zoom,
.gallery-nav {
  position: absolute;
  border: none;
  background: rgba(255,255,255,.95);
  color: #2f243a;
  cursor: pointer;
  font-weight: 900;
  border-radius: 999px;
  z-index: 10000;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.gallery-close {
  top: 18px;
  right: 22px;
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 32px;
  line-height: 48px;
}

.gallery-zoom {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 18px;
}

.gallery-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 42px;
  line-height: 1;
}

.gallery-prev { left: 18px; }
.gallery-next { right: 18px; }

body.gallery-open {
  overflow: hidden;
}

.gallery-image,
.product-image {
  cursor: zoom-in;
}

@media (max-width: 780px) {
  .hero {
    min-height: auto;
    padding: 72px 6% 56px;
  }

  .hero p {
    font-size: 18px;
  }

  .section {
    padding: 48px 5%;
  }

  .section h2 {
    font-size: 30px;
  }

  nav.open {
    max-height: calc(100vh - 84px);
    overflow-y: auto;
  }

  nav.open a,
  nav.open .cart-btn {
    width: 100%;
    text-align: center;
  }

  .gallery-modal {
    padding: 74px 12px 82px;
  }

  .gallery-image-wrap {
    height: 72vh;
    align-items: center;
  }

  .gallery-nav {
    top: auto;
    bottom: 18px;
    transform: none;
    width: 50px;
    height: 50px;
    font-size: 36px;
  }

  .gallery-prev { left: 22%; }
  .gallery-next { right: 22%; }

  .gallery-zoom {
    top: auto;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 14px;
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .logo {
    font-size: 19px;
  }

  .cart-panel {
    width: 100vw;
  }

  .gallery-prev { left: 10px; }
  .gallery-next { right: 10px; }
}


/* Business-card inspired homepage hero */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:wght@600;700&display=swap');

.brand-hero {
  position: relative;
  min-height: 78vh;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr);
  align-items: center;
  gap: 44px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(214, 168, 79, .24), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(123, 75, 179, .18), transparent 30%),
    linear-gradient(135deg, #fbf6ff 0%, #fff9ec 52%, #f4edff 100%);
}

.brand-hero::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1.5px solid rgba(214, 168, 79, .45);
  border-radius: 34px;
  pointer-events: none;
}

.hero-copy,
.hero-showcase {
  position: relative;
  z-index: 1;
}

.brand-title,
.logo {
  font-family: 'Great Vibes', 'Brush Script MT', cursive;
  font-weight: 400;
}

.logo {
  font-size: 34px;
  letter-spacing: .3px;
}

.brand-title {
  font-size: clamp(70px, 11vw, 138px);
  line-height: .85;
  color: var(--purple);
  text-shadow: 0 3px 0 rgba(214, 168, 79, .18);
  margin: 12px 0 10px;
}

.brand-tagline {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--gold);
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 700;
  margin: 0 0 14px;
}

.hero-description {
  font-size: 20px;
  line-height: 1.6;
  max-width: 620px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.secondary-btn {
  background: white;
  color: var(--purple);
  border: 2px solid rgba(123, 75, 179, .28);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 10px 22px rgba(47, 36, 58, .08);
}

.hero-showcase {
  min-height: 420px;
  display: grid;
  place-items: center;
}

.hero-card-main {
  width: min(420px, 88vw);
  aspect-ratio: 4 / 5;
  border-radius: 42px;
  padding: 14px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 26px 70px rgba(47, 36, 58, .18);
  border: 1px solid rgba(214, 168, 79, .38);
  transform: rotate(2deg);
}

.hero-card-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
  display: block;
}

.hero-mini-card {
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: white;
  box-shadow: 0 18px 38px rgba(47, 36, 58, .16);
  font-size: 38px;
  border: 1px solid rgba(214, 168, 79, .35);
}

.hero-mini-card.top {
  top: 36px;
  right: 12%;
  transform: rotate(11deg);
}

.hero-mini-card.bottom {
  bottom: 44px;
  left: 8%;
  transform: rotate(-9deg);
}

@media (max-width: 860px) {
  .brand-hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 64px 6% 50px;
  }

  .brand-hero::before {
    inset: 16px;
    border-radius: 26px;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-showcase {
    min-height: 330px;
  }

  .hero-card-main {
    width: min(330px, 86vw);
  }
}

@media (max-width: 480px) {
  .logo { font-size: 29px; }
  .brand-title { font-size: clamp(58px, 19vw, 82px); }
  .brand-tagline { font-size: 18px; }
  .hero-mini-card { width: 62px; height: 62px; font-size: 30px; border-radius: 20px; }
}



/* Boutique homepage sections */
html { scroll-behavior: smooth; }

.section-intro {
  max-width: 760px;
  margin: 0 auto 26px;
  font-size: 18px;
  line-height: 1.65;
  color: #5d4b68;
}

.brand-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 22px 8%;
  background: #fff;
  box-shadow: 0 10px 30px rgba(80, 50, 120, .08);
  position: relative;
  z-index: 2;
}

.brand-strip div {
  display: grid;
  gap: 4px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff, #fbf5ff);
  border: 1px solid rgba(123,75,179,.10);
}

.brand-strip strong {
  color: var(--purple);
  font-size: 16px;
}

.brand-strip span {
  color: #6a5878;
  font-size: 14px;
}

.boutique-section {
  background: linear-gradient(180deg, #fff, #fbf7ff);
}

.feature-grid,
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}

.feature-card,
.review-card {
  background: #fff;
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 16px 36px rgba(80,50,120,.12);
  border: 1px solid rgba(123,75,179,.10);
}

.feature-card span {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--soft);
  font-size: 28px;
}

.feature-card h3,
.review-card strong {
  color: var(--purple);
}

.feature-card p,
.review-card p,
.maker-copy p {
  line-height: 1.65;
  color: #5d4b68;
}

.maker-section {
  padding: 100px 8%;
  background: #fff;
}

.maker-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:380px 1fr;
  gap: 70px;
  align-items: center;
}

.maker-image img{
  width: 100px;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
}

.maker-tag{
  color:#b8868b;
  letter-spacing: 3px;
  font-width:700;
  font-size: clamp(2rem, 5vw, 4rem);
}

.maker-content h2{
  font-size:3rem;
  color:36b4ca5;
  margin:18px 0;
}

.script-name{
  font-family: 'Great Vibes', cursive;
  color: var(--purple);
  font-size: 1.15em;
}

.maker-content p{
  color:#555;
  line-height:1.9;
  font-size:1.08rem;
  margin-bottom:18px;
}

.btn-primary{
  display:inline-block;
  background: #6b4ca5;
  color:#fff;
  padding:15px 34px;
  border-radius:40px;
  text-decoration:none;
  transition:.3s;
}

.btn-primary:hover{
  background:3573a90;
  transform:translateY(-2px);
}

@media(max-width:900px){
  .maker-container{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .maker-image{
    max-width: 320px;
    margin:auto;
  }

  .maker-content h2{
    font-size:2.2rem;
  }
}

.review-stars {
  color: #805a00;
  background: #fff8e6;
  border-radius: 999px;
  display: inline-block;
  padding: 8px 12px;
  font-weight: 900;
  margin-bottom: 12px;
}

.custom-cta {
  margin: 24px 8% 0;
  padding: 34px;
  border-radius: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: radial-gradient(circle at top left, #fff6df 0%, #f4edff 48%, #fff 100%);
  border: 1px solid rgba(123,75,179,.14);
  box-shadow: 0 18px 44px rgba(80,50,120,.12);
}

.custom-cta h2 {
  margin: 4px 0 0;
  max-width: 760px;
}

@media (max-width: 900px) {
  .brand-strip,
  .feature-grid,
  .review-grid,
  .maker-section {
    grid-template-columns: 1fr 1fr;
  }
  .custom-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .brand-strip,
  .feature-grid,
  .review-grid,
  .maker-section {
    grid-template-columns: 1fr;
  }
  .brand-strip { padding: 16px 5%; }
  .section { padding: 48px 5%; }
  .custom-cta { margin: 18px 5% 0; padding: 24px; }
  .maker-photo img { min-height: 240px; }
}

/* Search + category filters */
.shop-tools {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 1.4fr;
  gap: 18px;
  align-items: start;
  margin: 22px auto 12px;
  max-width: 1120px;
}

.search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid rgba(123,75,179,.18);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(80,50,120,.10);
}

.search-wrap input {
  width: 100%;
  border: 0;
  outline: 0;
  font: inherit;
  background: transparent;
  color: var(--text);
}

.shop-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.shop-results-row {
  max-width: 1120px;
  margin: 0 auto 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  color: #6d5879;
}

.tiny-link-btn {
  border: 0;
  background: transparent;
  color: var(--purple);
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
}

.no-results-card {
  grid-column: 1 / -1;
  max-width: 620px;
  margin: 10px auto;
  padding: 34px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(80,50,120,.12);
  border: 1px solid rgba(123,75,179,.12);
}

@media (max-width: 820px) {
  .shop-tools {
    grid-template-columns: 1fr;
  }
  .shop-results-row {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}


/* Birthday Launch polish: soft boutique, mobile-friendly, no fake-review feel */
:root{
  --cream:#fffaf1;
  --blush:#ffeef5;
  --sage:#e8f3e8;
  --lavender:#f2e9ff;
  --ink:#2f243a;
}

body{
  background:
    radial-gradient(circle at 10% 0%, rgba(255,238,245,.75), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(232,243,232,.85), transparent 30%),
    linear-gradient(180deg, var(--cream), #fff 45%, #fbf7ff);
}

.header{ border-bottom:1px solid rgba(123,75,179,.10); }
nav a:hover{ color:var(--purple); }

.maker-image img{ width:min(320px, 86vw) !important; }
.maker-tag{ font-weight:700 !important; font-size:.78rem !important; }
.maker-content h2{ color:var(--purple) !important; }
.btn-primary:hover{ background:#57368f !important; }

.collections-section{ background:linear-gradient(180deg,#fff,#fff9ec); }
.collection-grid{
  max-width:1050px;
  margin:28px auto 0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
.collection-grid a{
  min-height:118px;
  display:grid;
  place-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--purple);
  background:white;
  border:1px solid rgba(123,75,179,.12);
  border-radius:26px;
  box-shadow:0 14px 30px rgba(80,50,120,.10);
  font-size:34px;
  transition:.2s ease;
}
.collection-grid a span{ font-size:15px; font-weight:900; color:var(--ink); }
.collection-grid a:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(80,50,120,.16); }

.review-form{
  max-width:720px;
  margin:26px auto;
  text-align:left;
  grid-template-columns:1fr 180px;
  align-items:end;
}
.review-form label:nth-child(3){ grid-column:1 / -1; }
.review-form textarea{
  width:100%;
  min-height:110px;
  resize:vertical;
  padding:13px;
  border-radius:12px;
  border:1px solid #d9d1e8;
  font:inherit;
}
.review-card.empty-review{ grid-column:1/-1; max-width:700px; margin:auto; }

.product-card::after,
.gallery-card::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:22px;
  border:1px dashed rgba(214,168,79,.22);
  pointer-events:none;
}

.site-footer{
  margin-top:28px;
  padding:46px 8% 34px;
  text-align:center;
  background:linear-gradient(135deg,#f4edff,#fff9ec);
  border-top:1px solid rgba(123,75,179,.12);
}
.site-footer h2{
  font-family:'Great Vibes','Brush Script MT',cursive;
  font-weight:400;
  font-size:54px;
  color:var(--purple);
  margin:6px 0;
}

.site-footer-links {
  margin-top: 16px;
}

.site-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(131, 85, 35, .22);
  border-radius: 999px;
  color: var(--purple);
  background: rgba(255, 255, 255, .54);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(91, 55, 125, .1);
}

.site-footer-links a:focus-visible {
  outline: 3px solid rgba(214, 168, 79, .72);
  outline-offset: 3px;
}

.footer-flourish{
  width:min(440px,84vw);
  margin:0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--gold);
}
.footer-flourish::before,
.footer-flourish::after{
  content:"";
  height:34px;
  flex:1;
  border-bottom:2px solid rgba(214,168,79,.55);
  border-radius:0 0 70% 70%;
}
.footer-small{ opacity:.7; font-size:14px; }
.back-to-top{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9000;
  min-height:44px;
  padding:0 18px;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(212,175,55,.72);
  border-radius:999px;
  background:rgba(48,25,55,.94);
  color:#f8ead0;
  font-weight:800;
  box-shadow:0 12px 28px rgba(47,36,58,.24);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease, background .22s ease;
  pointer-events:none;
}
.back-to-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.back-to-top:hover,
.back-to-top:focus-visible{
  background:#d4af37;
  color:#1f1026;
  outline:3px solid rgba(248,234,208,.75);
  outline-offset:3px;
}

@media(max-width:900px){
  .collection-grid{ grid-template-columns:repeat(3,1fr); }
  .review-form{ grid-template-columns:1fr; }
}
@media(max-width:560px){
  .brand-strip{ grid-template-columns:1fr 1fr; }
  .collection-grid{ grid-template-columns:repeat(2,1fr); }
  .collection-grid a{ min-height:96px; font-size:30px; }
  .hero-actions a{ width:100%; text-align:center; }
  .maker-section{ padding:56px 5%; }
  .maker-container{ gap:28px; }
  .feature-card,.review-card{ padding:22px; }
  .back-to-top{
    right:14px;
    bottom:14px;
    min-height:44px;
    padding:0 13px;
    font-size:13px;
  }
}


/* E-transfer checkout polish */
.cart-payment-note,
.payment-pill {
  background: #fff8e6;
  border: 1px solid rgba(214,168,79,.35);
  color: #5d4215;
  border-radius: 18px;
  padding: 12px 14px;
  font-weight: 800;
  line-height: 1.35;
}
.payment-pill {
  display: inline-block;
  margin: 10px auto 4px;
}
.checkout-btn::before { content: "🏦 "; }

/* Make image modal controls sturdier on phones */
.gallery-modal.open { display: grid !important; }
.gallery-nav,
.gallery-close,
.gallery-zoom {
  z-index: 120;
  touch-action: manipulation;
}
.gallery-modal-img.zoomed {
  max-width: none;
  max-height: none;
  width: min(1400px, 160vw);
  cursor: zoom-out;
}

@media (max-width: 780px) {
  .hero { min-height: auto; padding: 54px 6%; }
  .hero-actions { display: grid; gap: 10px; }
  .hero-actions a { text-align: center; }
  .brand-strip { grid-template-columns: 1fr 1fr; }
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid, .gallery-grid { grid-template-columns: 1fr !important; }
  .product-card .product-image, .gallery-image { height: 260px !important; }
  .cart-panel { width: min(390px, 94vw); }
}

@media (max-width: 480px) {
  .brand-strip, .collection-grid { grid-template-columns: 1fr; }
  .product-card .product-image, .gallery-image { height: 230px !important; }
  .gallery-nav { width: 44px; height: 44px; font-size: 34px; }
  .gallery-prev { left: 8px; }
  .gallery-next { right: 8px; }
}



/* =========================================================
   Forever Beaded — Cinematic Asset Build
   Uses real SVG assets: book, butterflies, flowers.
========================================================= */

:root{
  --night:#05020a;
  --deep:#13071e;
  --plum:#2a1240;
  --royal:#4e237a;
  --berry:#b93b86;
  --gold:#d8ad5a;
  --gold-light:#ffe2a2;
  --ink:#25112f;
  --cream:#fff7ee;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.fb-cinematic{
  margin:0;
  overflow-x:hidden;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#fff;
  background:
    radial-gradient(circle at 20% 5%,rgba(185,59,134,.18),transparent 30%),
    radial-gradient(circle at 85% 0%,rgba(216,173,90,.16),transparent 28%),
    linear-gradient(180deg,#05020a 0%,#1a0b28 45%,#2a1240 100%);
}

/* Opening scene */
.opening-scene{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,222,150,.27),transparent 22%),
    radial-gradient(circle at 32% 24%,rgba(185,59,134,.22),transparent 25%),
    linear-gradient(135deg,#05020a,#211031 56%,#3b1c58);
  animation:openingExit 1s ease 8.2s forwards;
}
.opening-scene.skip{display:none}
.scene-glow{
  display:none;
}
.book-stage{
  position:relative;
  width:min(760px,86vw);
  aspect-ratio:1100/720;
  filter:drop-shadow(0 48px 90px rgba(0,0,0,.65));
}
.book-cover-art,.book-open-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}
.book-cover-art{
  transform-origin:left center;
  animation:coverVanish 3.3s cubic-bezier(.2,.85,.2,1) 3s forwards;
}
.book-open-art{
  opacity:0;
  transform:scale(.96);
  animation:openBookAppear 3s ease 3.3s forwards;
}
.book-light{
  position:absolute;
  left:50%;top:8%;
  width:22px;height:84%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(255,222,150,.95),transparent);
  opacity:0;
  filter:blur(14px);
  animation:lightEscape 3.3s ease 3.1s forwards;
}
.skip-opening{
  position:absolute;
  bottom:34px;
  border:1px solid rgba(216,173,90,.5);
  border-radius:999px;
  padding:12px 22px;
  background:rgba(5,2,10,.68);
  color:white;
  font-weight:800;
}

/* Butterflies */
.intro-butterfly,.movie-butterfly{
  display:none;
}
.intro-b1{left:8vw;top:22vh;animation:introFly1 3.6s ease forwards}
.intro-b2{right:9vw;top:28vh;animation:introFly2 3.8s ease .4s forwards}
.intro-b3{left:48vw;bottom:16vh;animation:introFly3 3.4s ease .65s forwards}

.cinematic-header{
  position:sticky;top:0;z-index:100;
  min-height:74px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 6vw;
  background:rgba(5,2,10,.78);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(216,173,90,.24);
}
.brand-mark{
  color:var(--gold-light);
  font-family:Georgia,serif;
  font-size:1.6rem;
  text-decoration:none;
}
.cinematic-header nav{display:flex;gap:22px}
.cinematic-header nav a,.cart-pill{
  color:#fff;text-decoration:none;font-weight:800;font-size:.92rem;
}
.cart-pill{padding:10px 18px;border-radius:999px;background:linear-gradient(135deg,var(--berry),var(--royal))}

/* Living hero */
.living-hero{
  position:relative;
  min-height:calc(100vh - 74px);
  display:grid;
  grid-template-columns:1.05fr .72fr;
  align-items:center;
  gap:44px;
  overflow:hidden;
  padding:7vw 6vw 6vw;
}
.sky-layer{
  position:absolute;inset:0;z-index:-4;
  background:
    radial-gradient(circle at 50% 86%,rgba(255,164,88,.42),transparent 18%),
    radial-gradient(circle at 78% 18%,rgba(255,223,148,.14),transparent 18%),
    linear-gradient(180deg,#070310 0%,#25103a 48%,#5b235f 72%,#d2785d 100%);
  animation:timeCycle 48s ease-in-out infinite alternate;
}
.mist-layer{
  position:absolute;inset:0;z-index:-3;
  background:radial-gradient(ellipse at 50% 92%,rgba(255,255,255,.14),transparent 48%);
  filter:blur(10px);
}
.particle-layer{
  display:none;
}
.hero-text{
  z-index:5;
  max-width:760px;
}
.chapter-label{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:950;
  font-size:.8rem;
}
.hero-text h1{
  margin:.16em 0;
  color:var(--gold-light);
  font-family:Georgia,serif;
  font-size:clamp(3.2rem,8vw,7.8rem);
  line-height:.92;
  text-shadow:0 18px 58px rgba(0,0,0,.55);
}
.hero-text p,.chapter-panel p{
  color:rgba(255,255,255,.86);
  font-size:1.08rem;
  line-height:1.8;
}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.luxury-button,.quiet-button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;
  border-radius:999px;
  padding:14px 24px;
  text-decoration:none;
  font-weight:950;
  transition:transform .24s ease,box-shadow .24s ease;
}
.luxury-button{background:linear-gradient(135deg,#ffe2a2,var(--gold));color:#211025;box-shadow:0 18px 38px rgba(216,173,90,.3)}
.quiet-button{color:#fff;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08)}
.luxury-button:hover,.quiet-button:hover{transform:translateY(-4px)}
.luxury-button.small{min-height:40px;padding:10px 18px;font-size:.9rem}

/* Flowers */
.garden-flower{
  position:absolute;
  width:150px;
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.45));
  animation:flowerSway 6s ease-in-out infinite;
}
.flower-1{left:3vw;bottom:5vh}
.flower-2{left:24vw;bottom:-1vh;width:118px;animation-delay:.8s}
.flower-3{right:27vw;bottom:2vh;width:130px;animation-delay:1.2s}
.flower-4{right:5vw;bottom:5vh;width:160px;animation-delay:1.6s}

/* Butterfly paths */
.fly-1{animation:flyPath1 24s ease-in-out infinite}
.fly-2{animation:flyPath2 28s ease-in-out infinite}
.fly-3{animation:flyPath3 32s ease-in-out infinite}
.fly-4{animation:flyPath4 36s ease-in-out infinite}

/* Prized card */
.prized-card{
  z-index:6;
  padding:30px;
  text-align:center;
  border:1px solid rgba(216,173,90,.48);
  border-radius:36px;
  background:rgba(13,6,22,.78);
  box-shadow:0 34px 85px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
}
.prized-card img{
  width:min(250px,72%);
  aspect-ratio:1;
  object-fit:contain;
  background:#fff;
  border-radius:28px;
  padding:10px;
}
.prized-card h2,.exclusive-card h2,.exclusive-card h3{
  color:var(--gold-light);
  font-family:Georgia,serif;
}
.prized-card h2{font-size:2.7rem;margin:14px 0 4px}

/* Panels */
.chapter-panel{
  width:min(1180px,92%);
  margin:72px auto;
  padding:52px;
  border-radius:38px;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
}
.chapter-panel h2{
  margin:.1em 0;
  color:var(--gold-light);
  text-align:center;
  font-family:Georgia,serif;
  font-size:clamp(2.2rem,5vw,4rem);
}
.panel-copy{text-align:center;max-width:760px;margin:0 auto 30px}
.treasure-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:22px;
}
.treasure-grid a{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:18px;
  border-radius:30px;
  border:1px solid rgba(216,173,90,.28);
  background:linear-gradient(180deg,#fff8fb,#f0d5e7);
  color:var(--ink);
  text-decoration:none;
  font-weight:900;
  box-shadow:0 26px 56px rgba(0,0,0,.28);
  transition:.24s ease;
}
.treasure-grid a:hover{transform:translateY(-8px);box-shadow:0 36px 76px rgba(0,0,0,.4)}
.treasure-grid img{width:110px;height:110px;object-fit:cover;border-radius:24px;margin-bottom:12px}
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:34px}
.split h2{text-align:left}
.bead-jewel{
  min-height:280px;
  display:grid;
  grid-template-columns:repeat(3,58px);
  gap:16px;
  place-content:center;
  border-radius:34px;
  border:1px solid rgba(216,173,90,.32);
  background:rgba(255,255,255,.08);
}
.bead-jewel span{
  width:58px;height:58px;border-radius:50%;
  box-shadow:inset -8px -8px 12px rgba(0,0,0,.25),inset 8px 8px 10px rgba(255,255,255,.25);
  background:var(--berry);
}
.bead-jewel span:nth-child(2){background:#2da6b7}.bead-jewel span:nth-child(3){background:#f2ba4b}.bead-jewel span:nth-child(4){background:#8fd06b}.bead-jewel span:nth-child(5){background:#a35be2}.bead-jewel span:nth-child(6){background:#ff6f75}
.bead-jewel small{grid-column:1/-1;text-align:center;color:var(--gold-light);font-weight:900}

/* Popup */
.exclusive-popup{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(5,2,10,.78);z-index:9999;padding:20px}
.exclusive-popup.open{display:flex}
.exclusive-card{width:min(460px,92vw);padding:32px;text-align:center;border:1px solid rgba(216,173,90,.55);border-radius:36px;background:linear-gradient(145deg,#1a082b,#4d2072);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.exclusive-close{float:right;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:white;font-size:24px;cursor:pointer}
.exclusive-card img{width:210px;height:210px;object-fit:contain;background:white;border-radius:26px;padding:10px}
.cinematic-footer{text-align:center;padding:44px;color:rgba(255,255,255,.72)}
.fb-heart{position:fixed;top:-26px;z-index:70;pointer-events:none;color:rgba(255,214,235,.75);animation:heartFall linear forwards}
img{user-select:none;-webkit-user-drag:none}

/* Animations */
@keyframes openingExit{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes driftStars{to{background-position:140px 90px,-100px 130px}}
@keyframes coverVanish{0%{transform:rotateY(0) scale(1);opacity:1}65%{transform:rotateY(-105deg) scale(1)}100%{transform:rotateY(-120deg) scale(.9);opacity:0}}
@keyframes openBookAppear{0%{opacity:0;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
@keyframes lightEscape{0%{opacity:0;transform:translateX(-50%) scaleY(.2)}50%{opacity:1;transform:translateX(-50%) scaleY(1.2)}100%{opacity:.2}}
@keyframes introFly1{to{left:26vw;top:33vh;transform:rotate(8deg) scale(.9)}}@keyframes introFly2{to{right:28vw;top:35vh;transform:rotate(-10deg) scale(.92)}}@keyframes introFly3{to{left:49vw;bottom:44vh;transform:rotate(6deg) scale(.88)}}
@keyframes timeCycle{0%{filter:hue-rotate(-14deg) brightness(.8)}45%{filter:hue-rotate(8deg) brightness(1.06)}100%{filter:hue-rotate(42deg) brightness(.62)}}
@keyframes particleMove{to{background-position:120px 80px}}
@keyframes flowerSway{0%,100%{transform:translateX(0) rotate(-2deg)}50%{transform:translateX(14px) rotate(3deg)}}
@keyframes flyPath1{0%{left:5vw;top:28vh}22%{left:20vw;top:60vh}48%{left:48vw;top:34vh}72%{left:72vw;top:58vh}100%{left:5vw;top:28vh}}
@keyframes flyPath2{0%{left:82vw;top:22vh}30%{left:66vw;top:55vh}55%{left:34vw;top:18vh}80%{left:14vw;top:54vh}100%{left:82vw;top:22vh}}
@keyframes flyPath3{0%{left:35vw;top:72vh}35%{left:58vw;top:20vh}70%{left:78vw;top:72vh}100%{left:35vw;top:72vh}}
@keyframes flyPath4{0%{left:12vw;top:16vh}40%{left:42vw;top:44vh}70%{left:88vw;top:30vh}100%{left:12vw;top:16vh}}
@keyframes heartFall{0%{opacity:0;transform:translateY(-20px) translateX(0)}15%{opacity:1}100%{opacity:0;transform:translateY(105vh) translateX(70px) rotate(35deg)}}

@media(max-width:900px){
  .cinematic-header{height:auto;flex-wrap:wrap;gap:12px;padding:16px 5vw}
  .cinematic-header nav{order:3;width:100%;overflow-x:auto;gap:16px}
  .living-hero{grid-template-columns:1fr;padding:90px 5vw 54px}
  .hero-text h1{font-size:clamp(3rem,15vw,5rem)}
  .book-stage{width:88vw}
  .intro-butterfly,.movie-butterfly{width:60px}
  .garden-flower{width:100px}
  .split{grid-template-columns:1fr}
  .chapter-panel{padding:32px 18px}
  .treasure-grid{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .opening-scene,.intro-butterfly,.movie-butterfly,.garden-flower,.fb-heart{display:none!important}
  *{animation:none!important;transition:none!important}
}



/* =========================================================
   Forever Beaded — Heirloom Book Upgrade + Journey End
========================================================= */

.book-stage{
  width:min(860px,88vw) !important;
  aspect-ratio:1300/820 !important;
}

.book-cover-art{
  animation:heirloomCoverOpen 3.8s cubic-bezier(.17,.86,.2,1) 3s forwards !important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.46));
}

.book-open-art{
  transform:scale(.9) translateY(12px);
  animation:heirloomPagesArrive 3.2s ease 3.35s forwards !important;
}

.book-light{
  width:30px !important;
  filter:blur(20px) !important;
  animation:heirloomLight 3.8s ease 3.1s forwards !important;
}

.opening-scene::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:28vh;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(50,25,8,.72), transparent 70%),
    linear-gradient(180deg, transparent, rgba(5,2,10,.72));
  pointer-events:none;
}

@keyframes heirloomCoverOpen{
  0%{transform:rotateY(0) translateX(0) scale(1);opacity:1}
  45%{transform:rotateY(-48deg) translateX(-2%) scale(1.01);opacity:1}
  76%{transform:rotateY(-108deg) translateX(-7%) scale(.98);opacity:.94}
  100%{transform:rotateY(-124deg) translateX(-12%) scale(.92);opacity:0}
}

@keyframes heirloomPagesArrive{
  0%{opacity:0;transform:scale(.84) translateY(24px)}
  42%{opacity:1;transform:scale(.98) translateY(0)}
  68%{opacity:1;transform:scale(1.015) translateY(-4px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

@keyframes heirloomLight{
  0%{opacity:0;transform:translateX(-50%) scaleY(.16)}
  36%{opacity:1;transform:translateX(-50%) scaleY(1.35)}
  70%{opacity:.72;transform:translateX(-50%) scaleY(1)}
  100%{opacity:.22;transform:translateX(-50%) scaleY(.86)}
}

/* Ending signpost for Etsy/socials */
.journey-end{
  text-align:center;
  position:relative;
  overflow:hidden;
}

.journey-end::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-40px;
  width:18px;
  height:180px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#2a1408,#7b4a24,#2a1408);
  border-radius:12px;
  box-shadow:0 18px 30px rgba(0,0,0,.35);
}

.signpost-links{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:18px;
  margin-top:30px;
}

.wood-sign{
  display:flex;
  min-height:112px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  color:#fff1cf;
  border:1px solid rgba(216,173,90,.45);
  border-radius:22px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 35%, rgba(255,255,255,.08) 50%, transparent 75%, rgba(0,0,0,.2)),
    linear-gradient(135deg,#4b250f,#8b5729,#4b250f);
  box-shadow:0 22px 48px rgba(0,0,0,.34);
  transform-origin:top center;
  animation:signSwing 6s ease-in-out infinite;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.wood-sign:nth-child(2){animation-delay:.8s}
.wood-sign:nth-child(3){animation-delay:1.4s}
.wood-sign:nth-child(4){animation-delay:2.1s}

.wood-sign span{
  font-family:Georgia,serif;
  font-size:1.45rem;
  font-weight:900;
  color:#ffe2a2;
}

.wood-sign small{
  margin-top:8px;
  color:rgba(255,255,255,.76);
  font-weight:700;
}

.wood-sign:hover{
  transform:translateY(-6px) rotate(0deg);
  border-color:rgba(255,226,162,.9);
  box-shadow:0 30px 70px rgba(216,173,90,.24);
}

@keyframes signSwing{
  0%,100%{rotate:-.8deg}
  50%{rotate:.8deg}
}

/* Subtle living nature layer for every supporting page */
.living-nature-layer{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}

.living-dust{
  display:none;
}

.living-spark{
  display:none;
}

.living-butterfly{
  position:absolute;
  width:clamp(46px,5vw,78px);
  aspect-ratio:206 / 197;
  opacity:.62;
  filter:drop-shadow(0 12px 12px rgba(54,32,18,.16)) sepia(.08) saturate(1.08) contrast(.92) brightness(1.18);
  animation:livingButterflyPath 42s cubic-bezier(.44,.02,.48,1) infinite;
}

.living-butterfly .monarch-whole,
.living-butterfly .monarch-shadow,
.living-butterfly i,
.living-butterfly b{
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
}

.living-butterfly .monarch-whole{
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.82;
  filter:sepia(.08) saturate(1.08) contrast(.92) brightness(1.18);
}

.living-butterfly .monarch-shadow{
  transform:translate(7px,12px) scale(.82);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(78,48,26,.16),transparent 68%);
  opacity:.2;
  filter:blur(8px);
}

.living-butterfly i,
.living-butterfly b{
  width:62%;
  background:url("../images/monarch-cover-left-wing.png") center / contain no-repeat;
  opacity:.88;
  filter:sepia(.12) saturate(1.06) contrast(.88) brightness(1.2);
  animation:livingWing .68s ease-in-out infinite alternate;
}

.living-butterfly i{
  transform-origin:right center;
}

.living-butterfly b{
  left:auto;
  right:0;
  background-image:url("../images/monarch-cover-right-wing.png");
  transform-origin:left center;
}

.living-butterfly-1{animation-duration:44s;animation-delay:-4s}
.living-butterfly-2{animation-duration:52s;animation-delay:-15s;transform:scale(.72)}
.living-butterfly-3{animation-duration:48s;animation-delay:-24s;transform:scale(.86)}
.living-butterfly-4{animation-duration:58s;animation-delay:-9s;transform:scale(.62)}

.fb-heart,
.living-heart{
  position:fixed;
  top:-28px;
  z-index:3;
  width:10px;
  height:10px;
  pointer-events:none;
  color:transparent;
  background:rgba(255,199,222,.44);
  rotate:45deg;
  animation:livingHeartFall linear forwards;
}

.fb-heart::before,
.fb-heart::after,
.living-heart::before,
.living-heart::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:inherit;
}

.fb-heart::before,
.living-heart::before{left:-5px}
.fb-heart::after,
.living-heart::after{top:-5px}

.product-card img,
.gallery-grid img,
.hero-card img,
.preview img{
  animation:livingImageBreathe 8s ease-in-out infinite;
}

@keyframes livingDust{
  to{background-position:120px -180px,-90px -220px}
}

@keyframes livingSpark{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.65)}
  18%{opacity:.82}
  100%{opacity:0;transform:translate3d(26px,-105vh,0) scale(1.05)}
}

@keyframes livingWing{
  from{transform:rotateY(14deg)}
  to{transform:rotateY(66deg)}
}

@keyframes livingButterflyPath{
  0%{left:-8vw;top:72vh;transform:translate3d(0,0,0) rotate(-12deg) scale(.76)}
  18%{left:18vw;top:26vh;transform:translate3d(0,-16px,0) rotate(18deg) scale(.9)}
  36%{left:52vw;top:44vh;transform:translate3d(0,12px,0) rotate(-8deg) scale(.72)}
  58%{left:82vw;top:24vh;transform:translate3d(0,-20px,0) rotate(20deg) scale(.84)}
  76%{left:62vw;top:76vh;transform:translate3d(0,14px,0) rotate(-18deg) scale(.68)}
  100%{left:108vw;top:38vh;transform:translate3d(0,-10px,0) rotate(10deg) scale(.78)}
}

@keyframes livingHeartFall{
  0%{opacity:0;transform:translate3d(0,-20px,0) scale(.72)}
  18%{opacity:.55}
  100%{opacity:0;transform:translate3d(var(--drift,44px),105vh,0) scale(1.05)}
}

@keyframes livingImageBreathe{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}