/* Model configurator cards (inc/models.php sm_model_card). Mobile first; tokens from app.css. */
.sm-mc-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .sm-mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sm-mc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

.sm-mc { display: flex; flex-direction: column; overflow: hidden; }
.sm-mc__stage { position: relative; aspect-ratio: 4 / 3; cursor: grab; touch-action: pan-y;
  background: radial-gradient(70% 80% at 50% 25%, #fff 0%, var(--frost) 70%, var(--frost-2) 100%); }
.sm-mc__stage:active { cursor: grabbing; }
.sm-mc__stage > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
/* before WebGL is ready (or without it): a flat printed-look plate so the card never looks empty */
.sm-mc__stage:not(.is-ready)::before { content: attr(data-name); position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-4deg);
  padding: 14px 26px; border-radius: 14px; background: var(--kc-plate, var(--ink)); color: var(--kc-text, var(--laser)); font: 900 34px/1 var(--f);
  font-variation-settings: 'wdth' 110; box-shadow: 0 18px 30px -14px rgba(12,31,61,.6); white-space: nowrap; }
.sm-mc__stage[data-model="ornament"]:not(.is-ready)::before { border-radius: 50%; width: 150px; height: 150px; display: grid; place-items: center; padding: 0; font-size: 28px; }
.sm-mc__stage.is-fallback::after { content: "3D preview isn't available on this device."; position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font-size: var(--fs-sm); color: var(--ink-3); }
.sm-mc__size { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; width: min(70%, 280px); margin: 0; margin-inline: auto; text-align: center; font-size: var(--fs-sm); color: var(--ink-3); pointer-events: none; } /* a dimension line under the part (app.css) */

.sm-mc__body { display: grid; gap: 8px; padding: 18px 16px 18px; }
@media (min-width: 960px) { .sm-mc__body { padding: 22px 24px 24px; } }
.sm-mc__h { margin: 0; }
.sm-mc__lead { margin: 0 0 6px; font-size: var(--fs-md); line-height: 1.45; }
.sm-mc__lb { margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-3); }
.sm-mc__in--name { font-size: 19px !important; font-weight: 700; letter-spacing: .01em; }

.sm-mc__tog { display: none; }
.sm-mc__row { display: grid; gap: 6px; margin-top: 4px; }
.sm-mc__rl { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); }
.sm-mc__rl em { font-style: normal; color: var(--ink); }
.sm-mc .sm-swatches { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 6px; margin: -6px 0 0 -6px; scrollbar-width: none; }
.sm-mc .sm-sw { position: relative; cursor: pointer; flex: none; }
.sm-mc .sm-sw input { position: absolute; opacity: 0; }
.sm-mc .sm-sw span { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(12,31,61,.18), inset 0 -4px 8px rgba(0,0,0,.12); }
.sm-mc .sm-sw input:checked + span { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.sm-mc .sm-sw input:focus-visible + span { outline: 2.5px solid var(--focus); outline-offset: 5px; }

.sm-mc__buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--edge); }
.sm-mc__price { display: flex; flex-direction: column; font-weight: 900; font-size: 24px; line-height: 1.05; font-variation-settings: 'wdth' 90; }
.sm-mc__price small { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); font-variation-settings: 'wdth' 100; }
.sm-mc__buy .sm-btn { flex: 1; max-width: 220px; }
.sm-mc__more { justify-self: start; }

/* phone: one colour row at a time (app.js [data-kc-tog] switches data-show) */
@media (max-width: 559px) {
  .sm-mc__tog { display: flex; gap: 6px; margin-top: 4px; }
  .sm-mc__tog .sm-chip { min-height: 38px; padding: 6px 14px; font-size: var(--fs-ui); }
  .sm-mc[data-show="text"] [data-kc-row="plate"], .sm-mc[data-show="plate"] [data-kc-row="text"] { display: none; }
}

/* product page: facts strip under the studio */
.sm-mc__facts { margin: 16px 0; }