/* One compact product-card system for every Forever Beaded collection page. */
.product-grid,
.world-page .product-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px)) !important;
  justify-content: start !important;
  justify-items: start !important;
  align-items: start !important;
  gap: clamp(18px, 2vw, 28px) !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.product-card,
.world-page .product-card,
.world-page .product-card:not(.butterfly-compact-card):not(:has(.product-card-link)) {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1.48 / 1 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 5px solid rgba(255, 246, 240, .92) !important;
  border-radius: 18px !important;
  background: rgba(255, 248, 244, .9) !important;
  box-shadow: 0 16px 36px rgba(31, 23, 34, .28), inset 0 0 0 1px rgba(112, 75, 93, .22) !important;
  text-align: center !important;
}

.product-card-link {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  color: inherit !important;
  text-decoration: none !important;
}

.product-card img,
.world-page .product-card img,
.world-page .product-card .product-image {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 12px 12px 94px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 13px !important;
  background: transparent !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.product-card .product-name,
.product-card-link > .product-name {
  position: absolute !important;
  z-index: 3 !important;
  inset: auto 8% 31px !important;
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 34px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 3px 11px !important;
  border: 1px solid rgba(132, 91, 110, .24) !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  background: rgba(255, 246, 240, .95) !important;
  color: #492d3a !important;
  font: 600 clamp(13px, 1.35vw, 18px)/1.05 Georgia, "Times New Roman", serif !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  box-shadow: 0 5px 16px rgba(52, 39, 48, .16) !important;
  pointer-events: none !important;
}

.product-card .product-price,
.product-card-link > .product-price {
  position: absolute !important;
  z-index: 3 !important;
  inset: auto 8% 7px !important;
  display: grid !important;
  place-items: center !important;
  height: 25px !important;
  margin: 0 !important;
  padding: 2px 10px 4px !important;
  border: 1px solid rgba(132, 91, 110, .24) !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
  background: rgba(255, 246, 240, .95) !important;
  color: #63344e !important;
  font: 800 12px/1.1 Inter, Arial, sans-serif !important;
  letter-spacing: .02em !important;
  box-shadow: 0 5px 16px rgba(52, 39, 48, .16) !important;
  pointer-events: none !important;
}

.product-card .favourite-btn,
.world-page .product-card .favourite-btn {
  position: absolute !important;
  z-index: 6 !important;
  top: 10px !important;
  right: 10px !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #713b62 !important;
  font: 700 25px/1 Arial, sans-serif !important;
  box-shadow: none !important;
  text-shadow: 0 1px 3px rgba(255,255,255,.95), 0 1px 5px rgba(0,0,0,.3) !important;
}

.product-card .favourite-btn.is-saved { color: #922d62 !important; }
.product-card:hover,
.product-card:focus-within {
  transform: translateY(-5px) !important;
  box-shadow: 0 0 0 4px rgba(255,250,245,.78), 0 18px 38px rgba(48,30,42,.3) !important;
}

@media (max-width: 620px) {
  .product-grid,
  .world-page .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .product-card,
  .world-page .product-card {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    border-width: 3px !important;
    aspect-ratio: 1 / 1.08 !important;
  }

  .product-card img,
  .product-card-link > img { padding: 6px 6px 70px !important; }

  .product-card .product-name,
  .product-card-link > .product-name {
    min-height: 34px !important;
    padding: 4px 7px !important;
    font-size: 14px !important;
    line-height: 1.08 !important;
  }
}

/* Match the shared collection card geometry on the legacy scenic templates. */
@media (max-width: 900px) {
  .page-scroll { padding:32px 12px 52px!important; }
  .page-heading { margin-bottom:18px!important; }
  .page-heading h1 {
    margin-bottom:12px!important;
    font-size:clamp(38px,9vw,64px)!important;
    line-height:.96!important;
  }
  .page-subtitle,
  .page-description {
    margin:8px auto 14px!important;
    font-size:1rem!important;
    line-height:1.45!important;
  }
  .search-wrap input,
  .world-search-row input {
    min-height:48px!important;
    padding-inline:18px!important;
  }
  body .chapter-order-toggle {
    min-height:42px!important;
    margin:8px auto 2px!important;
    padding:8px 16px!important;
  }
  .chapter-order-nav { margin:12px auto 16px!important; }
}

@media (max-width: 620px) {
  .page-scroll { width:100%!important; padding:24px 8px 42px!important; }

  body[class] .product-grid,
  .product-grid,
  .world-page .product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px 8px!important;
  }

  body[class] .product-grid > .product-card,
  .product-card,
  .world-page .product-card {
    width:100%!important;
    max-width:none!important;
    aspect-ratio:1.06 / 1!important;
    justify-self:stretch!important;
  }

  .product-card img,
  .world-page .product-card img,
  .world-page .product-card .product-image,
  .product-card-link > img { padding:5px 5px 58px!important; }

  .product-card .product-name,
  .product-card-link > .product-name {
    inset:auto 5% 23px!important;
    min-height:29px!important;
    max-height:42px!important;
    padding:3px 5px!important;
    font-size:clamp(11px,3.25vw,13px)!important;
    line-height:1.05!important;
  }

  .product-card .product-price,
  .product-card-link > .product-price {
    inset:auto 5% 3px!important;
    height:21px!important;
    padding:1px 6px 2px!important;
    font-size:10.5px!important;
  }

  .product-card .favourite-btn,
  .world-page .product-card .favourite-btn {
    top:2px!important;
    right:2px!important;
    width:44px!important;
    height:44px!important;
    font-size:22px!important;
  }
}