/*
 * Макети на изделията.
 *
 * Отделен файл, защото същите класове се ползват и в админа, за да
 * се вижда как изглежда поръчаният продукт с кадъра на клиента.
 * Зависи само от токените.
 */

/* ============================================================
   МАКЕТИ НА ИЗДЕЛИЯТА
   ============================================================ */
.mock{position:relative;display:block;filter:drop-shadow(0 26px 50px rgba(0,0,0,.5))}
.mock--sm{width:100%}
.mock--lg{width:min(44vh,400px)}
.mock--lg-wide{width:min(62vh,540px)}
.slot{position:relative;display:block;overflow:hidden;background:var(--mt-paper-2)}
.slot img{position:absolute;left:50%;top:50%;display:block;max-width:none;object-fit:cover}
.slot .slot--live{cursor:grab;touch-action:none}
.slot--live.is-dragging{cursor:grabbing}

.cal{display:block;aspect-ratio:1/1.41;background:var(--mt-paper);padding:6% 6% 0;position:relative}
.cal__spiral{display:block;position:absolute;left:50%;top:2.4%;transform:translateX(-50%);width:26%;
	height:5px;background:repeating-linear-gradient(90deg,#b9b3aa 0 3px,transparent 3px 8px)}
.cal__foot{display:block;padding:7% 0 0}
.cal__month{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5%;
	font-size:9px;font-weight:600;letter-spacing:.18em;color:#2a2724}
.cal__year{font-size:8px;font-weight:400;letter-spacing:.14em;color:#9b958b}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal__day{display:block;height:4px;background:#e4e0da}
.cal__day.is-mark{background:var(--mt-accent)}

.canvas{display:block;position:relative}
.canvas__edge{position:absolute;inset:0;pointer-events:none;
	box-shadow:inset -16px 0 24px -16px rgba(0,0,0,.5),inset 0 -10px 18px -12px rgba(0,0,0,.4)}

.album{display:grid;grid-template-columns:1fr 1fr;background:var(--mt-paper)}
.album__left{position:relative;display:grid;place-items:center;background:#151412;padding:12%}
.album__mark{font-size:9px;font-weight:500;letter-spacing:.26em;color:var(--mt-accent)}
.album__spineR{position:absolute;right:0;top:0;bottom:0;width:16px;
	box-shadow:inset -14px 0 22px -12px rgba(0,0,0,.75)}
.album__right{position:relative;padding:9%;display:flex;flex-direction:column;justify-content:center;gap:7%}
.album__cap{display:block;font-size:8px;font-weight:500;letter-spacing:.22em;color:#8a857c;text-align:center}
.album__spineL{position:absolute;left:0;top:0;bottom:0;width:16px;
	box-shadow:inset 14px 0 22px -12px rgba(0,0,0,.45)}

.magnets{display:grid;grid-template-columns:repeat(3,1fr);gap:6%}
.magnet{display:block;background:var(--mt-paper);padding:7% 7% 16%;box-shadow:0 6px 14px rgba(0,0,0,.35)}

.frame{display:block;background:#6b573c;padding:5%}
.frame__mat{display:block;background:var(--mt-paper);padding:11%}
.print{display:block;background:var(--mt-paper);padding:5% 5% 13%}

/* Макет от истинска снимка на изделието.
   Кадърът стои под PNG-то, а непрозрачните му части го изрязват. */
.mockimg{position:relative;display:block;width:100%;
	filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}
.mockimg--lg{width:min(48vh,440px)}
.mockimg__win{position:absolute;overflow:hidden;background:var(--mt-paper-2)}
/* Маската изрязва точната форма на отвора, за да не наднича
   снимката през ъглите на правоъгълника. */
.mockimg__win[style*="--mt-mask"]{
	background:transparent;
	-webkit-mask-image:var(--mt-mask);mask-image:var(--mt-mask);
	-webkit-mask-size:var(--mt-mask-size);mask-size:var(--mt-mask-size);
	-webkit-mask-position:var(--mt-mask-pos);mask-position:var(--mt-mask-pos);
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.mockimg__win .slot{width:100%;height:100%;aspect-ratio:auto!important}
.mockimg__over{position:absolute;inset:0;width:100%;height:100%;display:block;
	object-fit:contain;pointer-events:none;z-index:2}
.mockimg .slot--live{cursor:grab;touch-action:none}
.mockimg .slot--live.is-dragging{cursor:grabbing}

/* ============================================================
   ПРЕГЛЕД В АДМИНА
   Същите макети, но в малък размер и на светъл фон.
   ============================================================ */
.mt-admin-mock{
	--mt-paper:#fdfcfa;--mt-paper-2:#e8e4de;--mt-accent:#b08d57;
	display:block;width:112px;
}
.mt-admin-mock .mock{filter:drop-shadow(0 4px 10px rgba(0,0,0,.22))}
.mt-admin-mock .mock--sm,
.mt-admin-mock .mock--lg,
.mt-admin-mock .mock--lg-wide,
.mt-admin-mock .mockimg,
.mt-admin-mock .mockimg--sm,
.mt-admin-mock .mockimg--lg{width:100%}
.mt-admin-mock .slot{background:#e8e4de}

.mt-admin-shot{display:block;width:64px;height:64px;object-fit:cover;
	border:1px solid #dcdcde;background:#f0f0f1}
.mt-admin-line{display:flex;align-items:center;gap:12px}
.mt-admin-crop{font-size:11px;color:#646970;white-space:nowrap}