:root{
  --gap:10px; --h-d:500px; --h-t:450px; --h-m:350px;
  --desktop-slide-width:100vw; --tablet-slide-width:100vw; --mobile-slide-width:160vw;
}

.dmc-wrapper{ --cols: var(--cols-d, 6); --baseW: var(--desktop-slide-width); --colW: calc((var(--baseW) - (var(--cols) - 1) * var(--gap)) / var(--cols)); width:100%; overflow:hidden; position:relative; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.dmc-wrapper:active{ cursor:grabbing; }

/* Heights per Elementor device */
[data-elementor-device-mode="desktop"] .dmc-wrapper{ height:var(--h-d); }
[data-elementor-device-mode="tablet"]  .dmc-wrapper{ height:var(--h-t) !important; }
[data-elementor-device-mode="mobile"]  .dmc-wrapper{ height:var(--h-m) !important; }
/* Ensure slides also reflect the device height inside the editor preview */
[data-elementor-device-mode="tablet"]  .dmc-slide{ height:var(--h-t) !important; }
[data-elementor-device-mode="mobile"]  .dmc-slide{ height:var(--h-m) !important; }

.dmc-track{ display:flex; width:max-content; will-change:transform; backface-visibility:hidden; gap:0; }
.dmc-slide{ height:var(--h-d); display:grid; gap:var(--gap); flex-shrink:0; margin-right:var(--gap); box-sizing:border-box; width: calc(var(--colW) * var(--span, 1) + var(--gap) * (var(--span, 1) - 1)); }
.dmc-slide:last-child{ margin-right:0; }

/* Full-width slide (the original 6×2 mosaic) */
.dmc-slide.is-full{ width:100vw; }
.dmc-mosaic-6x2,.dmc-slide.is-full{ grid-template-columns:repeat(6, minmax(0,1fr)); grid-template-rows:repeat(2, 1fr); }

/* Tokenized mini-slides that align with the 6×2 rhythm */
.dmc-token-1col{ grid-template-columns:1fr; grid-template-rows:repeat(2, 1fr); }
.dmc-token-2col{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(2, 1fr); }

/* Tablet column count */
@media (max-width:1200px){
  .dmc-wrapper{ --cols: var(--cols-t, 4); --baseW: var(--tablet-slide-width); }
  .dmc-slide{ height:var(--h-t); }
}
/* Mobile (<=768): 3 columns */
@media (max-width:768px){
  .dmc-wrapper{ --cols: var(--cols-m, 3); --baseW: var(--tablet-slide-width); }
  .dmc-slide{ height:var(--h-m); }
}
/* Phone: the reel becomes wider; tokens follow it */
@media (max-width:576px){
  .dmc-wrapper{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); overflow:hidden; --baseW: var(--mobile-slide-width); }
}

/* Tile box */
.dmc-box{ border-radius: var(--radius, 6px); overflow:hidden; position:relative; min-width:0; min-height:0; }
.dmc-box a{ display:block; width:100%; height:100%; touch-action:pan-y; -webkit-user-drag:none; user-drag:none; cursor:grab; }
.dmc-wrapper:active .dmc-box a{ cursor:grabbing; }
.dmc-box a:hover{ transform:scale(1.05); transition:transform .3s ease; }
.dmc-box img{ position:absolute; inset:0; width:100%; height:100% !important; object-fit:cover; object-position:center; -webkit-user-drag:none; user-drag:none; display:block; }

/* --- Token layouts --- */
/* Single 100% (one tall column) */
.dmc-row-100.dmc-token-1col .row-100-1{ grid-column:1; grid-row:1 / span 2; }

/* Two 50/50 stacked (one column) */
.dmc-row-50-50.dmc-token-1col .row-50-50-1{ grid-column:1; grid-row:1; }
.dmc-row-50-50.dmc-token-1col .row-50-50-2{ grid-column:1; grid-row:2; }

/* Three 70/15/15 (two columns) – top wide, bottom split */
.dmc-row-50-25-25.dmc-token-2col{ grid-template-rows: 7fr 3fr; }
.dmc-row-50-25-25.dmc-token-2col .row-50-25-25-1{ grid-column:1 / span 2; grid-row:1; }
.dmc-row-50-25-25.dmc-token-2col .row-50-25-25-2{ grid-column:1; grid-row:2; }
.dmc-row-50-25-25.dmc-token-2col .row-50-25-25-3{ grid-column:2; grid-row:2; }

/* Three 50/25/25 (two columns) – top wide, bottom split */
.dmc-row-50-25-25.dmc-token-2col .row-50-25-25-1{ grid-column:1 / span 2; grid-row:1; }
.dmc-row-50-25-25.dmc-token-2col .row-50-25-25-2{ grid-column:1; grid-row:2; }
.dmc-row-50-25-25.dmc-token-2col .row-50-25-25-3{ grid-column:2; grid-row:2; }

/* --- Mosaic 6×2 positions (full slide) --- */
.dmc-mosaic-6x2 .mosaic.c1r1{ grid-column:1; grid-row:1; }
.dmc-mosaic-6x2 .mosaic.c1r2{ grid-column:1; grid-row:2; }
.dmc-mosaic-6x2 .mosaic.c2-all{ grid-column:2; grid-row:1 / span 2; }
.dmc-mosaic-6x2 .mosaic.c3-top{ grid-column:3; grid-row:1; }
.dmc-mosaic-6x2 .mosaic.c3-br-left{ grid-column:3; grid-row:2; }
.dmc-mosaic-6x2 .mosaic.c3-br-right{ grid-column:4; grid-row:2; }
.dmc-mosaic-6x2 .mosaic.c4-all{ grid-column:4; grid-row:1 / span 2; }
.dmc-mosaic-6x2 .mosaic.c5-top{ grid-column:5; grid-row:1; }
.dmc-mosaic-6x2 .mosaic.c5-bot{ grid-column:5; grid-row:2; }
.dmc-mosaic-6x2 .mosaic.c6-all{ grid-column:6; grid-row:1 / span 2; }

/* Gaps override to beat builder CSS */
.dmc-wrapper .dmc-slide{ gap:var(--gap) !important; }

@supports not (gap:10px){
  .dmc-wrapper .dmc-slide{ gap:0; margin:-5px; }
  .dmc-wrapper .dmc-box{ margin:5px; }
}

html,body{ overflow-x:hidden; }