/* 3D catalog (Dasha, 21 Oct: a store that looks real and asks to be clicked; 29 Oct: the Playground kit, /site/assets/kit.css and
   /site/assets/kit-page.css, on every product page). The mock store sits in the hero's glass plate: three rings, each with its own
   "View in 3D"; a ring opens live in 3D on the left with the product's panel on the right, as a jewellery store's own page would
   show it, and its metal and stone change the ring (hero-ring.js, one viewer for each ring, made on its first opening). All rings
   goes back. The store fills the plate's box: 16:9 on a laptop (the three rings in a row), taller on a phone (two by two). */
.fx { position: relative; width: 100%; }
.fx--cat .k-media { aspect-ratio: 16 / 9; }
.fx-stage { position: absolute; inset: 0; }
/* the hero's three bullets in one centred row under the line; a phone stacks them (/site/assets/kit-page.css) */
.k-hero--stack .k-hero-words { max-width: 920px; }  /* the three bullets fit one row */
.cat { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.cat-url { display: flex; align-items: center; gap: 6px; flex: none; padding: 9px 14px; border-bottom: 1px solid rgba(25, 24, 38, .07); font: 400 12.5px/1 var(--sans); color: var(--ink2); }
.cat-url i { width: 9px; height: 9px; border-radius: 50%; background: rgba(25, 24, 38, .12); }
.cat-url span { margin-left: 10px; padding: 5px 12px; border-radius: 8px; background: #f3f3f8; }
.cat-top { display: flex; align-items: center; gap: 24px; flex: none; height: 50px; padding: 0 clamp(14px, 2vw, 24px); border-bottom: 1px solid rgba(25, 24, 38, .07); }
.cat-logo { font: 400 19px/1 'Instrument Serif', serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.cat-nav { display: flex; gap: 18px; font: 400 13px/1 var(--sans); color: var(--ink2); white-space: nowrap; }
.cat-nav .is-on { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
.cat-ic { display: flex; align-items: center; gap: 16px; margin-left: auto; color: var(--ink); }
.cat-ic svg { display: block; }
.cat-ic .bg { position: relative; }
.cat-ic .bg b { position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #5053D0; color: #fff; font: 600 10px/16px var(--sans); text-align: center; transform: scale(0); transition: transform .3s var(--ease); }
.cat-ic .bg.has b { transform: scale(1); }
.cat-body { position: relative; flex: 1; min-height: 0; }
.cat-grid, .cat-pdp { position: absolute; inset: 0; transition: opacity .35s var(--ease), visibility 0s; }
.cat.is-open .cat-grid, .cat:not(.is-open) .cat-pdp { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s var(--ease), visibility 0s .35s; }
.cat-grid { display: flex; flex-direction: column; padding: clamp(14px, 2.4svh, 22px) clamp(14px, 2vw, 24px); }
.cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex: none; margin-bottom: clamp(10px, 2svh, 18px); }
.cat-head .t { margin: 0; font: 500 18px/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.cat-head .n { margin: 0; font: 400 12.5px/1 var(--sans); color: var(--ink2); }
.cat-grid ul { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cat-grid li { display: flex; min-height: 0; }
.cat-grid .cat-more { display: none; }
.cat-piece { -webkit-appearance: none; appearance: none; display: flex; flex-direction: column; align-items: stretch; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; transition: transform .4s var(--ease); }
.cat-piece .im { position: relative; display: block; flex: 1 1 auto; min-height: 0; width: 100%; border-radius: 14px; background: #e2ded8; overflow: hidden; transition: box-shadow .4s var(--ease); }
.cat-piece img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
.cat-piece:hover { transform: translateY(-4px); }
.cat-piece:hover .im { box-shadow: 0 22px 36px -22px rgba(25, 24, 38, .45); }
.cat-piece:hover img { transform: scale(1.05); }
/* Dasha's snapshots (22 Oct): the ring from the front, and standing when the pointer is on the card; the cards and the 3D view take
   the snapshots' own warm grey, so the picture has no edge */
.cat-piece img.up { opacity: 0; transition: opacity .45s var(--ease), transform .6s var(--ease); }
@media (hover: hover) { .cat-piece:hover img.up { opacity: 1; } }
.cat-piece:focus-visible img.up { opacity: 1; }
.cat-piece:focus-visible { outline: 2px solid #6E72F2; outline-offset: 3px; border-radius: 14px; }
.cat-piece .v3d { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); box-shadow: 0 6px 16px -8px rgba(25, 24, 38, .35); font: 500 12px/1 var(--sans); color: var(--ink); white-space: nowrap; transition: background .25s, color .25s; }
.cat-piece:hover .v3d, .cat-piece:focus-visible .v3d { background: #5053D0; color: #fff; }
.cat-piece .nm { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.cat-piece .nm b { font: 500 14px/1.25 var(--sans); }
.cat-piece .pr { margin-top: 3px; font: 400 13px/1.2 var(--sans); color: var(--ink2); }
.cat-piece--you .im { background: none; border: 1.5px dashed rgba(110, 114, 242, .45); color: #6E72F2; display: grid; place-items: center; }
/* the hint: on the first ring, the chip pulses and a pointer taps it, until the visitor hovers or opens a ring */
.cat-piece .cur { display: none; }
.cat-piece.is-hint .cur { display: block; position: absolute; left: 104px; bottom: -4px; width: 26px; height: 26px; color: var(--ink); filter: drop-shadow(0 2px 3px rgba(25, 24, 38, .3)); animation: cat-tap 1.8s var(--ease) infinite; pointer-events: none; }
.cat-piece.is-hint .v3d { animation: cat-pulse 1.8s ease-out infinite; }
@keyframes cat-tap { 0%, 100% { transform: translate(10px, 8px); } 45% { transform: translate(0, 0); } 55% { transform: translate(0, 0) scale(.88); } 70% { transform: translate(0, 0); } }
@keyframes cat-pulse { 0% { box-shadow: 0 6px 16px -8px rgba(25, 24, 38, .35), 0 0 0 0 rgba(110, 114, 242, .55); } 70%, 100% { box-shadow: 0 6px 16px -8px rgba(25, 24, 38, .35), 0 0 0 10px rgba(110, 114, 242, 0); } }
/* the product page: the ring live on the left, its panel on the right */
.cat-pdp { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(250px, 1fr); }
.cat-pdp .vw { position: relative; min-height: 0; background: #e2ded8; }
.cat .vw .hero3d { position: absolute; inset: 0; visibility: hidden; }
.cat .vw .hero3d.is-on { visibility: inherit; }
.cat .vw .hero3d .ring { width: 100%; height: 100%; margin: 0; aspect-ratio: auto; background: transparent; }
.cat .vw .ring-ui { display: none !important; }  /* the store's own panel has the swatches */
.cat-pdp .tag { position: absolute; z-index: 2; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 8px; border-radius: 999px; background: #fff; font: 500 12px/1 var(--sans); color: #5053D0; pointer-events: none; }
/* a ring that opens: only the loading gem until it is live (Dasha, 22 Oct: no picture of the ring first); the picture comes back only
   if the 3D cannot run. The "Live 3D" chip waits for the ring too. */
.cat .vw .ring-poster { display: none; }
.cat .vw .ring--still .ring-poster { display: block; }
.cat .vw .ring-stage { transition: opacity .6s var(--ease); }
.cat .vw .ring:not(.ring--live) .ring-stage { opacity: 0; }
.cat .vw .ldb-t { display: none; }
.cat-pdp .tag { transition: opacity .4s var(--ease); }
.cat .vw:has(.hero3d.is-on .ring--loading) .tag { opacity: 0; }
.cat-pdp .info { display: flex; flex-direction: column; align-items: stretch; min-height: 0; overflow: hidden; padding: clamp(16px, 2.8svh, 28px) clamp(16px, 2vw, 26px); }
.cat-pdp .back { -webkit-appearance: none; appearance: none; align-self: flex-start; margin: 0 0 clamp(12px, 2.4svh, 22px); padding: 0; border: 0; background: none; font: 500 13px/1 var(--sans); color: #5053D0; cursor: pointer; }
.cat-pdp .back:hover { text-decoration: underline; text-underline-offset: 4px; }
.cat-pdp h3 { margin: 0; font: 500 clamp(20px, 1.7vw, 24px)/1.15 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.cat-pdp .pr { margin: 6px 0 0; font: 500 16px/1 var(--sans); color: var(--ink); }
.cat-pdp .note { margin: 10px 0 0; font: 400 13px/1.45 var(--sans); color: var(--ink2); }
/* the metal and the stone, on the right of the open ring (Dasha, 22 Oct: the material configurator back), as the ring
   configurator's own material art (/site/assets/media/mat/) */
.cat-pdp .opt { margin-top: clamp(14px, 2.6svh, 22px); }
.cat-pdp .opt .lb { display: flex; gap: 6px; margin: 0 0 9px; font: 500 12.5px/1 var(--sans); color: var(--ink); }
.cat-pdp .opt .lb span { font-weight: 400; color: var(--ink2); }
.cat-pdp .sw { display: flex; gap: 8px; }
.cat-pdp .sw button { -webkit-appearance: none; appearance: none; position: relative; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(25, 24, 38, .12); background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.cat-pdp .sw button:hover { border-color: rgba(80, 83, 208, .55); transform: translateY(-1px); }
.cat-pdp .sw button[aria-checked="true"] { border-color: #5053D0; box-shadow: 0 0 0 1px #5053D0; }
.cat-pdp .sw button:focus-visible { outline: 2px solid #6E72F2; outline-offset: 2px; }
.cat-pdp .sw img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; object-fit: cover; }
.cat-pdp .add { -webkit-appearance: none; appearance: none; width: 100%; min-height: 44px; margin: clamp(18px, 3.4svh, 30px) 0 0; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font: 500 14px/1 var(--sans); cursor: pointer; transition: background .25s; }
.cat-pdp .add:hover { background: #2c2b40; }
.cat-pdp .add.is-done { background: #5053D0; }
.cat-pdp .add:focus-visible { outline: 2px solid #6E72F2; outline-offset: 3px; }
/* the toast: what the store just did by itself, under the plate */
.fx-toast { position: absolute; z-index: 5; left: 50%; top: calc(100% + 14px); display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid #fff; box-shadow: 0 14px 34px -14px rgba(25, 24, 38, .35);
  font: 400 14px/1 var(--sans); color: var(--ink2); opacity: 0; transform: translate(-50%, -8px) scale(.96); transition: opacity .3s, transform .3s; pointer-events: none; }
.fx-toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.fx-toast b { font-weight: 500; color: var(--ink); }
.fx-toast .ar { color: #6E72F2; }
.fx-toast .sw { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(110, 114, 242, .1); color: #6E72F2; overflow: hidden; }
.fx-toast .sw svg { width: 20px; height: 20px; }
.fx-toast .sw img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
@media (max-width: 700px) { .cat-nav { display: none; } }
@media (max-width: 860px) { .fx--cat .k-media { aspect-ratio: 1; }
  .cat-top { gap: 12px; height: 44px; } .cat-logo { font-size: 17px; }
  .cat-grid { padding: 12px; } .cat-head { margin-bottom: 10px; } .cat-head .t { font-size: 16px; }
  .cat-grid ul { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px 10px; } .cat-grid .cat-more { display: flex; }
  .cat-piece .nm { margin-top: 8px; } .cat-piece .nm b { font-size: 13px; } .cat-piece .pr { font-size: 12.5px; }
  .cat-piece .v3d { left: 8px; bottom: 8px; height: 28px; padding: 0 10px 0 7px; font-size: 12px; } .cat-piece.is-hint .cur { left: 90px; }
  .cat-pdp { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .cat-pdp .info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 12px 14px 14px; border-top: 1px solid rgba(25, 24, 38, .07); }
  .cat-pdp .back { grid-column: 1 / -1; justify-self: start; margin-bottom: 8px; } .cat-pdp .pr { margin: 0; } .cat-pdp .note { display: none; }
  .cat-pdp .opt { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } .cat-pdp .opt .lb { margin: 0; }
  .cat-pdp .sw button { width: 38px; height: 38px; } .cat-pdp .add { grid-column: 1 / -1; margin-top: 12px; } }
@media (max-width: 560px) { .fx--cat .k-media { aspect-ratio: 5 / 8; } }
@media (prefers-reduced-motion: reduce) { .cat-piece, .cat-piece img, .cat-piece img.up, .cat-piece .im, .cat-grid, .cat-pdp, .cat-pdp .sw button { transition: none; } .cat-piece.is-hint .cur, .cat-piece.is-hint .v3d { animation: none; } }
@media (prefers-reduced-motion: reduce) { .fx-toast { transition: none; } }

/* See it in action (Dasha, 22 Oct: Prashant's 3D catalog): his demo store live in a browser frame, in a glass plate as the hero's;
   it shows the whole page of a laptop, drawn scaled down; a phone gets a picture of the store's own phone layout and a new-tab
   button (/site/assets/demo-phone.css) */
.k-act .k-media { aspect-ratio: 16 / 9; }
.rc-frame { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.rc-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px; border-bottom: 1px solid rgba(25, 24, 38, .07); background: #fafafc; }
.rc-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(25, 24, 38, .12); }
.rc-bar .url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 6px; padding: 5px 12px; border-radius: 8px; background: #fff; border: 1px solid rgba(25, 24, 38, .07);
  font: 400 12px/1.2 var(--sans); color: var(--ink2); }
.rc-bar a { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font: 500 12.5px/1 var(--sans); color: #5053D0; text-decoration: none; }
.rc-bar a:hover { background: rgba(110, 114, 242, .08); }
.rc-bar a:focus-visible { outline: 2px solid #6E72F2; outline-offset: 1px; }
.rc-view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.rc-view iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; transform-origin: 0 0; background: #fff; }
.rc-view .wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 400 13px/1 var(--sans); color: var(--ink2); pointer-events: none; }
@media (max-width: 860px) { .k-act .k-media { aspect-ratio: 4 / 5; } .rc-bar { height: 44px; } .rc-bar a { height: 36px; } }

/* the end plate: the diamond cuts from the Figma (Dasha, 29 Oct) under the buttons; no faded ring behind */
.cat-end { display: block; width: min(100%, 960px); height: auto; margin: clamp(28px, 4vw, 44px) auto 0; }
.k-end-plate::before { display: none; }