:root {
  --font-body: "Segoe UI", Aptos, Tahoma, Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --font-accent: "Trebuchet MS", "Segoe UI", sans-serif;
  --ink: #18262c;
  --muted: #667780;
  --line: #dce7ea;
  --surface: #ffffff;
  --soft: #f6f9fa;
  --brand: #0e5874;
  --brand-dark: #0a4055;
  --coral: #ef6f61;
  --mint: #a8ddd1;
  --sky: #a8d7ef;
  --sun: #f4c95d;
  --rose: #f6c8ca;
  --shadow: 0 18px 45px rgba(22, 45, 55, 0.12);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fbfcfd;
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
  overflow-x: clip;
}

body.product-page-body {
  background:
    linear-gradient(rgba(255, 255, 255, 0.84), rgba(248, 244, 238, 0.9)),
    url("ma.jpg") center top / cover fixed no-repeat;
}

body.image-viewer-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.announcement {
  display: none;
  justify-content: center;
  gap: 16px;
  align-items: center;
  min-height: 42px;
  padding: 8px 20px;
  color: #112b34;
  background: var(--mint);
  font-size: 0.92rem;
}

.announcement a {
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(220px, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 14px clamp(18px, 4vw, 56px);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.brand strong {
  display: block;
  color: var(--brand-dark);
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1;
}

.brand small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
}

.search-shell {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
}

.search-shell span {
  margin-right: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.search-shell input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.header-actions a,
.cart-button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}

.header-actions a {
  display: inline-flex;
  align-items: center;
}

.cart-button span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: 0.8rem;
}

.category-strip {
  position: sticky;
  top: 81px;
  z-index: 19;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px clamp(18px, 4vw, 56px);
  overflow: visible;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.work-menu {
  position: relative;
}

.work-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--brand);
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-accent);
  font-weight: 800;
}

.menu-caret {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.work-menu-toggle[aria-expanded="true"] .menu-caret {
  transform: translateY(2px) rotate(225deg);
}

.work-menu-list {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 35;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(640px, calc(100vw - 36px));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.work-menu-list[hidden] {
  display: none;
}

.category-chip {
  width: 100%;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #31444c;
  text-align: left;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
}

.category-chip.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.category-current {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 800;
}

main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow-x: clip;
  background:
    linear-gradient(180deg, #fbf7f1 0, #fffdfa 540px, #fbfcfd 760px, #fbfcfd 100%);
}

main::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: clamp(430px, 28vw, 620px);
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("slike/page-decor.png");
  background-position: center top;
  background-size: min(2200px, 100vw) auto;
  background-repeat: no-repeat;
}

.storefront {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  width: 100vw;
  max-width: 100vw;
  min-height: clamp(360px, 25.2vw, 548px);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(54px, 8vw, 110px) clamp(18px, 4vw, 56px);
  overflow: hidden;
  background-image: url("slike/zaglavlje.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.storefront-copy {
  position: relative;
  isolation: isolate;
  max-width: 700px;
  padding: 0;
}

.storefront-copy::before {
  content: none;
}

.storefront-copy::after {
  content: none;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--coral);
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.products-section .catalog-eyebrow {
  color: var(--brand);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 14px;
  color: var(--brand-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1;
  letter-spacing: 0;
}

h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
}

.lead {
  max-width: 590px;
  color: #41535b;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0;
}

.button,
.product-actions button,
.cart-header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font-accent);
  font-weight: 800;
}

.button-primary,
.product-actions button:first-child {
  background: var(--brand);
  color: #fff;
}

.button-secondary,
.product-actions button:last-child,
.cart-header button {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}

.storefront-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 560px;
  gap: 12px;
}

.storefront-stats span {
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--muted);
}

.storefront-stats strong {
  display: block;
  color: var(--brand-dark);
  font-size: 1.25rem;
}

.studio-panel {
  display: grid;
  grid-template-columns: minmax(180px, 0.95fr) minmax(220px, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.studio-preview {
  display: grid;
  min-height: 460px;
  place-items: center;
  padding: 28px;
  background: #e8f6f3;
}

.preview-card {
  display: grid;
  justify-items: center;
  width: min(100%, 270px);
  aspect-ratio: 4 / 5;
  padding: 34px 24px;
  border: 1px solid rgba(10, 64, 85, 0.18);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(23, 74, 84, 0.15);
}

.preview-card img {
  width: 128px;
  height: 128px;
  object-fit: contain;
  margin: auto 0 10px;
}

.preview-card span {
  color: var(--brand-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
  overflow-wrap: anywhere;
  text-align: center;
}

.preview-card small {
  margin-top: 12px;
  color: var(--muted);
  text-align: center;
}

.studio-controls {
  padding: 26px;
}

.studio-controls h2 {
  font-size: 1.55rem;
}

.studio-controls label,
.contact-form label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  color: #2c4149;
  font-size: 0.9rem;
  font-weight: 800;
}

.studio-controls input,
.studio-controls select,
.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.swatches {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 16px 0 20px;
  padding: 0;
  border: 0;
}

.swatches legend {
  width: 100%;
  margin-bottom: 8px;
  color: #2c4149;
  font-size: 0.9rem;
  font-weight: 800;
}

.swatch {
  width: 34px;
  height: 34px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--rose);
  box-shadow: 0 0 0 1px var(--line);
}

.swatch.is-selected {
  box-shadow: 0 0 0 3px var(--brand);
}

.swatch-mint {
  background: var(--mint);
}

.swatch-sky {
  background: var(--sky);
}

.studio-preview[data-theme="rose"] {
  background: #fae7e8;
}

.studio-preview[data-theme="mint"] {
  background: #e6f6f2;
}

.studio-preview[data-theme="sky"] {
  background: #e6f3fb;
}

.studio-preview[data-product="Naljepnice"] .preview-card {
  aspect-ratio: 1 / 1;
  border-radius: 999px;
}

.studio-preview[data-product="Pinjata"] .preview-card {
  aspect-ratio: 1 / 1.15;
  border-radius: 76px 76px 40px 40px;
}

.studio-preview[data-product="Toper"] .preview-card {
  aspect-ratio: 1 / 1;
  border-radius: 999px;
}

.studio-preview[data-product="Majica"] .preview-card {
  border-radius: 42px 42px 8px 8px;
}

.studio-preview[data-product="Kartonska kutijica"] .preview-card {
  aspect-ratio: 1 / 0.82;
}

.studio-preview[data-product="Vizitka"] .preview-card {
  aspect-ratio: 1.62 / 1;
}

.service-row,
.collections,
.products-section,
.gallery-section,
.about-band,
.contact-section {
  position: relative;
  z-index: 1;
  padding: clamp(34px, 5vw, 64px) clamp(18px, 4vw, 56px);
}

.service-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding-top: 0;
  background: var(--line);
}

.service-row div {
  display: grid;
  gap: 4px;
  min-height: 96px;
  align-content: center;
  padding: 18px;
  background: #fff;
}

.service-row strong {
  color: var(--brand-dark);
}

.service-row span {
  color: var(--muted);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 22px;
}

.section-heading-row {
  display: flex;
  max-width: none;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
}

.results-meta {
  color: var(--muted);
  font-weight: 800;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.collection-tile {
  display: grid;
  min-height: 230px;
  align-content: end;
  padding: 24px;
  border-radius: 8px;
  overflow: hidden;
  color: #10252c;
  background-color: #eaf7f3;
  background-image: url("Mali_andeli_logotip-removebg-preview.png");
  background-repeat: no-repeat;
  background-size: 180px;
  background-position: right 18px top 18px;
  border: 1px solid var(--line);
}

.collection-tile span {
  display: block;
  margin-bottom: 6px;
  color: var(--brand);
  font-weight: 900;
}

.collection-tile strong {
  max-width: 290px;
  font-size: 1.28rem;
  line-height: 1.2;
}

.tile-celebration {
  background-color: #fff1ed;
}

.tile-school {
  background-color: #ecf5ff;
}

.tile-gifts {
  background-color: #fff8df;
}

.product-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.product-grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: -80px;
  left: 50%;
  width: 100vw;
  background: #fbfcfd;
  transform: translateX(-50%);
}

.product-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.product-card[hidden] {
  display: none;
}

.product-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.product-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  background: #f7f3ed;
  box-shadow: none;
}

.product-card .product-media {
  background: transparent;
}

.product-media.is-contain,
.sacrament-subcategory-media.is-contain {
  aspect-ratio: 4 / 3;
  background: #f8f0e6;
}

.product-media.is-contain .product-photo,
.sacrament-subcategory-media.is-contain img {
  object-fit: contain;
  padding: 14px;
}

.product-photo {
  transition: transform 0.32s ease, filter 0.32s ease;
  transform-origin: center;
}

.product-media::before,
.sacrament-subcategory-media::before {
  content: "\203A";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(14, 88, 116, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand-dark);
  box-shadow: 0 12px 28px rgba(14, 64, 85, 0.18);
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(8px, -8px) scale(0.92);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.product-media::after,
.sacrament-subcategory-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(14, 88, 116, 0.16)),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.4), transparent 36%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.product-card:hover,
.product-card:focus-within {
  border-color: rgba(14, 88, 116, 0.34);
  box-shadow: 0 22px 46px rgba(31, 59, 70, 0.14);
  transform: translateY(-4px);
}

.product-card:focus-visible {
  outline: 3px solid rgba(14, 88, 116, 0.35);
  outline-offset: 4px;
}

.product-card:hover .product-photo,
.product-card:focus-within .product-photo {
  filter: saturate(1.07) contrast(1.03) brightness(1.02);
  transform: scale(1.045);
}

.product-card:hover .product-media.is-contain .product-photo,
.product-card:focus-within .product-media.is-contain .product-photo {
  transform: scale(1.012);
}

.product-card:hover .product-media::before,
.product-card:focus-within .product-media::before,
.product-card:hover .product-media::after,
.product-card:focus-within .product-media::after {
  opacity: 1;
}

.product-card:hover .product-media::before,
.product-card:focus-within .product-media::before {
  transform: translate(0, 0) scale(1);
}

.product-media:focus-visible,
.product-info h3:focus-visible {
  outline: 3px solid rgba(14, 88, 116, 0.35);
  outline-offset: -4px;
}

.product-info h3:focus-visible {
  border-radius: 6px;
  outline-offset: 4px;
}

.media-invite {
  background: #fae7e8;
}

.media-stickers {
  background: #e6f6f2;
}

.media-pinata {
  background: #fff1ed;
}

.media-shirt {
  background: #edf5fb;
}

.media-business {
  background: #eaf3ee;
}

.media-sacraments {
  background: #fff1ed;
}

.media-wedding {
  background: #f7eeee;
}

.media-promo {
  background: #fff8df;
}

.media-uv {
  background: #ecf5ff;
}

.media-engraving {
  background: #f0eef9;
}

.media-onesie {
  background: #edf5fb;
}

.media-box {
  background: #fff3d1;
}

.media-print {
  background: #f0eef9;
}

.media-thanks {
  background: #eaf3ee;
}

.media-mug {
  background: #f7eeee;
}

.media-party {
  background: #eff4ff;
}

.paper-card,
.thanks-card,
.wall-print {
  display: grid;
  place-items: center;
  width: 148px;
  aspect-ratio: 4 / 5;
  padding: 18px;
  border: 1px solid rgba(10, 64, 85, 0.16);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(31, 59, 70, 0.14);
}

.paper-card img,
.thanks-card img,
.wall-print img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.paper-card span,
.thanks-card span,
.wall-print span,
.gift-box span,
.onesie span,
.mug span,
.party-set span,
.sticker-sheet span,
.pinata span,
.topper span,
.shirt span,
.box-stack span,
.business-cards span,
.promo-kit span,
.uv-panel span,
.engraving-plaque span {
  color: var(--brand-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

.sticker-sheet {
  display: grid;
  grid-template-columns: repeat(2, 92px);
  gap: 10px;
  place-items: center;
}

.sticker-sheet span,
.sticker-sheet img {
  display: grid;
  place-items: center;
  width: 92px;
  height: 48px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 22px rgba(31, 59, 70, 0.12);
}

.sticker-sheet img {
  padding: 8px 24px;
  object-fit: contain;
}

.onesie {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  min-height: 188px;
  padding: 38px 24px 28px;
  border-radius: 42px 42px 18px 18px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(31, 59, 70, 0.14);
}

.onesie::before,
.onesie::after {
  content: "";
  position: absolute;
  top: 26px;
  width: 46px;
  height: 72px;
  border-radius: 28px;
  background: #fff;
}

.onesie::before {
  left: -28px;
  transform: rotate(21deg);
}

.onesie::after {
  right: -28px;
  transform: rotate(-21deg);
}

.onesie img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  z-index: 1;
}

.onesie span {
  z-index: 1;
}

.gift-box {
  display: grid;
  place-items: center;
  width: 168px;
  aspect-ratio: 1 / 0.72;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(31, 59, 70, 0.14);
}

.gift-box::before {
  content: "";
  width: 100%;
  height: 14px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: var(--coral);
}

.gift-box img {
  width: 74px;
  height: 54px;
  object-fit: contain;
}

.pinata {
  position: relative;
  display: grid;
  place-items: center;
  width: 152px;
  height: 184px;
  border-radius: 76px 76px 48px 48px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.42) 0 12px, rgba(239, 111, 97, 0.24) 12px 24px),
    #f7c95d;
  box-shadow: 0 16px 30px rgba(31, 59, 70, 0.14);
}

.pinata::before {
  content: "";
  position: absolute;
  top: -32px;
  width: 2px;
  height: 38px;
  background: var(--brand);
}

.pinata::after {
  content: "";
  position: absolute;
  bottom: -18px;
  width: 86px;
  height: 24px;
  border-radius: 0 0 36px 36px;
  background:
    linear-gradient(90deg, transparent 0 12px, rgba(14, 88, 116, 0.26) 12px 16px, transparent 16px 28px),
    var(--coral);
}

.pinata span {
  display: grid;
  place-items: center;
  width: 104px;
  height: 58px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 18px rgba(31, 59, 70, 0.12);
}

.topper {
  position: relative;
  display: grid;
  place-items: center;
  width: 154px;
  height: 178px;
}

.topper::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 82px;
  border-radius: 999px;
  background: var(--brand);
}

.topper img {
  position: absolute;
  top: 9px;
  z-index: 2;
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.topper span {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin-bottom: 36px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(31, 59, 70, 0.14);
  font-size: 3.2rem;
}

.shirt {
  position: relative;
  display: grid;
  place-items: center;
  width: 154px;
  min-height: 156px;
  padding: 28px 22px 18px;
  border-radius: 18px 18px 8px 8px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(31, 59, 70, 0.14);
}

.shirt::before,
.shirt::after {
  content: "";
  position: absolute;
  top: 22px;
  width: 50px;
  height: 68px;
  border-radius: 16px;
  background: #fff;
}

.shirt::before {
  left: -30px;
  transform: rotate(22deg);
}

.shirt::after {
  right: -30px;
  transform: rotate(-22deg);
}

.shirt img,
.shirt span {
  z-index: 1;
}

.shirt img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.shirt span {
  margin-top: 4px;
  font-size: 0.92rem;
  line-height: 1.1;
  text-align: center;
}

.box-stack {
  position: relative;
  display: grid;
  place-items: center;
  width: 170px;
  height: 128px;
  padding: 18px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(31, 59, 70, 0.14);
}

.box-stack::before {
  content: "";
  position: absolute;
  top: -18px;
  width: 188px;
  height: 34px;
  border-radius: 8px 8px 3px 3px;
  background: var(--coral);
  box-shadow: 0 10px 18px rgba(31, 59, 70, 0.1);
}

.box-stack img {
  width: 76px;
  height: 54px;
  object-fit: contain;
}

.business-cards {
  position: relative;
  display: grid;
  place-items: center;
  width: 180px;
  height: 112px;
  padding: 18px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(31, 59, 70, 0.14);
}

.business-cards::before,
.business-cards::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 180px;
  height: 112px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 10px 22px rgba(31, 59, 70, 0.1);
}

.business-cards::before {
  transform: translate(-12px, 12px) rotate(-4deg);
}

.business-cards::after {
  transform: translate(12px, -12px) rotate(4deg);
}

.business-cards img {
  width: 78px;
  height: 52px;
  object-fit: contain;
}

.promo-kit {
  position: relative;
  display: grid;
  place-items: center;
  width: 172px;
  height: 132px;
  padding: 18px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(31, 59, 70, 0.14);
}

.promo-kit::before,
.promo-kit::after {
  content: "";
  position: absolute;
  bottom: -16px;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: var(--coral);
  opacity: 0.72;
}

.promo-kit::before {
  left: 18px;
}

.promo-kit::after {
  right: 18px;
  background: var(--mint);
}

.promo-kit img {
  width: 78px;
  height: 52px;
  object-fit: contain;
}

.uv-panel {
  display: grid;
  place-items: center;
  width: 178px;
  height: 122px;
  padding: 18px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(168, 215, 239, 0.38), rgba(246, 200, 202, 0.42)),
    #fff;
  box-shadow: 0 16px 30px rgba(31, 59, 70, 0.14);
}

.uv-panel img {
  width: 78px;
  height: 52px;
  object-fit: contain;
}

.engraving-plaque {
  display: grid;
  place-items: center;
  width: 174px;
  height: 118px;
  padding: 18px;
  border: 2px solid rgba(10, 64, 85, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(244, 201, 93, 0.22)),
    #fff;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.6), 0 16px 30px rgba(31, 59, 70, 0.14);
}

.engraving-plaque img {
  width: 78px;
  height: 52px;
  object-fit: contain;
}

.mug {
  position: relative;
  display: grid;
  place-items: center;
  width: 144px;
  height: 138px;
  padding: 18px 30px 16px 22px;
  border-radius: 12px 12px 34px 34px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(31, 59, 70, 0.14);
}

.mug::after {
  content: "";
  position: absolute;
  right: -34px;
  top: 35px;
  width: 54px;
  height: 62px;
  border: 12px solid #fff;
  border-left: 0;
  border-radius: 0 42px 42px 0;
}

.mug img {
  width: 78px;
  height: 64px;
  object-fit: contain;
}

.party-set {
  display: grid;
  grid-template-columns: 82px 82px;
  gap: 8px;
  align-items: end;
}

.party-set span,
.party-set img {
  display: grid;
  place-items: center;
  width: 82px;
  height: 124px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(31, 59, 70, 0.14);
}

.party-set img {
  padding: 18px;
  object-fit: contain;
}

.product-info {
  padding: 18px 18px 12px;
}

.product-info p {
  margin-bottom: 8px;
  color: var(--coral);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.product-info h3 {
  min-height: 48px;
  margin-bottom: 0;
  cursor: pointer;
}

.product-info span {
  color: var(--muted);
  font-weight: 800;
}

.product-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0 18px 18px;
}

.product-grid .product-info span,
.product-grid .product-actions {
  display: none;
}

.no-results {
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
}

.gallery-section {
  background: #fff;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  box-shadow: 0 12px 26px rgba(31, 59, 70, 0.08);
}

.product-subpage-header {
  grid-template-columns: minmax(190px, 260px) minmax(260px, 1fr) minmax(180px, auto) auto;
}

.product-subpage-header .search-shell {
  min-width: 0;
}

.product-subpage-header .header-actions {
  justify-content: flex-end;
}

.product-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.product-breadcrumbs a,
.product-breadcrumbs span[aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.product-breadcrumbs a {
  color: var(--brand-dark);
}

.product-breadcrumbs span[aria-current="page"] {
  border-color: rgba(14, 88, 116, 0.22);
  background: #e8f6f3;
  color: var(--brand);
}

.breadcrumb-separator {
  color: #9aa9af;
}

.product-cart-actions {
  justify-content: flex-end;
}

.product-subpage-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
  padding: clamp(36px, 6vw, 76px) clamp(18px, 4vw, 56px);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(250, 246, 239, 0.78)),
    url("ma.jpg") center / cover no-repeat;
}

.product-subpage-hero.is-browse-page {
  grid-template-columns: minmax(0, 820px);
}

.product-subpage-hero.has-bible-customizer {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: clamp(20px, 3vw, 46px);
  padding-top: clamp(20px, 3vw, 40px);
}

.product-subpage-hero.has-candle-customizer {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: clamp(20px, 3vw, 46px);
  padding-top: clamp(20px, 3vw, 40px);
}

.product-subpage-hero.has-shirt-customizer {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: clamp(20px, 3vw, 46px);
  padding-top: clamp(20px, 3vw, 40px);
}

.product-subpage-hero.has-set-customizer {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: clamp(20px, 3vw, 46px);
  padding-top: clamp(20px, 3vw, 40px);
}

.product-subpage-hero.has-rosary-customizer {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: clamp(20px, 3vw, 46px);
  padding-top: clamp(20px, 3vw, 40px);
}

.product-subpage-hero.has-frame-customizer {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: clamp(20px, 3vw, 46px);
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(18px, 3vw, 34px);
}

.product-subpage-hero.is-box-customizer {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: clamp(16px, 2.4vw, 34px);
}

.product-subpage-copy {
  min-width: 0;
}

.product-subpage-hero.has-bible-customizer h1 {
  max-width: 920px;
  font-size: clamp(2.45rem, 4vw, 4.45rem);
  line-height: 0.98;
}

.product-subpage-hero.has-candle-customizer h1 {
  max-width: 920px;
  font-size: clamp(2.45rem, 4vw, 4.45rem);
  line-height: 0.98;
}

.product-subpage-hero.has-shirt-customizer h1 {
  max-width: 920px;
  font-size: clamp(2.45rem, 4vw, 4.45rem);
  line-height: 0.98;
}

.product-subpage-hero.has-set-customizer h1 {
  max-width: 920px;
  font-size: clamp(2.45rem, 4vw, 4.45rem);
  line-height: 0.98;
}

.product-subpage-hero.has-rosary-customizer h1 {
  max-width: 920px;
  font-size: clamp(2.45rem, 4vw, 4.45rem);
  line-height: 0.98;
}

.product-subpage-hero.has-frame-customizer h1 {
  max-width: 920px;
  font-size: clamp(2.45rem, 4vw, 4.45rem);
  line-height: 0.98;
}

.product-subpage-hero.is-personalization-page .product-subpage-copy > .back-link,
.product-subpage-hero.is-personalization-page .product-subpage-copy > .eyebrow,
.product-subpage-hero.is-personalization-page .product-subpage-copy > .lead {
  display: none;
}

.product-subpage-hero.is-personalization-page h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(2.35rem, 3.2vw, 4rem);
  line-height: 1;
}

.product-subpage-hero.has-bible-customizer .lead {
  max-width: 650px;
}

.product-hero-visual {
  width: min(100%, 900px);
  margin-top: clamp(16px, 2.6vw, 30px);
}

.product-hero-visual[hidden] {
  display: none;
}

.product-hero-visual[data-visual="bible"] .bible-preview-shell {
  width: min(100%, 560px);
  margin-inline: 0;
}

.product-hero-visual[data-visual="box"] {
  width: min(100%, 1120px);
}

.product-hero-visual[data-visual="box"] .box-preview-stage {
  width: 100%;
  margin-inline: 0;
}

.product-hero-visual[data-visual="candle"] {
  width: min(100%, 560px);
}

.product-hero-visual[data-visual="candle"] .candle-preview-shell {
  margin-inline: 0;
}

.product-hero-visual[data-visual="shirt"] {
  width: min(100%, 680px);
}

.product-hero-visual[data-visual="shirt"] .shirt-preview-shell {
  margin-inline: 0;
}

.product-hero-visual[data-visual="baptism-set"] {
  width: min(100%, 680px);
}

.product-hero-visual[data-visual="baptism-set"] .set-preview-shell {
  margin-inline: 0;
}

.product-hero-visual[data-visual="baptism-set"] .set-candle-full-preview {
  margin-inline: 0;
}

.product-hero-visual[data-visual="baptism-set"] .set-bible-full-preview {
  margin-inline: 0;
}

.product-hero-visual[data-visual="baptism-set"] .set-shirt-full-preview {
  margin-inline: 0;
}

.product-hero-visual[data-visual="baptism-set"] .set-rosary-preview-shell {
  margin-inline: 0;
}

.product-hero-visual[data-visual="rosary"] {
  width: min(100%, 740px);
}

.product-hero-visual[data-visual="rosary"] .standalone-rosary-preview-shell {
  margin-inline: 0;
}

.product-hero-visual[data-visual="rosary"] .standalone-rosary-preview-shell .box-rosary-card {
  width: min(100%, 660px);
  max-height: none;
  aspect-ratio: 1370 / 1148;
}

.product-hero-visual[data-visual="frame"] {
  width: min(100%, 820px);
}

.product-hero-visual[data-visual="generic-example"] {
  width: min(100%, 640px);
}

.product-hero-visual[data-visual="rosary-personalization"] {
  width: min(100%, 760px);
}

.frame-preview-card,
.generic-example-preview-card {
  display: grid;
  gap: 12px;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.frame-preview-button,
.generic-example-preview-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--soft);
  cursor: zoom-in;
}

.frame-preview-button img,
.generic-example-preview-button img {
  display: block;
  width: 100%;
  max-height: 620px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #f8fbfb;
}

.generic-example-preview-button img {
  object-fit: cover;
}

.generic-example-preview-card.is-contain .generic-example-preview-button img {
  object-fit: contain;
}

.frame-preview-card div,
.generic-example-preview-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px 14px;
  color: var(--muted);
  font-weight: 800;
}

.frame-preview-card strong,
.generic-example-preview-card strong {
  color: var(--brand-dark);
  font-size: 1rem;
}

.rosary-personalization-preview-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.rosary-personalization-preview-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #fff;
  cursor: zoom-in;
}

.rosary-personalization-preview {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.rosary-personalization-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.rosary-personalization-name {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  font-family: var(--rosary-preview-font);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.rosary-personalization-heart-name {
  top: var(--rosary-heart-top);
  left: var(--rosary-heart-left);
  width: var(--rosary-heart-width);
  color: rgba(49, 38, 21, 0.92);
  font-size: clamp(1px, var(--rosary-heart-render-size), var(--rosary-heart-size));
  text-shadow:
    0 1px 0 rgba(255, 234, 164, 0.42),
    0 -1px 0 rgba(88, 58, 20, 0.16);
}

.rosary-personalization-box-name {
  top: var(--rosary-box-top);
  left: var(--rosary-box-left);
  width: var(--rosary-box-width);
  color: rgba(176, 134, 38, 0.94);
  font-size: clamp(4px, var(--rosary-box-render-size), var(--rosary-box-size));
  text-shadow:
    0 1px 0 rgba(255, 239, 176, 0.55),
    0 2px 4px rgba(109, 81, 34, 0.18);
}

.product-page-price {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin: 14px 0 0;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-dark);
  font-family: var(--font-accent);
  font-weight: 900;
}

.product-page-price[hidden] {
  display: none;
}

.back-link {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--brand);
  font-family: var(--font-accent);
  font-weight: 900;
}

.product-request-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.product-request-card h2 {
  margin-bottom: 0;
  font-size: 1.6rem;
}

.product-request-card label {
  display: grid;
  gap: 7px;
  color: #2c4149;
  font-size: 0.9rem;
  font-weight: 800;
}

.frame-customizer-note,
.generic-price-note {
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: #fff8f3;
  color: #41545d;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
}

.product-request-card input,
.product-request-card select,
.product-request-card textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.product-request-card textarea {
  resize: vertical;
}

.bible-preview-shell {
  --bible-font: Georgia, "Times New Roman", serif;
  --bible-name-size: 50px;
  --bible-name-size-large: 66px;
  --bible-date-size: 21px;
  --bible-text-center: 47.8%;
  --bible-name-top: 62.2%;
  --bible-date-top: 75.8%;
  position: relative;
  overflow: hidden;
  width: min(100%, 500px);
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #efece4;
  box-shadow: 0 16px 34px rgba(31, 59, 70, 0.14);
}

.bible-preview-shell img {
  display: block;
  width: 100%;
  height: auto;
}

.bible-preview-shell[data-bible-layout="communion"] {
  width: min(100%, 720px);
  --bible-text-center: 41.8%;
  --bible-name-top: 80.6%;
  --bible-date-top: 83.2%;
}

.bible-preview-shell[data-bible-layout="communion"] .bible-preview-text {
  width: 24%;
  white-space: nowrap;
  overflow: hidden;
}

.bible-preview-shell[data-bible-layout="communion"] .bible-preview-name {
  line-height: 1;
  transform: translate(-50%, -100%);
}

.bible-preview-shell[data-bible-layout="communion"] .bible-preview-date {
  display: none;
}

.bible-preview-shell[data-bible-layout="confirmation"] {
  --bible-text-center: 52.3%;
  --bible-name-top: 66%;
  --bible-date-top: 71%;
}

.bible-preview-shell[data-bible-layout="confirmation"] .bible-preview-text {
  width: 52%;
  color: #b88a30;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 1px 1px rgba(84, 59, 20, 0.28);
}

.bible-preview-shell[data-bible-layout="confirmation"] .bible-preview-name {
  line-height: 1;
}

.bible-preview-shell[data-bible-layout="confirmation"] .bible-preview-date {
  line-height: 1.05;
}

.bible-preview-text {
  position: absolute;
  left: var(--bible-text-center);
  width: 72%;
  color: #c89524;
  line-height: 1.05;
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 1px 1px rgba(78, 54, 16, 0.22);
  transform: translate(-50%, -50%);
}

.bible-preview-name {
  top: var(--bible-name-top);
  font-family: var(--bible-font);
  font-size: var(--bible-name-size);
}

.bible-preview-date {
  top: var(--bible-date-top);
  color: #c89524;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--bible-date-size);
  font-weight: 600;
}

.bible-preview-shell.is-no-date .bible-preview-name {
  font-size: var(--bible-name-size-large);
}

.bible-preview-shell.is-accepted {
  animation: biblePreviewAccepted 0.55s ease;
}

.candle-preview-shell {
  --candle-ribbon-color: #e8d4aa;
  --candle-font: "MonteCarlo", "Monotype Corsiva", cursive;
  --candle-ribbon-font: "Monotype Corsiva", "MonteCarlo", cursive;
  --candle-name-size: 34px;
  --candle-ribbon-size: 24px;
  --candle-ribbon-offset-x: 14px;
  --candle-ribbon-offset-y: 16px;
  --candle-ribbon-image-offset-x: 14px;
  --candle-ribbon-image-offset-y: 96px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 520px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f3eb;
  box-shadow: 0 18px 42px rgba(31, 59, 70, 0.16);
}

.candle-preview-shell img {
  display: block;
  width: 100%;
  height: auto;
}

.candle-base-image {
  position: relative;
  z-index: 1;
}

.candle-ribbon-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translate(var(--candle-ribbon-offset-x), var(--candle-ribbon-offset-y));
}

.candle-ribbon-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translate(var(--candle-ribbon-offset-x), var(--candle-ribbon-offset-y));
}

.candle-ribbon-color-layer {
  z-index: 5;
  display: none;
  background-color: var(--candle-ribbon-color);
  background-image: none;
  -webkit-mask-image: var(--candle-ribbon-mask);
  mask-image: var(--candle-ribbon-mask);
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mix-blend-mode: normal;
  filter: saturate(1.9) contrast(1.18);
  opacity: 1;
}

.candle-ribbon-image {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  mix-blend-mode: darken;
  opacity: 1;
  transform: translate(var(--candle-ribbon-image-offset-x), var(--candle-ribbon-image-offset-y));
}

.candle-ribbon-shadow-layer {
  z-index: 4;
  background-image: var(--candle-ribbon-shadow);
  mix-blend-mode: multiply;
  opacity: 0;
}

.candle-ribbon-highlight-layer {
  z-index: 6;
  background-image: var(--candle-ribbon-highlight);
  mix-blend-mode: screen;
  opacity: 0;
}

.candle-name-svg {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.candle-preview-name {
  fill: #b8841f;
  font-family: var(--candle-font);
  font-size: var(--candle-name-size);
}

.candle-preview-name-letter {
  fill: #b8841f;
  font-family: var(--candle-font);
  font-size: var(--candle-name-size);
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.62);
  stroke-width: 0.8px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 1px 1px rgba(94, 63, 17, 0.2);
}

.candle-preview-ribbon-text {
  position: absolute;
  z-index: 8;
  color: #b8841f;
  line-height: 1.05;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 1px 1px rgba(94, 63, 17, 0.2);
}

.candle-preview-ribbon-text {
  left: 57.8%;
  top: 69.8%;
  width: 142px;
  color: #85601d;
  font-family: var(--candle-ribbon-font);
  font-size: var(--candle-ribbon-size);
  white-space: pre-line;
  transform: translate(-50%, -50%) rotate(84deg);
  transform-origin: center;
}

.candle-preview-shell.is-accepted {
  animation: biblePreviewAccepted 0.55s ease;
}

.candle-color-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.candle-color-field legend {
  margin-bottom: 8px;
  color: #2c4149;
  font-size: 0.9rem;
  font-weight: 800;
}

.candle-color-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.candle-color-swatch,
.candle-color-custom {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 62px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.candle-color-swatch input,
.candle-color-custom input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.candle-color-swatch span {
  display: block;
  width: 100%;
  min-height: 22px;
  border: 1px solid rgba(18, 50, 60, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.1), rgba(73, 45, 16, 0.16)),
    var(--swatch-color);
}

.candle-color-swatch small {
  color: #40535b;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}

.candle-color-swatch:has(input:checked),
.candle-color-custom:has(input[type="radio"]:checked) {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 2px rgba(14, 98, 122, 0.14);
}

.candle-color-custom {
  grid-template-columns: 1fr;
  color: #40535b;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.candle-color-custom span {
  display: flex;
  justify-content: center;
}

.candle-color-custom input[type="color"] {
  width: 100%;
  min-height: 32px;
  padding: 2px;
  cursor: pointer;
}

.shirt-preview-shell {
  --shirt-print-color: #a77d2c;
  --shirt-print-left: 53%;
  --shirt-cross-size: 36px;
  --shirt-cross-top: 190px;
  --shirt-name-font: "Monotype Corsiva", "Palace Script MT", "Edwardian Script ITC", "Vivaldi", "Segoe Script", cursive;
  --shirt-text-font: "Monotype Corsiva", "Palace Script MT", "Edwardian Script ITC", "Vivaldi", "Segoe Script", cursive;
  --shirt-name-size: 50px;
  --shirt-name-top: 238px;
  --shirt-text-size: 31px;
  --shirt-text-top: 294px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 680px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f3eb;
  box-shadow: 0 18px 42px rgba(31, 59, 70, 0.16);
}

.shirt-base-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.shirt-print-patch {
  position: absolute;
  left: var(--shirt-print-left);
  top: 47.5%;
  z-index: 2;
  width: 36%;
  height: 29%;
  border-radius: 48%;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.94) 50%, rgba(255, 255, 255, 0.56) 74%, rgba(255, 255, 255, 0) 100%);
  filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.18s ease;
}

.shirt-cross-preview,
.shirt-name-preview,
.shirt-text-preview {
  position: absolute;
  left: var(--shirt-print-left);
  z-index: 3;
  color: var(--shirt-print-color);
  opacity: 1;
  pointer-events: none;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.62),
    0 1px 1px rgba(84, 58, 17, 0.18);
  transform: translate(-50%, -50%);
  transition: opacity 0.18s ease;
}

.shirt-cross-preview {
  top: var(--shirt-cross-top);
  width: auto;
  height: var(--shirt-cross-size);
  object-fit: contain;
}

.shirt-name-preview {
  top: var(--shirt-name-top);
  min-width: 34%;
  font-family: var(--shirt-name-font);
  font-size: var(--shirt-name-size);
  font-weight: 400;
  line-height: 0.95;
}

.shirt-text-preview {
  top: var(--shirt-text-top);
  width: 48%;
  font-family: var(--shirt-text-font);
  font-size: var(--shirt-text-size);
  font-weight: 400;
  line-height: 1.15;
  white-space: normal;
}

.shirt-preview-shell.is-accepted {
  animation: biblePreviewAccepted 0.55s ease;
}

.set-preview-shell {
  --set-foil: #b78a2e;
  --set-name-font: "Monotype Corsiva", "Palace Script MT", "Edwardian Script ITC", "Vivaldi", "Segoe Script", cursive;
  --set-name-size: 64px;
  --set-symbol-size: 150px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 680px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f3eb;
  box-shadow: 0 18px 42px rgba(31, 59, 70, 0.16);
}

.set-base-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.set-preview-shell[data-set-layout="confirmation"].is-outside {
  aspect-ratio: 1 / 1;
}

.set-preview-shell[data-set-layout="confirmation"].is-inside {
  aspect-ratio: 4 / 3;
}

.set-symbol-preview,
.set-name-preview {
  position: absolute;
  left: 50%;
  z-index: 3;
  color: var(--set-foil);
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -50%);
}

.set-symbol-preview {
  top: 37.2%;
  display: grid;
  place-items: center;
  width: var(--set-symbol-size);
  height: var(--set-symbol-size);
}

.set-symbol-preview::before,
.box-cover-symbol::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background-image: var(--preview-symbol-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.set-symbol-preview::before {
  filter:
    sepia(0.45)
    saturate(1.25)
    brightness(0.95)
    drop-shadow(0 1px 1px rgba(91, 63, 16, 0.16));
}

.set-symbol-preview.is-empty-symbol::before,
.box-cover-symbol.is-empty-symbol::before {
  display: none;
}

.set-symbol-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    sepia(0.45)
    saturate(1.25)
    brightness(0.95)
    drop-shadow(0 1px 1px rgba(91, 63, 16, 0.16));
}

.set-name-preview {
  top: var(--set-name-top, 59.2%);
  width: 56%;
  font-family: var(--set-name-font);
  font-size: var(--set-name-size);
  font-weight: 400;
  line-height: 0.95;
  overflow: hidden;
  white-space: nowrap;
  text-shadow:
    0 1px 1px rgba(86, 61, 17, 0.18),
    0 0 8px rgba(255, 236, 176, 0.18);
}

.set-preview-shell[data-set-layout="confirmation"] .set-symbol-preview {
  display: none;
}

.set-preview-shell[data-set-layout="confirmation"] .set-name-preview {
  width: 54%;
}

.set-preview-shell.is-inside .set-symbol-preview,
.set-preview-shell.is-inside .set-name-preview,
.set-preview-shell.is-set-candle .set-symbol-preview,
.set-preview-shell.is-set-candle .set-name-preview,
.set-preview-shell.is-set-bible .set-symbol-preview,
.set-preview-shell.is-set-bible .set-name-preview,
.set-preview-shell.is-set-shirt .set-symbol-preview,
.set-preview-shell.is-set-shirt .set-name-preview,
.set-preview-shell.is-set-rosary .set-symbol-preview,
.set-preview-shell.is-set-rosary .set-name-preview {
  display: none;
}

.set-inside-preview {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  color: var(--set-foil);
  pointer-events: none;
  text-align: center;
  text-shadow:
    0 1px 1px rgba(86, 61, 17, 0.16),
    0 0 8px rgba(255, 236, 176, 0.16);
}

.set-preview-shell.is-inside .set-inside-preview {
  display: block;
}

.set-inside-quote,
.set-inside-dedication {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.set-inside-quote {
  top: var(--set-inside-quote-top, 14.8%);
  width: 42%;
  max-height: var(--set-inside-quote-max-height, 22.9%);
  font-family: var(--set-inside-font);
  font-size: var(--set-inside-size);
  font-weight: 400;
  line-height: 1.35;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.set-inside-dedication {
  top: 39.5%;
  width: 48%;
  max-height: var(--set-inside-dedication-max-height, 16%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--set-inside-dedication-size);
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.set-candle-name-preview,
.set-candle-ribbon-text-preview {
  position: absolute;
  z-index: 4;
  display: none;
  color: var(--set-foil);
  pointer-events: none;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.72),
    0 1px 1px rgba(86, 61, 17, 0.2);
}

.set-preview-shell.is-inside .set-candle-name-preview,
.set-preview-shell.is-set-candle .set-candle-name-preview {
  display: block;
}

.set-candle-name-preview {
  left: 38.9%;
  top: 54.45%;
  width: 54px;
  font-family: var(--set-candle-font);
  font-size: var(--set-candle-name-size);
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-84deg) scaleX(var(--set-candle-name-scale, 1));
}

.set-preview-shell[data-set-layout="confirmation"].is-inside .set-candle-name-preview {
  left: 36.9%;
  top: 53.6%;
}

.set-preview-shell.is-inside .set-candle-ribbon-text-preview {
  display: block;
}

.set-candle-ribbon-text-preview {
  left: 64.8%;
  top: 52.4%;
  width: 16%;
  font-family: var(--set-candle-ribbon-font);
  font-size: var(--set-candle-ribbon-size);
  line-height: 1.05;
  white-space: pre-line;
  transform: translate(-50%, -50%) rotate(-5deg);
}

.set-preview-shell[data-set-layout="confirmation"].is-inside .set-candle-ribbon-text-preview {
  top: 53.3%;
}

.set-bible-name-preview,
.set-bible-date-preview {
  position: absolute;
  left: 64.7%;
  z-index: 4;
  display: none;
  width: 19%;
  color: var(--set-foil);
  pointer-events: none;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.72),
    0 1px 1px rgba(86, 61, 17, 0.2);
  transform: translate(-50%, -50%);
}

.set-preview-shell.is-inside .set-bible-name-preview,
.set-preview-shell.is-inside .set-bible-date-preview {
  display: block;
}

.set-bible-name-preview {
  top: 76.4%;
  font-family: "MonteCarlo", "Monotype Corsiva", cursive;
  font-size: var(--set-bible-name-size, 19px);
  line-height: 0.95;
}

.set-bible-date-preview {
  top: 82.2%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--set-bible-date-size, 11px);
  font-weight: 700;
  line-height: 1;
}

.set-preview-shell[data-set-layout="confirmation"].is-inside .set-bible-name-preview,
.set-preview-shell[data-set-layout="confirmation"].is-inside .set-bible-date-preview {
  display: block;
  top: 75%;
  width: 19%;
  color: #b78a2e;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.set-preview-shell[data-set-layout="confirmation"].is-inside .set-bible-name-preview {
  left: 45.8%;
  font-family: var(--set-bible-font);
  line-height: 1;
}

.set-preview-shell[data-set-layout="confirmation"].is-inside .set-bible-date-preview {
  left: 49.2%;
  line-height: 1;
}

.set-preview-shell[data-set-layout="confirmation"].is-inside.is-set-bible-no-date .set-bible-name-preview {
  left: 47.3%;
}

.set-preview-shell[data-set-layout="confirmation"].is-inside .set-bible-date-preview[hidden] {
  display: none;
}

.set-shirt-cross-preview,
.set-shirt-name-preview,
.set-shirt-text-preview {
  position: absolute;
  z-index: 4;
  display: none;
  color: var(--set-foil);
  pointer-events: none;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.72),
    0 1px 1px rgba(86, 61, 17, 0.2);
  transform: translate(-50%, -50%) rotate(4deg);
}

.set-preview-shell.is-inside .set-shirt-cross-preview,
.set-preview-shell.is-inside .set-shirt-name-preview,
.set-preview-shell.is-inside .set-shirt-text-preview {
  display: block;
}

.set-preview-shell[data-set-layout="confirmation"].is-inside .set-shirt-cross-preview,
.set-preview-shell[data-set-layout="confirmation"].is-inside .set-shirt-name-preview,
.set-preview-shell[data-set-layout="confirmation"].is-inside .set-shirt-text-preview {
  display: none;
}

.set-shirt-cross-preview {
  left: 42.7%;
  top: 69.1%;
  width: auto;
  height: var(--set-shirt-cross-size);
  object-fit: contain;
}

.set-shirt-name-preview {
  left: 42%;
  top: 73.2%;
  width: 20%;
  font-family: var(--set-shirt-name-font);
  font-size: var(--set-shirt-name-size);
  line-height: 0.95;
}

.set-shirt-text-preview {
  left: 40.9%;
  top: 78.6%;
  width: 23%;
  font-family: var(--set-shirt-text-font);
  font-size: var(--set-shirt-text-size);
  line-height: 1.08;
}

.set-preview-shell.is-accepted {
  animation: biblePreviewAccepted 0.55s ease;
}

.set-rosary-preview-shell {
  --box-rosary-font: Georgia, "Times New Roman", serif;
  --box-rosary-size: 28px;
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 620px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18)),
    url("ma.jpg") center / cover no-repeat;
  box-shadow: 0 18px 42px rgba(31, 59, 70, 0.16);
}

.set-rosary-preview-shell[hidden] {
  display: none;
}

.set-rosary-preview-shell.is-accepted {
  animation: biblePreviewAccepted 0.55s ease;
}

.bible-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.range-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.range-field input {
  min-height: 36px;
  padding: 0;
  accent-color: var(--brand);
}

.range-field strong {
  color: var(--brand-dark);
  font-size: 0.86rem;
  white-space: nowrap;
}

.bible-date-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.bible-date-mode legend {
  grid-column: 1 / -1;
  color: #2c4149;
  font-size: 0.9rem;
  font-weight: 800;
}

.bible-date-mode label {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.bible-date-mode input {
  width: auto;
  min-height: auto;
  accent-color: var(--brand);
}

.bible-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rosary-inquiry-action {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customizer-section {
  display: grid;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.customizer-section h3 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 1.05rem;
}

.box-part-selector {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.box-part-selector select {
  color: var(--brand-dark);
  font-family: var(--font-accent);
  font-weight: 900;
}

.box-customizer-panel[hidden] {
  display: none;
}

.set-customizer-panel[hidden] {
  display: none;
}

.box-customizer-panel.is-active {
  animation: boxPanelIn 0.22s ease;
}

.set-customizer-panel.is-active {
  animation: boxPanelIn 0.22s ease;
}

@keyframes boxPanelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.box-preview-stage {
  --box-foil: #c89524;
  --box-ink: #2c2926;
  --box-bible-font: Georgia, "Times New Roman", serif;
  --box-bible-name-size: 50px;
  --box-bible-name-render-size: 34px;
  --box-bible-date-size: 22px;
  --box-bible-date-render-size: 16px;
  --box-lid-font: "Lucida Handwriting", "Brush Script MT", cursive;
  --box-lid-size: 30px;
  --box-lid-render-size: 22px;
  --box-cover-font: Georgia, "Times New Roman", serif;
  --box-cover-size: 64px;
  --box-cover-render-size: 47px;
  --box-cover-date-size: 18px;
  --box-cover-date-render-size: 18px;
  --box-cover-name-top: 70.5%;
  --box-symbol-size: 160px;
  --box-rosary-font: Georgia, "Times New Roman", serif;
  --box-rosary-size: 28px;
  --box-open-rosary-size: 10px;
  --box-photo-rosary-size: 6px;
  position: relative;
  display: block;
  width: min(100%, 900px);
  aspect-ratio: 5 / 4;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(220, 231, 234, 0.55);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(52, 34, 18, 0.1) 38%, rgba(255, 255, 255, 0.06) 66%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(44, 27, 12, 0.07) 1px 3px, transparent 3px 10px),
    linear-gradient(115deg, #9b7652, #6d4a2e 48%, #b89468);
  color: var(--ink);
  cursor: pointer;
  perspective: 1100px;
  outline: 0;
  box-shadow: 0 12px 26px rgba(31, 59, 70, 0.12);
}

.box-preview-stage:focus-visible {
  outline: 1px solid rgba(14, 88, 116, 0.16);
  outline-offset: 1px;
}

.box-preview-stage.is-open {
  aspect-ratio: 16 / 9;
}

.box-preview-stage.has-rosary.is-open {
  aspect-ratio: 4 / 3;
  background: #d4c6b5;
}

.box-preview-stage.has-photo-open.is-open {
  aspect-ratio: 4 / 3;
  background: #d4c6b5;
}

.box-preview-stage.has-photo-closed {
  aspect-ratio: 4 / 3;
  background: #efe5d5;
}

.box-preview-stage[data-box-layout="confirmation"].has-photo-closed:not(.is-open) {
  aspect-ratio: 1;
}

.box-preview-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.26), transparent 30%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 22%, transparent 78%, rgba(30, 18, 8, 0.18));
  pointer-events: none;
}

.box-preview-stage.has-photo-closed::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 32%, transparent 68%, rgba(83, 57, 23, 0.08));
}

.box-preview-hint {
  position: absolute;
  z-index: 6;
  top: 10px;
  left: 50%;
  max-width: calc(100% - 28px);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--brand-dark);
  font-family: var(--font-accent);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 8px 18px rgba(31, 59, 70, 0.14);
}

.box-closed-view,
.box-open-view,
.box-rosary-view {
  position: absolute;
  inset: 0;
  transition: opacity 0.34s ease, transform 0.45s ease;
}

.box-open-view,
.box-rosary-view {
  display: block;
  opacity: 0;
  transform: scale(0.96) rotateY(-5deg);
  pointer-events: none;
}

.box-preview-stage.is-open .box-closed-view {
  opacity: 0;
  transform: scale(0.94) rotateX(8deg);
  pointer-events: none;
}

.box-preview-stage.is-open .box-open-view {
  opacity: 1;
  transform: scale(1) rotateY(0);
}

.box-closed-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.box-open-photo-view {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: none;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.box-preview-stage.has-photo-open .box-open-photo-view {
  display: block;
}

.box-open-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.box-photo-lid-lines,
.box-photo-bible-name,
.box-photo-bible-date,
.box-photo-rosary-name {
  position: absolute;
  z-index: 2;
  color: rgba(202, 151, 38, 0.92);
  text-align: center;
  text-shadow:
    0 1px 1px rgba(75, 54, 18, 0.22),
    0 0 8px rgba(255, 236, 176, 0.2);
}

.box-photo-lid-lines {
  display: grid;
  left: 24.7%;
  top: 47.5%;
  gap: 0.2em;
  width: 30%;
  font-family: var(--box-lid-font);
  font-size: clamp(11px, calc(var(--box-lid-render-size) * 0.78), 38px);
  line-height: 1.08;
  opacity: 0.9;
  transform: translate(-50%, -50%);
}

.box-photo-bible-name {
  left: 64.6%;
  top: 59.4%;
  width: 25%;
  font-family: var(--box-bible-font);
  font-size: clamp(8px, calc(var(--box-bible-name-render-size) * 0.78), 64px);
  font-style: italic;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.box-photo-bible-date {
  left: 64.6%;
  top: 65.2%;
  width: 20%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(9px, calc(var(--box-bible-date-render-size) * 0.7), 17px);
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.box-photo-rosary-name {
  left: 88.35%;
  top: 42.55%;
  width: 5.2%;
  color: rgba(60, 43, 24, 0.9);
  font-family: var(--box-rosary-font);
  font-size: clamp(4px, var(--box-photo-rosary-size), 9px);
  font-style: italic;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.box-preview-stage.has-photo-open:not(.has-rosary) .box-photo-lid-lines {
  left: 29.5%;
  top: 51%;
  width: 34%;
  font-size: clamp(13px, calc(var(--box-lid-render-size) * 0.86), 46px);
}

.box-preview-stage.has-photo-open:not(.has-rosary) .box-photo-bible-name {
  left: 70%;
  top: 59%;
  width: 28%;
  font-size: clamp(10px, calc(var(--box-bible-name-render-size) * 0.95), 78px);
}

.box-preview-stage.has-photo-open:not(.has-rosary) .box-photo-bible-date {
  left: 70%;
  top: 65%;
  width: 23%;
  font-size: clamp(11px, calc(var(--box-bible-date-render-size) * 0.9), 22px);
}

.box-preview-stage[data-box-layout="confirmation"].has-photo-open .box-photo-lid-lines {
  left: var(--box-photo-lid-left, 31.1%);
  top: var(--box-photo-lid-top, 52.6%);
  width: var(--box-photo-lid-width, 36%);
  gap: 0.22em;
  font-size: clamp(12px, calc(var(--box-lid-render-size) * 0.78), 44px);
  line-height: 1.1;
  opacity: 0.94;
}

.box-preview-stage[data-box-layout="confirmation"].has-photo-open .box-photo-bible-name {
  left: var(--box-bible-text-center, 70.25%);
  top: var(--box-bible-name-top, 63.2%);
  width: var(--box-bible-name-width, 23%);
  overflow: hidden;
  font-family: var(--box-bible-font);
  font-size: clamp(8px, var(--box-bible-name-render-size), 110px);
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.box-preview-stage[data-box-layout="confirmation"].has-photo-open .box-photo-bible-date {
  left: var(--box-bible-text-center, 70.25%);
  top: var(--box-bible-date-top, 68.4%);
  width: var(--box-bible-date-width, 20%);
  overflow: hidden;
  font-size: clamp(8px, var(--box-bible-date-render-size), 24px);
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.box-preview-stage[data-box-layout="confirmation"].has-photo-open.has-rosary .box-photo-rosary-name {
  left: var(--box-photo-rosary-left, 84.8%);
  top: var(--box-photo-rosary-top, 52%);
  width: var(--box-photo-rosary-width, 5%);
  overflow: visible;
  color: rgba(158, 112, 35, 0.92);
  font-size: clamp(7px, var(--box-photo-rosary-size), 15px);
  line-height: 1;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(255, 239, 188, 0.4),
    0 -1px 0 rgba(87, 59, 20, 0.14);
  transform: translate(-50%, -50%);
}

.box-preview-stage[data-box-layout="communion-rosary"] .box-photo-lid-lines {
  left: 28.5%;
  top: 51%;
  width: 28%;
  font-size: clamp(12px, calc(var(--box-lid-render-size) * 0.78), 56px);
}

.box-preview-stage[data-box-layout="communion-rosary"] .box-photo-bible-name {
  left: 56.5%;
  top: var(--box-bible-name-top, 71.8%);
  width: 16%;
  overflow: hidden;
  font-size: clamp(8px, var(--box-bible-name-render-size), 64px);
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -100%);
}

.box-preview-stage[data-box-layout="communion-rosary"].has-photo-open:not(.has-rosary) .box-photo-bible-name {
  left: 63%;
  top: 73.2%;
  width: 21%;
}

.box-preview-stage[data-box-layout="communion-rosary"] .box-photo-bible-date {
  left: 59%;
  top: 75%;
  width: 19%;
  font-size: clamp(10px, calc(var(--box-bible-date-render-size) * 1.3), 22px);
  display: none;
}

.box-preview-stage[data-box-layout="communion-rosary"] .box-photo-rosary-name {
  left: 81.35%;
  top: 49.65%;
  width: 5%;
  overflow: visible;
  color: rgba(48, 36, 24, 0.92);
  font-size: clamp(7px, var(--box-photo-rosary-size), 15px);
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(250, 230, 160, 0.32),
    0 -1px 0 rgba(70, 48, 20, 0.12);
  transform: translate(-50%, -50%);
}

.box-preview-stage.is-rosary-panel .box-closed-view,
.box-preview-stage.is-rosary-panel .box-open-view {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

.box-preview-stage.is-rosary-panel .box-rosary-view {
  opacity: 1;
  transform: scale(1);
}

.box-rosary-view {
  z-index: 3;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 44px);
  background:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
    url("ma.jpg") center / cover no-repeat;
}

.box-rosary-card {
  position: relative;
  display: block;
  width: min(76%, 520px);
  max-height: 88%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: #d8d8d3;
}

.box-rosary-canvas {
  position: absolute;
  inset: 0;
  display: block;
  transform: scale(var(--box-rosary-preview-zoom, 1));
  transform-origin: var(--box-rosary-origin-x, 50%) var(--box-rosary-origin-y, 50%);
}

.box-rosary-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.box-rosary-heart-name {
  position: absolute;
  top: var(--box-rosary-heart-top, 49.2%);
  left: var(--box-rosary-heart-left, 50%);
  z-index: 2;
  display: block;
  width: var(--box-rosary-heart-width, 42%);
  overflow: hidden;
  color: #2e2418;
  font-family: var(--box-rosary-font);
  font-size: clamp(4px, var(--box-rosary-render-size, var(--box-rosary-size)), var(--box-rosary-size-max, 42px));
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  opacity: 0.92;
  text-shadow:
    0 1px 0 rgba(245, 226, 160, 0.35),
    0 -1px 0 rgba(84, 57, 20, 0.18);
  transform: translate(-50%, -50%);
}

.box-closed-lid {
  position: absolute;
  top: 7%;
  left: 7.5%;
  width: 74%;
  height: 86%;
  border: 1px solid rgba(172, 176, 177, 0.7);
  border-radius: 4px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.24) 35%, rgba(217, 225, 230, 0.36) 100%),
    linear-gradient(160deg, #fbfdff, #e9eef2);
  box-shadow:
    22px 19px 32px rgba(43, 32, 22, 0.3),
    inset 0 -20px 34px rgba(123, 133, 138, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transform: none;
}

.box-preview-stage.has-photo-closed .box-closed-lid {
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

.box-closed-lid::before {
  content: "";
  position: absolute;
  inset: 0 0 42%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(227, 241, 249, 0.42), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.box-closed-lid::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(169, 175, 177, 0.2));
  pointer-events: none;
}

.box-preview-stage.has-photo-closed .box-closed-lid::before,
.box-preview-stage.has-photo-closed .box-closed-lid::after {
  content: none;
}

.box-ribbon {
  position: absolute;
  right: -5%;
  top: 46%;
  width: 25%;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef5f8, #ffffff 45%, #d9e3e8);
  box-shadow:
    0 9px 16px rgba(31, 59, 70, 0.18),
    inset 0 -2px 3px rgba(128, 145, 154, 0.18);
}

.box-ribbon::before,
.box-ribbon::after {
  content: none;
}

.box-ribbon::before {
  top: -28px;
  transform: rotate(30deg);
}

.box-ribbon::after {
  bottom: -30px;
  transform: rotate(-32deg);
}

.box-preview-stage.has-photo-closed .box-ribbon {
  display: none;
}

.box-cover-symbol {
  position: absolute;
  z-index: 2;
  display: block;
  top: 13%;
  left: 50%;
  width: clamp(90px, var(--box-symbol-size), 340px);
  height: clamp(90px, var(--box-symbol-size), 340px);
  transform: translateX(-50%);
}

.box-cover-symbol-rings span::before,
.box-cover-symbol-rings span::after {
  content: "";
  position: absolute;
  border: 4px solid var(--box-foil);
  opacity: 0.88;
}

.box-cover-symbol-rings span::before {
  left: 30%;
  top: 38%;
  width: 46px;
  height: 26px;
  border-right: 0;
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
  transform: rotate(-22deg);
}

.box-cover-symbol-rings span::after {
  right: 24%;
  top: 24%;
  width: 34px;
  height: 34px;
  border-left-color: #2f2a24;
  border-bottom-color: #2f2a24;
  border-radius: 50%;
}

.box-cover-symbol img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.box-preview-stage.has-no-cover-symbol .box-cover-symbol {
  display: none;
}

.box-cover-title,
.box-cover-name,
.box-cover-date {
  position: absolute;
  left: 50%;
  width: 82%;
  color: var(--box-foil);
  text-align: center;
  text-shadow: 0 1px 1px rgba(80, 54, 15, 0.22);
  transform: translateX(-50%);
}

.box-cover-title {
  top: 37%;
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
}

.box-cover-title:empty {
  display: none;
}

.box-cover-name {
  top: 60%;
  font-family: var(--box-cover-font);
  font-size: clamp(42px, var(--box-cover-render-size), 128px);
  line-height: 1.05;
}

.box-cover-date {
  top: 78%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, var(--box-cover-date-render-size), 34px);
  font-weight: 700;
}

.box-preview-stage.has-photo-closed .box-cover-title {
  top: 53%;
}

.box-preview-stage.has-photo-closed .box-cover-name {
  top: 70.5%;
  transform: translate(-50%, -50%);
}

.box-preview-stage.has-photo-closed .box-cover-date {
  top: 82%;
  transform: translate(-50%, -50%);
}

.box-preview-stage[data-box-layout="confirmation"].has-photo-closed .box-cover-symbol,
.box-preview-stage[data-box-layout="confirmation"].has-photo-closed .box-cover-title,
.box-preview-stage[data-box-layout="confirmation"].has-photo-closed .box-cover-date {
  display: none;
}

.box-preview-stage[data-box-layout="confirmation"].has-photo-closed .box-cover-name {
  top: var(--box-cover-name-top, 67.8%);
  width: 54%;
  font-family: var(--box-cover-font);
  font-size: clamp(20px, var(--box-cover-render-size), 130px);
  line-height: 0.95;
  transform: translate(-50%, -50%);
}

.box-open-spine {
  position: absolute;
  z-index: 2;
  top: 9%;
  bottom: 7%;
  left: 49.35%;
  width: 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, #d5d8dc, #f7f9fb 40%, #8d949b);
  box-shadow:
    7px 0 12px rgba(47, 51, 55, 0.18),
    -5px 0 8px rgba(47, 51, 55, 0.13);
}

.box-left-ribbon,
.box-right-ribbon {
  position: absolute;
  z-index: 1;
  height: 15px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f7fbfd, #dce5ea);
  box-shadow: 0 6px 13px rgba(31, 59, 70, 0.14);
}

.box-left-ribbon {
  left: -2%;
  top: 56%;
  width: 13%;
}

.box-right-ribbon {
  right: -1%;
  top: 56%;
  width: 12%;
}

.box-inside-lid {
  position: absolute;
  top: 12%;
  left: 5%;
  width: 43%;
  height: 80%;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 54px);
  border: 1px solid rgba(202, 206, 209, 0.82);
  border-radius: 5px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 42%),
    linear-gradient(160deg, #fbfcfd, #e9edf0);
  box-shadow:
    0 14px 26px rgba(38, 42, 45, 0.2),
    inset 0 0 0 7px rgba(255, 255, 255, 0.72);
}

.box-inside-lid::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(126, 140, 148, 0.16), transparent 10%, transparent 88%, rgba(160, 166, 169, 0.14));
  pointer-events: none;
}

.box-lid-lines {
  display: grid;
  gap: 0.36em;
  width: 100%;
  color: var(--box-foil);
  font-family: var(--box-lid-font);
  font-size: clamp(14px, var(--box-lid-render-size), 52px);
  line-height: 1.12;
  text-align: center;
  text-shadow:
    0 1px 1px rgba(80, 54, 15, 0.24),
    0 0 10px rgba(255, 236, 176, 0.28);
}

.box-bible-tray {
  position: absolute;
  top: 10%;
  right: 4%;
  width: 44%;
  height: 82%;
  border: 1px solid rgba(199, 203, 206, 0.82);
  border-radius: 5px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0) 35%),
    linear-gradient(160deg, #f8fafb, #dfe4e8);
  box-shadow:
    0 16px 26px rgba(38, 42, 45, 0.24),
    inset 0 0 0 11px #f3f5f7,
    inset 16px 16px 26px rgba(94, 104, 110, 0.15);
}

.box-bible-tray::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(84, 92, 97, 0.2), rgba(255, 255, 255, 0.62) 18%, rgba(120, 130, 136, 0.12));
  box-shadow: inset 0 0 22px rgba(52, 57, 61, 0.16);
}

.box-preview-stage.has-rosary .box-inside-lid {
  left: 4%;
  width: 39%;
}

.box-preview-stage.has-rosary .box-open-spine {
  left: 45.5%;
}

.box-preview-stage.has-rosary .box-bible-tray {
  right: 16%;
  width: 34%;
}

.box-preview-stage.has-rosary .box-lid-lines {
  font-size: clamp(12px, calc(var(--box-lid-render-size) * 0.82), 42px);
  line-height: 1.08;
}

.box-preview-stage.has-rosary .box-bible-script {
  top: 18%;
  font-size: clamp(14px, 1.7vw, 24px);
}

.box-preview-stage.has-rosary .box-bible-title {
  top: 32%;
  font-size: clamp(24px, 2.7vw, 40px);
}

.box-preview-stage.has-rosary .box-bible-name {
  font-size: clamp(8px, calc(var(--box-bible-name-render-size) * 0.82), 64px);
}

.box-preview-stage.has-rosary .box-bible-date {
  font-size: clamp(10px, calc(var(--box-bible-date-render-size) * 0.9), 18px);
}

.box-preview-stage.has-rosary .box-bible-verbum {
  font-size: 0.58rem;
}

.box-rosary-tray {
  position: absolute;
  top: 8%;
  right: 3.5%;
  width: 12.5%;
  height: 85%;
  overflow: hidden;
  border: 1px solid rgba(199, 203, 206, 0.88);
  border-radius: 4px;
  background: #f8fafb;
  box-shadow:
    0 16px 24px rgba(38, 42, 45, 0.2),
    inset 0 0 0 3px rgba(255, 255, 255, 0.78);
}

.box-rosary-tray-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.box-rosary-tray::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 18%, transparent 82%, rgba(70, 76, 80, 0.12)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 48%, rgba(30, 32, 34, 0.08));
  pointer-events: none;
}

.box-rosary-beads {
  position: absolute;
  top: 8%;
  left: 50%;
  display: grid;
  gap: 4px;
  justify-items: center;
  transform: translateX(-50%);
}

.box-rosary-beads span {
  display: block;
  width: clamp(6px, 1.1vw, 13px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.92), rgba(227, 235, 238, 0.88) 42%, rgba(177, 195, 203, 0.56));
  border: 1px solid rgba(196, 205, 210, 0.9);
  box-shadow: 0 2px 4px rgba(31, 59, 70, 0.16);
}

.box-open-rosary-heart {
  position: absolute;
  z-index: 2;
  top: 45.6%;
  left: 51.5%;
  display: grid;
  place-items: center;
  width: 72%;
  min-height: 28px;
  color: #3f2f1d;
  font-family: var(--box-rosary-font);
  font-size: clamp(6px, var(--box-open-rosary-size), 14px);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(237, 211, 139, 0.36),
    0 -1px 0 rgba(78, 55, 24, 0.14);
  transform: translate(-50%, -50%);
}

.box-open-rosary-heart::before {
  display: none;
}

.box-open-rosary-cross {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: clamp(16px, 2.2vw, 28px);
  height: clamp(28px, 4vw, 46px);
  border-radius: 2px;
  border: 3px solid #c89524;
  transform: translateX(-50%);
}

.box-open-rosary-cross::before {
  content: "";
  position: absolute;
  top: 36%;
  left: 50%;
  width: 170%;
  height: 3px;
  border-radius: 999px;
  background: #c89524;
  transform: translateX(-50%);
}

.box-inside-bible {
  position: absolute;
  inset: 7% 6% 6% 8%;
  overflow: hidden;
  border: 1px solid rgba(193, 180, 156, 0.85);
  border-radius: 6px;
  background:
    linear-gradient(105deg, rgba(222, 222, 215, 0.34), transparent 12%),
    radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.72), transparent 32%),
    linear-gradient(160deg, #fffdf8, #e5dfd0);
  box-shadow:
    0 15px 26px rgba(40, 38, 34, 0.2),
    inset 10px 0 12px rgba(102, 98, 91, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.56);
}

.box-inside-bible::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(179, 163, 131, 0.4);
  border-radius: 7px;
  pointer-events: none;
}

.box-inside-bible::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8%;
  background: linear-gradient(90deg, rgba(120, 116, 108, 0.26), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.box-bible-script,
.box-bible-title,
.box-bible-name,
.box-bible-date,
.box-bible-verbum {
  position: absolute;
  left: 50%;
  width: 86%;
  color: var(--box-foil);
  text-align: center;
  transform: translateX(-50%);
}

.box-bible-script {
  top: 22%;
  font-family: "Lucida Handwriting", "Brush Script MT", cursive;
  font-size: clamp(18px, 2.2vw, 32px);
  line-height: 1;
}

.box-bible-title {
  top: 35%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(31px, 3.7vw, 56px);
  line-height: 1;
  letter-spacing: 0;
}

.box-bible-name {
  top: var(--box-bible-name-top, 64%);
  font-family: var(--box-bible-font);
  font-size: clamp(8px, var(--box-bible-name-render-size), 72px);
  line-height: 1.05;
}

.box-bible-date {
  top: var(--box-bible-date-top, 79%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, var(--box-bible-date-render-size), 24px);
  font-weight: 700;
}

.box-preview-stage.is-no-date .box-bible-name {
  top: var(--box-bible-name-top, 70%);
  font-size: clamp(10px, var(--box-bible-name-render-size-large), 86px);
}

.box-bible-verbum {
  bottom: 6%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
}

.box-preview-stage.is-accepted {
  animation: biblePreviewAccepted 0.55s ease;
}

@keyframes biblePreviewAccepted {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 88, 116, 0.3), 0 16px 34px rgba(31, 59, 70, 0.14);
  }
  100% {
    box-shadow: 0 0 0 9px rgba(14, 88, 116, 0), 0 16px 34px rgba(31, 59, 70, 0.14);
  }
}

.product-gallery-section {
  padding: clamp(34px, 5vw, 64px) clamp(18px, 4vw, 56px);
  background: rgba(255, 255, 255, 0.76);
}

.product-subpage-hero.has-frame-customizer + .product-gallery-section {
  padding-top: 0;
}

.sacrament-subcategory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.sacrament-subcategory-card {
  margin: 0;
}

.sacrament-subcategory-button {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 14px 30px rgba(31, 59, 70, 0.09);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.sacrament-subcategory-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--soft);
}

.sacrament-subcategory-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--soft);
  transition: transform 0.32s ease, filter 0.32s ease;
  transform-origin: center;
}

.sacrament-subcategory-button:hover,
.sacrament-subcategory-button:focus-visible {
  border-color: rgba(14, 88, 116, 0.34);
  box-shadow: 0 22px 46px rgba(31, 59, 70, 0.15);
  transform: translateY(-4px);
}

.sacrament-subcategory-button:hover img,
.sacrament-subcategory-button:focus-visible img {
  filter: saturate(1.07) contrast(1.03) brightness(1.02);
  transform: scale(1.045);
}

.sacrament-subcategory-button:hover .sacrament-subcategory-media.is-contain img,
.sacrament-subcategory-button:focus-visible .sacrament-subcategory-media.is-contain img {
  transform: scale(1.012);
}

.sacrament-subcategory-button:hover .sacrament-subcategory-media::before,
.sacrament-subcategory-button:focus-visible .sacrament-subcategory-media::before,
.sacrament-subcategory-button:hover .sacrament-subcategory-media::after,
.sacrament-subcategory-button:focus-visible .sacrament-subcategory-media::after {
  opacity: 1;
}

.sacrament-subcategory-button:hover .sacrament-subcategory-media::before,
.sacrament-subcategory-button:focus-visible .sacrament-subcategory-media::before {
  transform: translate(0, 0) scale(1);
}

.sacrament-subcategory-button:focus-visible {
  outline: 3px solid rgba(14, 88, 116, 0.35);
  outline-offset: 4px;
}

.sacrament-subcategory-button span,
.sacrament-subcategory-button h3,
.sacrament-subcategory-button small {
  margin-inline: 18px;
}

.sacrament-subcategory-button span {
  margin-top: 18px;
  color: var(--coral);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sacrament-subcategory-button h3 {
  margin-top: 18px;
  margin-bottom: 26px;
  font-size: 1.35rem;
}

.form-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.sacrament-subcategory-button small {
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 800;
}

.sacrament-subcategory-button strong {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  margin: 14px 18px 18px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-accent);
  font-weight: 900;
}

.product-large-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.frame-example-gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.compact-invite-gallery {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.four-column-gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.five-column-gallery {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.natural-ratio-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}

.gallery-back-row {
  grid-column: 1 / -1;
}

.natural-ratio-gallery .gallery-back-row {
  flex: 0 0 100%;
}

.product-large-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(31, 59, 70, 0.09);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.product-image-button {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--soft);
}

.product-image-button img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.32s ease, filter 0.32s ease;
  transform-origin: center;
}

.natural-ratio-gallery .product-large-card,
.natural-ratio-gallery .product-image-button {
  width: fit-content;
  max-width: 100%;
}

.natural-ratio-gallery .product-image-button img {
  width: auto;
  height: clamp(170px, 18vw, 240px);
  max-width: min(100%, 360px);
  aspect-ratio: auto;
  object-fit: contain;
}

.natural-ratio-gallery .product-large-card figcaption {
  width: 100%;
}

.preserve-ratio-gallery {
  align-items: start;
}

.preserve-ratio-gallery .product-large-card {
  align-self: start;
}

.preserve-ratio-gallery .product-image-button {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #f8f6f2;
}

.preserve-ratio-gallery .product-image-button img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.preserve-ratio-gallery .product-large-card:hover .product-image-button img,
.preserve-ratio-gallery .product-image-button:focus-visible img {
  transform: none;
}

.product-image-button::before {
  content: "+";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(14, 88, 116, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand-dark);
  box-shadow: 0 12px 28px rgba(14, 64, 85, 0.18);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(8px, -8px) scale(0.92);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.product-large-card:hover,
.product-large-card:focus-within {
  border-color: rgba(14, 88, 116, 0.34);
  box-shadow: 0 22px 46px rgba(31, 59, 70, 0.15);
  transform: translateY(-4px);
}

.product-large-card:hover .product-image-button img,
.product-image-button:focus-visible img {
  filter: saturate(1.07) contrast(1.03) brightness(1.02);
  transform: scale(1.045);
}

.product-large-card:hover .product-image-button::before,
.product-image-button:focus-visible::before {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.product-image-button:focus-visible {
  outline: 3px solid rgba(14, 88, 116, 0.35);
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-photo,
  .product-media::before,
  .product-media::after,
  .sacrament-subcategory-button,
  .sacrament-subcategory-button img,
  .sacrament-subcategory-media::before,
  .sacrament-subcategory-media::after,
  .product-large-card,
  .product-image-button img,
  .product-image-button::before {
    transition: none;
  }

  .product-card:hover,
  .product-card:focus-within,
  .sacrament-subcategory-button:hover,
  .sacrament-subcategory-button:focus-visible,
  .product-large-card:hover,
  .product-large-card:focus-within {
    transform: none;
  }
}

.frame-example-gallery .product-image-button,
.compact-invite-gallery .product-image-button {
  position: relative;
}

.frame-example-gallery .product-image-button img {
  aspect-ratio: 1 / 1;
}

.compact-invite-gallery .product-image-button img {
  aspect-ratio: 1 / 1;
}

.compact-invite-gallery .product-large-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
}

.frame-example-gallery .product-image-button.is-selected,
.compact-invite-gallery .product-image-button.is-selected {
  outline: 4px solid var(--brand);
  outline-offset: -4px;
}

.product-image-button.is-selected {
  outline: 4px solid var(--brand);
  outline-offset: -4px;
}

.frame-example-gallery .product-image-button.is-selected::after,
.compact-invite-gallery .product-image-button.is-selected::after {
  content: "Odabrano";
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}

.product-image-button.is-selected::after {
  content: "Odabrano";
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}

.product-large-card figcaption {
  padding: 12px 14px;
  color: var(--brand-dark);
  font-weight: 900;
}

.product-large-card figcaption small {
  color: var(--accent);
  font-size: 0.86rem;
  white-space: nowrap;
}

.product-more-button {
  margin-top: 20px;
}

.product-more-button[hidden] {
  display: none;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 54px 18px 18px;
  background: rgba(8, 22, 28, 0.86);
}

.image-lightbox[hidden] {
  display: none;
}

.image-lightbox img {
  display: block;
  width: min(1180px, 96vw);
  height: min(86vh, 900px);
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-dark);
  font-family: var(--font-accent);
  font-weight: 900;
}

.about-band {
  display: grid;
  grid-template-columns: 0.55fr 1fr;
  gap: 24px;
  align-items: start;
  background: var(--brand-dark);
  color: #fff;
}

.about-band .eyebrow {
  color: var(--sun);
}

.about-band p:last-child {
  max-width: 850px;
  color: #d9edf2;
  font-size: 1.08rem;
}

.contact-section {
  background: #fff;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 860px;
  gap: 16px;
}

.contact-form label:nth-child(3),
.contact-form button {
  grid-column: 1 / -1;
}

.contact-form textarea {
  resize: vertical;
}

.cart-drawer {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  width: min(420px, calc(100vw - 36px));
  max-height: min(520px, calc(100vh - 36px));
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.cart-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.cart-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cart-header-order {
  min-height: 44px;
  padding: 0 14px;
}

#cartItems {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#cartItems li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--soft);
}

.cart-item-summary {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.cart-item-details {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cart-item-details strong {
  color: var(--brand-dark);
}

.cart-item-details small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.cart-item-details .cart-detail-section {
  margin-top: 6px;
  color: var(--brand-dark);
  font-weight: 800;
  text-transform: uppercase;
}

.cart-item-personalization {
  max-width: 100%;
}

.cart-item-personalization summary {
  width: fit-content;
  cursor: pointer;
  color: var(--brand-dark);
  font-weight: 900;
}

.cart-item-personalization-body {
  display: grid;
  gap: 3px;
  margin-top: 8px;
}

.cart-remove-button {
  align-self: start;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-dark);
  font-weight: 800;
}

#cartEmpty {
  color: var(--muted);
}

.cart-total,
.order-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-dark);
  font-weight: 900;
}

.cart-total strong,
.order-total strong {
  font-size: 1.1rem;
}

#cartInquiry {
  width: 100%;
  margin-top: 14px;
}

.order-page {
  display: grid;
  gap: 24px;
  padding: clamp(28px, 4vw, 56px);
}

.order-hero-card,
.order-summary-card,
.order-customer-card {
  width: min(1120px, 100%);
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.order-hero-card {
  padding: clamp(24px, 4vw, 42px);
}

.order-hero-card h1 {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.95;
  color: var(--brand-dark);
}

.order-terms {
  display: grid;
  gap: 8px;
  max-width: 820px;
  padding: 16px;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--soft);
}

.order-terms p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

.order-summary-card,
.order-customer-card {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 32px);
}

.order-form {
  display: grid;
  gap: 16px;
}

.order-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.order-form label {
  display: grid;
  gap: 7px;
  color: #2c4149;
  font-size: 0.9rem;
  font-weight: 800;
}

.order-form input,
.order-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.order-form textarea {
  resize: vertical;
}

.order-file-field small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
}

.order-form input[type="file"] {
  padding: 9px;
}

.order-form-wide {
  grid-column: 1 / -1;
}

.order-status {
  min-height: 22px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.order-status.is-error {
  color: #a34132;
}

.order-status.is-success {
  color: var(--brand);
}

.order-items {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-items li {
  padding: 14px;
  border-radius: 8px;
  background: var(--soft);
}

.order-empty {
  margin: 0;
  color: var(--muted);
}

.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .order-form-grid {
    grid-template-columns: 1fr;
  }
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 28px clamp(18px, 4vw, 56px);
  border-top: 1px solid var(--line);
  background: #f7f9fa;
  color: var(--muted);
}

.site-footer img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

@media (max-width: 1120px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .product-subpage-header {
    grid-template-columns: 1fr auto;
  }

  .product-breadcrumbs {
    grid-column: 1 / -1;
    order: 3;
    justify-content: flex-start;
  }

  .search-shell {
    grid-column: 1 / -1;
    order: 3;
  }

  .category-strip {
    top: 139px;
  }

  .storefront,
  .studio-panel,
  .about-band {
    grid-template-columns: 1fr;
  }

  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-subpage-hero {
    grid-template-columns: 1fr;
  }

  .product-subpage-hero.has-bible-customizer {
    grid-template-columns: 1fr;
  }

  .product-subpage-hero.has-candle-customizer {
    grid-template-columns: 1fr;
  }

  .product-subpage-hero.is-personalization-page,
  .product-subpage-hero.has-shirt-customizer,
  .product-subpage-hero.has-set-customizer,
  .product-subpage-hero.has-rosary-customizer,
  .product-subpage-hero.has-frame-customizer,
  .product-subpage-hero.is-box-customizer {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-large-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .frame-example-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .compact-invite-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .four-column-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .five-column-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .natural-ratio-gallery {
    display: flex;
  }

  .natural-ratio-gallery .product-image-button img {
    height: clamp(160px, 26vw, 220px);
  }

  .sacrament-subcategory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .announcement {
    flex-direction: column;
    gap: 2px;
    text-align: center;
  }

  .site-header {
    padding: 12px 16px;
  }

  .header-actions a {
    display: none;
  }

  .category-strip {
    position: static;
    padding-inline: 16px;
  }

  .storefront {
    padding-inline: 16px;
  }

  .storefront-stats,
  .service-row,
  .collection-grid,
  .product-grid,
  .contact-form {
    grid-template-columns: 1fr;
  }

  .studio-preview {
    min-height: 340px;
  }

  .section-heading-row {
    display: block;
  }

  .collection-tile {
    min-height: 190px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-subpage-header {
    position: static;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .product-subpage-header .brand {
    justify-content: flex-start;
  }

  .product-subpage-header .header-actions {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .product-subpage-header .search-shell {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .product-subpage-header .product-breadcrumbs {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .product-subpage-header .product-breadcrumbs > * {
    flex: 0 0 auto;
  }

  .product-subpage-hero {
    padding-inline: 16px;
    background-position: center top 24px;
    background-size: 520px;
  }

  .product-subpage-hero.is-personalization-page {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 22px 14px 30px;
  }

  .product-subpage-hero.is-personalization-page .product-subpage-copy,
  .product-subpage-hero.is-personalization-page .product-hero-visual,
  .product-subpage-hero.is-personalization-page .product-request-card {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .product-subpage-hero.is-personalization-page h1 {
    font-size: 2.35rem;
    line-height: 1.02;
  }

  .product-subpage-hero.is-personalization-page .product-hero-visual {
    margin-top: 14px;
  }

  .product-subpage-hero.is-personalization-page .product-request-card {
    padding: 18px;
  }

  .product-hero-visual[data-visual="baptism-set"] .set-preview-shell,
  .product-hero-visual[data-visual="baptism-set"] .set-candle-full-preview,
  .product-hero-visual[data-visual="baptism-set"] .set-bible-full-preview,
  .product-hero-visual[data-visual="baptism-set"] .set-shirt-full-preview,
  .product-hero-visual[data-visual="baptism-set"] .set-rosary-preview-shell {
    width: 100%;
    max-width: 100%;
  }

  .product-gallery-section {
    padding-inline: 16px;
  }

  .box-preview-stage {
    aspect-ratio: 4 / 3;
  }

  .box-preview-stage.is-open {
    aspect-ratio: 4 / 3;
  }

  .box-preview-stage.has-photo-open.is-open,
  .box-preview-stage.has-rosary.is-open {
    aspect-ratio: 4 / 3;
  }

  .box-open-view {
    padding: 0;
  }

  .box-inside-lid,
  .box-inside-bible {
    min-height: 0;
  }

  .product-large-gallery {
    grid-template-columns: 1fr;
  }

  .frame-example-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-invite-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .four-column-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .five-column-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sacrament-subcategory-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  main::before {
    top: 330px;
    opacity: 0.1;
    background-size: 900px auto;
    background-position: center top;
  }

  .storefront {
    min-height: 300px;
  }

  .site-header {
    grid-template-columns: 1fr;
  }

  .site-header.product-subpage-header {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 12px;
  }

  .brand {
    justify-content: center;
  }

  .product-subpage-header .brand {
    gap: 8px;
    justify-content: flex-start;
  }

  .product-subpage-header .brand img {
    width: 42px;
    height: 42px;
  }

  .product-subpage-header .brand strong {
    font-size: 1rem;
  }

  .product-subpage-header .brand small {
    font-size: 0.7rem;
  }

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

  .product-subpage-header .header-actions {
    justify-content: flex-end;
  }

  .product-subpage-header .cart-button {
    min-height: 40px;
    padding-inline: 10px;
  }

  .product-subpage-header .search-shell {
    min-height: 44px;
    padding-inline: 12px;
  }

  .product-subpage-header .product-breadcrumbs {
    gap: 6px;
    font-size: 0.82rem;
  }

  .product-subpage-header .product-breadcrumbs a,
  .product-subpage-header .product-breadcrumbs span[aria-current="page"] {
    min-height: 34px;
    padding-inline: 10px;
  }

  .product-subpage-hero.is-personalization-page {
    gap: 16px;
    padding: 18px 10px 26px;
  }

  .product-subpage-hero.is-personalization-page h1 {
    font-size: 2.05rem;
  }

  .product-subpage-hero.is-personalization-page .product-hero-visual {
    margin-top: 10px;
  }

  .product-subpage-hero.is-personalization-page .product-request-card {
    gap: 12px;
    padding: 16px 14px;
  }

  .product-subpage-hero.is-personalization-page .product-request-card h2 {
    font-size: 1.45rem;
    line-height: 1.08;
  }

  .work-menu-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  h1 {
    font-size: 3.15rem;
  }

  .hero-actions,
  .button {
    width: 100%;
  }

  .product-actions {
    grid-template-columns: 1fr;
  }

  .natural-ratio-gallery {
    justify-content: center;
  }

  .natural-ratio-gallery .product-large-card,
  .natural-ratio-gallery .product-image-button {
    width: min(100%, 360px);
  }

  .natural-ratio-gallery .product-image-button img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .product-image-button img {
    aspect-ratio: 1 / 1;
  }

  .compact-invite-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .four-column-gallery {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .five-column-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .bible-control-grid,
  .bible-date-mode,
  .bible-action-row {
    grid-template-columns: 1fr;
  }

  .candle-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .candle-preview-name {
    font-size: clamp(24px, var(--candle-name-size), 46px);
  }

  .candle-preview-ribbon-text {
    width: 128px;
    font-size: clamp(13px, var(--candle-ribbon-size), 30px);
  }

  .box-preview-stage {
    aspect-ratio: 3 / 3.55;
  }

  .box-preview-stage.is-open {
    aspect-ratio: 3 / 3.35;
  }

  .box-preview-stage.has-photo-open.is-open,
  .box-preview-stage.has-rosary.is-open {
    aspect-ratio: 4 / 3;
  }

  .box-closed-lid {
    left: 9%;
    width: 78%;
  }

  .box-ribbon {
    right: -1%;
    width: 20%;
  }

  .box-cover-name {
    font-size: clamp(30px, var(--box-cover-render-size), 96px);
  }

  .image-lightbox {
    padding: 64px 10px 10px;
  }
}