/* NOOM page: visualiser and piece cards */
.nm { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.nm__stage { position: sticky; top: calc(var(--header-h) + 1rem); }
.nm__canvas { position: relative; aspect-ratio: 1 / 1; margin: 0; overflow: hidden; background: #ece9e6; }
.nm__canvas canvas { display: block; width: 100%; height: 100%; transition: opacity .3s var(--ease); }
.nm.is-busy .nm__canvas canvas { opacity: .82; }
.nm__loading[hidden] { display: none; }
.nm__loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 2rem; text-align: center; color: #5b4c48; font-size: .95rem; }
.nm__tag { position: absolute; left: 1rem; bottom: 1rem; padding: .35rem .85rem; border-radius: 100em; font-size: .8rem; color: var(--cream); background: rgba(20, 14, 13, .55); border: 1px solid rgba(233, 228, 222, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nm__tag:empty { display: none; }
.nm__note { margin: .8rem 0 0; font-size: .82rem; color: var(--muted); }
.nm__panel { display: grid; gap: 1.6rem; }
.nm__k { display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.nm__k span { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid rgba(233, 228, 222, .35); font-size: .72rem; letter-spacing: 0; color: var(--cream); }
.nm__k em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--cream); font-size: .95rem; }
.nm__k b { font-weight: inherit; }
.nm__pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .6rem; }
.nm-p { display: grid; gap: .4rem; padding: .4rem; border-radius: 14px; border: 1px solid rgba(233, 228, 222, .2); background: rgba(233, 228, 222, .04); color: var(--cream); font: inherit; font-size: .78rem; line-height: 1.2; text-align: left; cursor: pointer; transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.nm-p img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #ece9e6; }
.nm-p:hover { border-color: rgba(233, 228, 222, .5); }
.nm-p.is-on { border-color: rgba(201, 216, 221, .95); background: rgba(143, 168, 178, .28); }
.nm__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.nm__cws { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.nm-cw { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem .45rem .45rem; border-radius: 100em; border: 1px solid rgba(233, 228, 222, .24); background: rgba(233, 228, 222, .04); color: var(--cream); font: inherit; font-size: .84rem; cursor: pointer; text-align: left; transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.nm-cw__dots { display: inline-flex; flex: none; }
.nm-cw__dots i { width: .95rem; height: .95rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); margin-left: -.3rem; }
.nm-cw__dots i:first-child { margin-left: 0; }
.nm-cw:hover { border-color: rgba(233, 228, 222, .55); }
.nm-cw.is-on { border-color: rgba(201, 216, 221, .95); background: rgba(143, 168, 178, .3); }
.nm__sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: rgba(233, 228, 222, .05); border: 1px solid rgba(233, 228, 222, .16); }
.nm__qty { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--muted); }
.nm__qty button { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid rgba(233, 228, 222, .35); background: none; color: var(--cream); font: inherit; font-size: 1.1rem; cursor: pointer; }
.nm__qty output { min-width: 1.6rem; text-align: center; color: var(--cream); font-size: 1.05rem; }
.nm__price { display: grid; justify-items: end; text-align: right; }
.nm__price strong { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.1; }
.nm__price small { font-size: .78rem; color: var(--muted); }
.nm__ctas .btn { flex: 1 1 auto; justify-content: center; }
.nm__fine { margin: 0; font-size: .84rem; color: var(--muted); }
/* piece cards */
.nm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.nm-card { display: grid; gap: 1rem; align-content: start; }
.nm-card__img { position: relative; display: block; aspect-ratio: 9 / 10; overflow: hidden; background: #ece9e6; }
.nm-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.nm-card__img:hover img { transform: scale(1.03); }
.nm-card__try { position: absolute; left: .8rem; bottom: .8rem; padding: .35rem .8rem; border-radius: 100em; font-size: .78rem; color: var(--cream); background: rgba(20, 14, 13, .55); border: 1px solid rgba(233, 228, 222, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(.3rem); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.nm-card__img:hover .nm-card__try, .nm-card__img:focus-visible .nm-card__try { opacity: 1; transform: none; }
.nm-card__body h3 { font-family: var(--serif); font-weight: 300; font-size: 1.6rem; margin: 0 0 .4rem; }
.nm-card__body p { margin: 0 0 .5rem; color: rgba(233, 228, 222, .82); }
.nm-card__size { font-size: .85rem; color: var(--muted) !important; }
.nm-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .6rem; }
.nm-card__price { margin: 0 !important; color: var(--cream) !important; }
.nm-card__price small { color: var(--muted); }
@media (max-width: 991px) {
  .nm { grid-template-columns: 1fr; }
  /* the picture stays in view while you work through the choices below it */
  .nm__stage { top: calc(var(--header-h) - .25rem); z-index: 3; padding-bottom: .6rem; background: linear-gradient(180deg, var(--brown) 85%, rgba(29, 21, 20, 0)); }
  .nm__canvas { aspect-ratio: auto; height: min(44svh, 92vw); }
  .nm__canvas canvas { object-fit: contain; }
  .nm__note { display: none; }
  .nm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .nm-cards { grid-template-columns: 1fr; }
  .nm__pieces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
  .nm-p span { font-size: .7rem; }
  .nm__cws { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nm-card__try { opacity: 1; transform: none; }
}
/* v122: Gropius bar or counter height */
.nm__heights { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; width: 100%; grid-column: 1 / -1; }
.nm__heights[hidden] { display: none; }
/* v122: each piece in "About the collection" opens on demand */
details.nmc-piece { border-top: 1px solid var(--line, rgba(233, 228, 222, .14)); padding: 0; }
details.nmc-piece:last-child { border-bottom: 1px solid var(--line, rgba(233, 228, 222, .14)); }
details.nmc-piece > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 1rem; padding: 1.1rem 0; }
details.nmc-piece > summary::-webkit-details-marker { display: none; }
details.nmc-piece > summary h3 { margin: 0; flex: 1; }
.nmc-piece__from { color: var(--muted, rgba(233, 228, 222, .62)); font-size: .9rem; white-space: nowrap; }
.nmc-piece__chev { width: .7rem; height: .7rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .3s; align-self: center; margin-right: .3rem; }
details.nmc-piece[open] .nmc-piece__chev { transform: rotate(-135deg); }
.nmc-piece__body { padding: 0 0 1.4rem; }
.nmc-info:has(details.nmc-piece) { display: block; max-width: 60rem; }