@font-face { font-family: "Aclonica"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/aclonica-regular.ttf") format("truetype"); }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/anton-regular.ttf") format("truetype"); }
@font-face { font-family: "Bangers"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/bangers-regular.ttf") format("truetype"); }
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/bebas-neue-regular.ttf") format("truetype"); }
@font-face { font-family: "Black Ops One"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/black-ops-one-regular.ttf") format("truetype"); }
@font-face { font-family: "Caveat Brush"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/caveat-brush-regular.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/figtree-variable.ttf") format("truetype"); }
@font-face { font-family: "Luckiest Guy"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/luckiest-guy-regular.ttf") format("truetype"); }
@font-face { font-family: "Permanent Marker"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/permanent-marker-regular.ttf") format("truetype"); }
@font-face { font-family: "Allura"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/allura-regular.ttf") format("truetype"); }
@font-face { font-family: "Davies Arial"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/arial-regular.ttf") format("truetype"); }
@font-face { font-family: "Carattere"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/carattere-regular.ttf") format("truetype"); }
@font-face { font-family: "Ephesis"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/ephesis-regular.ttf") format("truetype"); }
@font-face { font-family: "Festive"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/festive-regular.ttf") format("truetype"); }
@font-face { font-family: "Melody Sunday"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/melody-sunday.otf") format("opentype"); }
@font-face { font-family: "Meow Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/meow-script-regular.ttf") format("truetype"); }
@font-face { font-family: "Montez"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/montez-regular.ttf") format("truetype"); }
@font-face { font-family: "Pumpkin"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/pumpkin.otf") format("opentype"); }

.product-gallery { display: grid; gap: .55rem; }
.product-gallery-thumbnails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.product-gallery-thumbnails button { padding: 0; border: 1px solid rgba(27,31,36,.16); background: #fff; }
.product-gallery-thumbnails button.is-active { outline: 2px solid #C39D5A; outline-offset: -2px; }
.product-gallery-thumbnails img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.monogram-configurator { display: grid; gap: .85rem; padding: 1rem; border: 1px solid rgba(27,31,36,.16); background: rgba(247,244,238,.65); }
.monogram-configurator[hidden] { display: none; }
.monogram-configurator h3 { margin: 0; font-family: inherit; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.monogram-configurator > p { margin: -.35rem 0 0; color: rgba(27,31,36,.68); font-size: .78rem; }
.monogram-letter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.monogram-visual-preview { display: grid; gap: .7rem; min-height: 160px; padding: 1rem; overflow: hidden; border: 1px solid rgba(27,31,36,.16); background: #fff; place-items: center; }
.monogram-shaped-preview { display: grid; width: min(100%, 360px); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; justify-items: center; }
.monogram-shaped-preview img { width: 100%; height: 128px; object-fit: contain; }
.monogram-single-preview { display: grid; width: 100%; grid-template-columns: minmax(105px, .75fr) minmax(0, 1.25fr); gap: 1rem; align-items: center; }
.monogram-single-preview img { width: 100%; max-height: 150px; object-fit: contain; }
.monogram-single-preview strong { overflow-wrap: anywhere; font-size: clamp(1.8rem, 6vw, 3rem); line-height: 1; text-align: center; }

@media (max-width: 640px) {
  .monogram-letter-grid, .monogram-single-preview { grid-template-columns: 1fr; }
  .monogram-shaped-preview img { height: 94px; }
}