@font-face { font-family: "Shalimar"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/shalimar-regular.ttf") format("truetype"); }
@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"); }

.store-site .selected-product { grid-template-columns: minmax(0, 1fr); }
.product-gallery { display: grid; gap: .65rem; min-width: 0; margin: 0; padding: 0; }
.product-gallery-stage { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--porcelain); }
.selected-product .product-gallery-stage img { display: block; width: 100%; height: 100%; min-height: 0; max-height: 420px; object-fit: contain; }
.product-gallery-controls { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.product-gallery-controls[hidden] { display: none; }
.product-gallery-controls button { min-width: 44px; min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; }
.product-gallery-controls button:hover { border-color: var(--gold); }
.product-gallery-controls button:focus-visible, .product-gallery:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.selected-product .product-gallery-status { margin-right: auto; color: var(--muted); font-size: .75rem; font-weight: 500; text-transform: none; white-space: nowrap; }

.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; }
}