/* CARVE — Магазин */
.mg-onlain { justify-self: end; display: grid; gap: 4px; padding: 18px 22px; border: 1.5px dashed var(--mastilo); }
.mg-onlain b { font: 800 22px var(--f-dis); font-stretch: 86%; text-transform: uppercase; }
.mg-onlain span { font: 500 13px var(--f-mono); color: var(--sivo); }
.mg-shirok { margin-top: clamp(36px, 5vw, 64px); aspect-ratio: 21 / 9; }
@media (max-width: 900px) { .mg-onlain { justify-self: start; } .mg-shirok { aspect-ratio: 4 / 3; } }

.mg-kategorii { padding: clamp(80px, 10vw, 140px) 0; }
.mg-bento {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid; gap: clamp(10px, 1.2vw, 18px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(120px, 12vw, 190px);
}
.mg-k { position: relative; display: flex; flex-direction: column; min-height: 0; }
.mg-k .kadar { flex: 1; min-height: 0; }
.mg-k .kadar img { transition: transform 1.2s var(--ease); }
.mg-k:hover .kadar img { transform: scale(1.04); }
.mg-k figcaption { display: grid; gap: 2px; padding-top: 10px; }
.mg-k figcaption b { font: 800 18px var(--f-dis); font-stretch: 86%; text-transform: uppercase; }
.mg-k figcaption span { font-size: 14px; color: var(--sivo); }
.mg-k-1 { grid-column: span 7; grid-row: span 3; }
.mg-k-2 { grid-column: span 2; grid-row: span 3; }
.mg-k-3 { grid-column: span 3; grid-row: span 3; }
.mg-k-4 { grid-column: span 5; grid-row: span 3; }
.mg-k-5 { grid-column: span 2; grid-row: span 3; }
.mg-k-6 { grid-column: span 5; grid-row: span 2; }
.mg-k-7 { grid-column: span 5; grid-row: span 2; }
@media (max-width: 900px) {
  .mg-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .mg-k { grid-column: span 1 !important; grid-row: auto !important; }
  .mg-k .kadar { aspect-ratio: 4 / 5; flex: none; }
  .mg-k-1, .mg-k-4 { grid-column: span 2 !important; }
  .mg-k-1 .kadar, .mg-k-4 .kadar { aspect-ratio: 16 / 10; }
}

.mg-proba { padding: clamp(80px, 10vw, 150px) 0; }
.mg-proba-v { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(32px, 6vw, 110px); align-items: end; }
.mg-btn { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 900px) { .mg-proba-v { grid-template-columns: minmax(0, 1fr); } }