/* Tutti i mockup si dimensionano sulla larghezza del proprio contenitore. */
.mk { container-type: inline-size; width: 100%; font-family: "Inter Tight", system-ui, sans-serif; }
.mk-body { font-size: calc(100cqw / 56); color: var(--ink, #222); background: var(--bg, #fff); overflow: hidden; position: relative; height: 100%; }
.mk h4, .mk h5, .mk p { margin: 0; }
.mk-phone .mk-body-phone { font-size: calc(100cqw / 22); }
.mk-card .mk-body { font-size: calc(100cqw / 26); }
.mk-screen, .mk-flat, .mk-dash, .mk-card, .mk-phone { box-shadow: 0 34px 80px rgba(0, 0, 0, .55), 0 18px 60px rgba(255, 42, 26, .16); }

.mk-laptop { width: 100%; }
.mk-screen { aspect-ratio: 16 / 10; border: 1.2cqw solid #15161d; border-radius: 1.8cqw 1.8cqw 0 0; overflow: hidden; background: #000; }
.mk-base { height: 1.8cqw; margin: 0 -3.5%; background: linear-gradient(#3a3c46, #1a1b22); border-radius: 0 0 1.6cqw 1.6cqw; }
.mk-flat { aspect-ratio: 16 / 10; border-radius: 1.4cqw; overflow: hidden; background: #111; }

.mk-phone { aspect-ratio: 9 / 19; border: 3.2cqw solid #111218; border-radius: 13cqw; overflow: hidden; position: relative; background: #111218; }
.mk-notch { position: absolute; z-index: 3; left: 50%; top: 2.4cqw; width: 30%; height: 6cqw; margin-left: -15%; background: #08090d; border-radius: 4cqw; }

/* Sito */
.s-page { will-change: transform; }
.s-nav { display: flex; align-items: center; gap: 1.4em; padding: 1em 2em; font-size: .8em; }
.s-nav b { letter-spacing: .14em; margin-right: auto; font-size: .92em; }
.s-pill { font-style: normal; padding: .4em .9em; color: #fff; background: var(--a); border-radius: 2em; text-shadow: none; }
.s-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5em; padding: 1.4em 2em 2.4em; align-items: center; }
.s-hero small { font-size: .7em; letter-spacing: .14em; text-transform: uppercase; color: var(--a); }
.s-hero h4 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 3em; line-height: 1.03; letter-spacing: -.02em; margin: .25em 0 .35em; }
.s-hero p { font-size: .86em; line-height: 1.35; opacity: .72; margin-bottom: 1em; }
.s-cta { display: inline-block; padding: .55em 1.1em; font-size: .8em; color: #fff; background: var(--a); border-radius: 2em; }
.s-arch { position: relative; width: 78%; justify-self: end; aspect-ratio: 1 / 1.08; border-radius: 50% 50% .6em .6em / 48% 48% .6em .6em; background: linear-gradient(170deg, var(--b), var(--a) 62%, #7d140c); }
.s-arch i { position: absolute; right: 19%; top: 16%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--sun); }
.s-row { padding: 1em 2em 2em; }
.s-row h5, .s-dark h5, .b-page h5, .ca-page h5 { font-family: Georgia, serif; font-weight: 400; font-size: 1.9em; margin-bottom: .6em; letter-spacing: -.01em; }
.s-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.s-card i { display: block; aspect-ratio: 1 / .92; border-radius: .5em; margin-bottom: .4em; }
.s-card span { font-size: .78em; }
.c1 i { background: linear-gradient(160deg, var(--b), var(--a)); }
.c2 i { background: linear-gradient(180deg, #d9b199, var(--stone)); }
.c3 i { background: radial-gradient(circle at 60% 40%, var(--sun) 0 15%, transparent 16%), #2a211d; }
.s-dark { padding: 2.4em 2em; background: #1b1512; color: #f4efe6; }

/* Telefono: layout impilato */
.mk-body-phone .s-nav { padding-top: 3em; gap: .6em; }
.mk-body-phone .s-nav span { display: none; }
.mk-body-phone .s-hero { grid-template-columns: 1fr; padding: .4em 1.4em 1.4em; }
.mk-body-phone .s-hero > div:first-child { order: 2; }
.mk-body-phone .s-hero h4 { font-size: 2.1em; }
.mk-body-phone .s-row { padding: .4em 1.4em 1.4em; }
.mk-body-phone .s-cards { grid-template-columns: 1fr 1fr; }

/* Gestionale */
.mk-dash { aspect-ratio: 16 / 10; border: 1px solid rgba(255, 255, 255, .1); border-radius: 1.4cqw; overflow: visible; background: #151723; }
.mk-dash .mk-body { display: grid; grid-template-columns: 11em 1fr; background: #151723; color: #dfe1e8; overflow: visible; border-radius: 1.4cqw; }
.d-side { display: flex; flex-direction: column; gap: .5em; padding: 1.4em 1em; border-right: 1px solid rgba(255, 255, 255, .07); font-size: .86em; }
.d-side b { margin-bottom: 1em; color: #fff; }
.d-side span { padding: .42em .6em; border-radius: .4em; opacity: .62; }
.d-side .on { background: rgba(255, 42, 26, .16); color: #ff7a66; opacity: 1; }
.d-main { padding: 1.4em 1.6em; min-width: 0; display: flex; flex-direction: column; gap: 1em; overflow: hidden; }
.d-head { display: flex; justify-content: space-between; align-items: baseline; }
.d-head h5 { font-size: 1.5em; font-weight: 600; }
.d-head span { font-size: .8em; opacity: .55; }
.d-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.d-stats div { padding: .8em 1em; background: rgba(255, 255, 255, .04); border-radius: .5em; }
.d-stats small { display: block; font-size: .72em; opacity: .55; margin-bottom: .3em; }
.d-stats b { font-size: 1.3em; font-weight: 600; }
.d-charts { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.5fr 1fr; gap: .8em; }
.d-bars { display: flex; align-items: flex-end; gap: 3.5%; padding: .8em; background: rgba(255, 255, 255, .03); border-radius: .5em; }
.d-bars i { flex: 1; background: linear-gradient(to top, #8b130a, #ff3a22); border-radius: .2em .2em 0 0; transform-origin: bottom; }
.d-charts svg { width: 100%; height: 100%; padding: .8em; background: rgba(255, 255, 255, .03); border-radius: .5em; box-sizing: border-box; }
.d-table div { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 1em; padding: .4em 0; font-size: .8em; border-top: 1px solid rgba(255, 255, 255, .06); }
.d-table em { font-style: normal; color: #ff7a66; text-shadow: none; }
.d-toast, .p-toast {
  position: absolute; right: -2em; top: -1.4em; display: flex; align-items: center; gap: .6em;
  padding: .7em 1em; font-size: .85em; color: #fff; background: #1e1420;
  border: 1px solid rgba(255, 42, 26, .7); border-radius: .6em; box-shadow: 0 0 24px rgba(255, 42, 26, .35);
}
.d-toast i, .p-toast i { width: 1.1em; height: 1.1em; border-radius: .3em; background: var(--red); }

/* Negozio */
.sh-top { display: flex; justify-content: space-between; align-items: center; padding: 3em 1.3em .9em; font-family: Georgia, serif; font-size: .9em; }
.sh-top i { width: 1em; height: 1em; border-radius: .25em; background: var(--a); }
.s-card i, .sh-grid i, .sf-grid i { position: relative; overflow: hidden; }
.s-card.c1 i::after, .sh-grid .c1 i::after, .sf-grid .c1 i::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 46%; height: 62%; translate: -50% 0;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: rgba(255, 235, 220, .24);
}
.s-card.c2 i::after, .sh-grid .c2 i::after, .sf-grid .c2 i::after {
  content: ""; position: absolute; left: 50%; bottom: 14%; width: 36%; height: 58%; translate: -50% 0;
  border-radius: 46% 46% 20% 20%; background: linear-gradient(170deg, #8a4a30, #5d2c1b);
}
.sh-hero { margin: 0 1em; padding: 1em; height: 11.5em; position: relative; border-radius: .5em; background: linear-gradient(150deg, var(--b), var(--a)); color: #fff; display: flex; align-items: flex-end; font-size: .9em; }
.sh-hero i { position: absolute; right: 12%; top: 18%; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--sun); }
.sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; padding: 1em; }
.sh-grid div i, .sf-grid div i { display: block; aspect-ratio: 1; border-radius: .4em; margin-bottom: .25em; }
.sh-grid span, .sf-grid span { display: block; font-size: .68em; }
.sh-grid b, .sf-grid b { font-size: .74em; font-weight: 600; }

.mk-card { border-radius: 4cqw; background: var(--bg); position: relative; }
.mk-card .mk-body { overflow: visible; border-radius: 4cqw; padding: 1em; display: flex; flex-direction: column; gap: .8em; }
.p-img { aspect-ratio: 1 / .78; border-radius: .6em; display: grid; place-items: center; background: linear-gradient(160deg, #e8dfd3, #cdbba9); }
.p-img i { position: relative; width: 30%; aspect-ratio: 1 / 1.15; margin-top: 14%; border-radius: .5em .5em .9em .9em; background: linear-gradient(100deg, #8d1a10, var(--a) 40%, #ee7a5e 72%, #a3231a); box-shadow: 0 1em 1.4em rgba(90, 40, 20, .35); }
.p-img i::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: .5em; margin-left: -1px; background: #33231c; }
.p-img i::after { content: ""; position: absolute; left: 50%; bottom: calc(100% + .35em); width: .62em; height: 1.05em; margin-left: -.31em; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 72%, #fff3c8, #ffb648 55%, #ff7a2a); box-shadow: 0 0 1.1em rgba(255, 170, 70, .85); }
.p-row { display: flex; justify-content: space-between; font-size: .95em; }
.p-press { position: relative; }
.p-cta { display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; }
.p-cta > span { grid-area: 1 / 1; }
.p-cta [data-add-done] { opacity: 0; }
.p-ripple { position: absolute; left: 50%; top: 50%; width: 14em; height: 14em; margin: -7em 0 0 -7em; border-radius: 50%; background: rgba(255, 255, 255, .6); opacity: 0; pointer-events: none; }
.p-tap { position: absolute; left: 50%; top: 50%; width: 1.5em; height: 1.5em; margin: -.75em 0 0 -.75em; border-radius: 50%; background: rgba(255, 255, 255, .4); border: 2px solid #fff; box-shadow: 0 .2em .8em rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; }
.p-toast { top: auto; bottom: -2.4em; right: -1em; }
.d-stats b { font-variant-numeric: tabular-nums; }
.sh-top i { position: relative; }
.sh-top em { position: absolute; right: -.6em; top: -.6em; display: grid; place-items: center; width: 1.25em; height: 1.25em; font-family: "Inter Tight", system-ui, sans-serif; font-size: .72em; font-style: normal; font-weight: 700; color: #fff; background: var(--ink); border-radius: 50%; text-shadow: none; }
.s-gallery { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 9em 9em; gap: .8em; padding: .6em 2em 1.6em; }
.s-gallery i { display: block; border-radius: .5em; }
.s-gallery .g1 { grid-row: span 2; background: linear-gradient(170deg, var(--b), var(--a) 62%, #7d140c); }
.s-gallery .g2 { background: linear-gradient(180deg, #d9b199, var(--stone)); }
.s-gallery .g3 { background: radial-gradient(circle at 60% 40%, var(--sun) 0 18%, transparent 19%), #2a211d; }
.mk-body-phone .s-gallery { padding: .4em 1.4em 1.4em; grid-template-rows: 6em 6em; }

.sf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; padding: .8em 2em; }
.sf-open { display: inline-flex; align-items: center; gap: .5em; margin: .4em 2em; padding: .5em 1em; font-size: .85em; color: #fff; background: var(--a); border-radius: 2em; }
.sf-open i { width: .6em; height: .6em; border-radius: 50%; background: #fff; }

/* Prenotazioni */
.b-page { padding: 1.6em 2.4em; display: flex; flex-direction: column; gap: 1em; align-items: flex-start; }
.b-days { display: flex; gap: .6em; }
.b-days span { padding: .5em .8em; border-radius: .5em; background: rgba(0, 0, 0, .06); font-size: .9em; }
.b-days .on { background: var(--ink); color: var(--bg); }
.b-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; width: 100%; }
.b-slots i { font-style: normal; padding: .7em; text-align: center; border-radius: .5em; background: rgba(0, 0, 0, .06); }
.b-slots .on { background: var(--a); color: #fff; }
.mk-dark .mk-body { background: #14151c; color: #e4e5ea; }
.ca-page { padding: 1.6em 2.4em; }
.ca-page div { display: flex; align-items: center; gap: .8em; padding: .55em 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.ca-page i { width: .7em; height: .7em; border-radius: 50%; background: #ff4a36; }
.ca-page span { color: #ff7a66; }
.ca-page b { margin-left: auto; font-weight: 500; opacity: .6; }

/* Negozio chiuso */
.cl-page { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2em; }
.cl-awning { width: 60%; height: 3em; background: repeating-linear-gradient(90deg, #b5170d 0 2.2em, #f1ece4 2.2em 4.4em); border-radius: .3em .3em 0 0; }
.cl-shutter { width: 54%; flex: 1; display: grid; place-items: center; background: repeating-linear-gradient(#5b5f6c 0 .7em, #4a4d59 .7em 1.4em); }
.cl-shutter span { padding: .4em 1em; font-weight: 800; letter-spacing: .08em; color: #1a1a1a; background: #f4f0e8; transform: rotate(-5deg); font-size: 1.6em; }

/* Sito vecchio */
.mk-old .mk-body { background: #dcdcdc; color: #1a1a1a; font-family: "Times New Roman", serif; }
.o-head { padding: .5em 1em; font-size: 1.6em; font-weight: 700; color: #fff; background: #27478f; }
.o-mar { padding: .3em; font-size: .9em; text-align: center; background: #f1e545; }
.o-main { display: grid; grid-template-columns: 9em 1fr; gap: 1em; padding: 1em; }
.o-side { display: flex; flex-direction: column; gap: .5em; color: #1a2fbd; }
.o-content { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.o-img { aspect-ratio: 16 / 9; background: #b4b4b4; border: 1px solid #8a8a8a; }
.o-content p { grid-column: 1 / -1; }

/* Caricamento */
.mk-loading .mk-body { background: #e7e8ec; }
.l-page { padding: 3.4em 1em 1em; display: flex; flex-direction: column; align-items: center; gap: 1em; height: 100%; }
.l-bar { width: 100%; height: 1.4em; border-radius: .3em; background: #c7cbdc; }
.l-block { width: 100%; height: 7em; border-radius: .3em; background: #d4d6dd; }
.l-block.short { height: 3em; }
.l-spin { width: 3em; height: 3em; border-radius: 50%; border: .3em solid #bfc1c9; border-top-color: #71747f; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rm .l-spin { animation: none; }