.dglk-look,
.dglk-look *{box-sizing:border-box;}
.dglk-look{
--dglk-ink:#111;
--dglk-paper:#fff;
--dglk-line:rgba(17,17,17,.18);
--dglk-card-width:clamp(230px,18.25vw,310px);
--dglk-slide-gap:clamp(32px,6vw,88px);
--dglk-rail-inset:clamp(46px,14.2vw,214px);
--dglk-media-center:clamp(173px,13.7vw,233px);
--dglk-viewport-width:100vw;
position:relative;
display:grid;
grid-template-columns:minmax(0,50%) minmax(0,50%);
width:100%;
min-height:clamp(680px,56.2vw,860px);
margin:0;
overflow:hidden;
background:transparent;
color:var(--dglk-ink);
font-family:Cabin,Arial,sans-serif;
isolation:isolate;
-webkit-tap-highlight-color:transparent;
}
.dglk-look__hero{
position:relative;
min-width:0;
min-height:100%;
overflow:hidden;
background:transparent;
}
.dglk-look__hero-image{
display:block;
width:100%;
height:100%;
min-height:inherit;
object-fit:cover;
object-position:center;
transform:scale(1.028);
transition:transform 1.18s cubic-bezier(.22,.61,.36,1);
will-change:transform;
}
.dglk-look__content{
position:relative;
z-index:1;
min-width:0;
min-height:0;
overflow:hidden;
padding:clamp(70px,7.25vw,108px) 0 clamp(44px,5vw,74px);
background:transparent;
}
.dglk-look__header{
display:grid;
justify-items:center;
gap:13px;
width:100%;
padding:0 clamp(18px,3vw,40px);
text-align:center;
opacity:0;
transform:translate3d(0,18px,0);
transition:opacity .6s ease .16s,transform .72s cubic-bezier(.22,.61,.36,1) .16s;
}
.dglk-look__title{
margin:0;
color:var(--dglk-ink);
font:400 clamp(21px,1.82vw,29px)/1.08 Cabin,Arial,sans-serif;
letter-spacing:-.028em;
}
.dglk-look__marker{
display:block;
width:1px;
height:24px;
background:var(--dglk-ink);
opacity:.4;
}
.dglk-look__view-all{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
margin-top:2px;
padding:0 0 4px;
border:0;
color:var(--dglk-ink)!important;
background:transparent!important;
font:500 10px/1 Cabin,Arial,sans-serif;
letter-spacing:.12em;
text-decoration:none!important;
text-transform:uppercase;
}
.dglk-look__view-all::after{
position:absolute;
right:0;
bottom:0;
left:0;
height:1px;
content:"";
background:currentColor;
transform:scaleX(.42);
transform-origin:left center;
transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .22s ease;
}
.dglk-look__view-all:hover::after{transform:scaleX(1);}
.dglk-look__view-all:focus-visible{outline:1px solid var(--dglk-ink);outline-offset:5px;}
.dglk-look__view-all svg{width:14px;height:14px;overflow:visible;transition:transform .24s cubic-bezier(.22,.61,.36,1);}
.dglk-look__view-all path{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;}
.dglk-look__view-all:hover svg{transform:translate3d(3px,0,0);}
.dglk-look__rail{
position:relative;
width:100%;
margin-top:clamp(58px,6.15vw,94px);
padding-left:var(--dglk-rail-inset);
opacity:0;
transform:translate3d(0,26px,0);
transition:opacity .66s ease .3s,transform .8s cubic-bezier(.22,.61,.36,1) .3s;
}
.dglk-look__viewport{
width:100%;
overflow:hidden;
cursor:grab;
touch-action:pan-y;
user-select:none;
overscroll-behavior-x:contain;
}
.dglk-look__viewport:focus-visible{outline:1px solid var(--dglk-ink);outline-offset:5px;}
.dglk-look__viewport.is-dragging{cursor:grabbing;}
.dglk-look__track{
display:flex;
align-items:flex-start;
gap:var(--dglk-slide-gap);
width:max-content;
min-width:100%;
margin:0;
padding:0 clamp(42px,4vw,72px) 0 0;
transform:translate3d(0,0,0);
transition:transform .72s cubic-bezier(.22,.61,.36,1);
will-change:transform;
}
.dglk-look__track.is-dragging{transition:none!important;}
.dglk-look__slide{
flex:0 0 var(--dglk-card-width);
width:var(--dglk-card-width);
min-width:0;
background:transparent!important;
opacity:.54;
transform:translate3d(0,10px,0);
transition:opacity .42s ease,transform .58s cubic-bezier(.22,.61,.36,1);
}
.dglk-look__slide.is-active{opacity:1;transform:translate3d(0,0,0);} .dglk-look .dgqa-card.dgqa-product-card,
.dglk-look .dgqa-card.dgqa-product-card:hover,
.dglk-look .dgqa-card.dgqa-product-card:focus-within,
.dglk-look .dgqa-card__media,
.dglk-look .dgqa-card__image-link,
.dglk-look .dgqa-card__image-link:hover,
.dglk-look .dgqa-card__title a,
.dglk-look .dgqa-card__title a:hover{
width:100%;
min-width:0;
background:transparent!important;
}
.dglk-look .dgqa-card__media{background-color:transparent!important;}
.dglk-look .dgqa-card__meta{justify-items:center;text-align:center;}
.dglk-look .dgqa-card__title,
.dglk-look .dgqa-card__price{justify-content:center;text-align:center;}
.dglk-look .dgqa-card__title a:hover{color:var(--dglk-ink)!important;} .dglk-look .dgqa-card .dalya-wl-btn:hover,
.dglk-look .dgqa-card .dalya-wl-btn:focus-visible,
.dglk-look .dgqa-card .dgqa-media-nav:hover,
.dglk-look .dgqa-card .dgqa-media-nav:focus-visible,
.dglk-look .dgqa-card .dgqa-media-progress__item:hover,
.dglk-look .dgqa-card .dgqa-media-progress__item:focus-visible,
.dglk-look__view-all:hover,
.dglk-look__view-all:focus-visible{
background:transparent!important;
box-shadow:none!important;
color:var(--dglk-ink)!important;
} .dglk-look__controls{
position:relative;
z-index:8;
display:flex;
align-items:center;
justify-content:center;
gap:18px;
width:var(--dglk-card-width);
max-width:calc(100% - clamp(42px,4vw,72px));
margin:20px 0 0;
transform:none;
pointer-events:auto;
}
.dglk-look__controls[hidden]{display:none!important;}
.dglk-look__arrow{
position:relative;
appearance:none;
-webkit-appearance:none;
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:28px;
margin:0;
padding:0;
border:0;
border-radius:0;
background:transparent!important;
background-image:none!important;
box-shadow:none!important;
color:var(--dglk-ink)!important;
cursor:pointer;
pointer-events:auto;
transition:opacity .22s ease,transform .28s cubic-bezier(.22,.61,.36,1),color .22s ease;
}
.dglk-look__arrow::before{
position:absolute;
right:7px;
bottom:1px;
left:7px;
height:1px;
content:"";
background:rgba(17,17,17,.18);
opacity:.85;
transform:scaleX(.42);
transform-origin:center center;
transition:transform .24s cubic-bezier(.22,.61,.36,1),background .24s ease,opacity .24s ease;
}
.dglk-look__arrow:hover:not(:disabled),
.dglk-look__arrow:focus-visible{
background:transparent!important;
color:var(--dglk-ink)!important;
}
.dglk-look__arrow:hover:not(:disabled)::before,
.dglk-look__arrow:focus-visible::before{
background:rgba(17,17,17,.72);
opacity:1;
transform:scaleX(1);
}
.dglk-look__arrow--prev:hover:not(:disabled){transform:translate3d(-2px,0,0);}
.dglk-look__arrow--next:hover:not(:disabled){transform:translate3d(2px,0,0);}
.dglk-look__arrow:focus-visible{outline:1px solid var(--dglk-ink);outline-offset:3px;}
.dglk-look__arrow:disabled{opacity:.22;cursor:default;}
.dglk-look__arrow svg{position:relative;z-index:1;width:18px;height:18px;overflow:visible;}
.dglk-look__arrow path{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;}
.dglk-look__count{
width:var(--dglk-card-width);
max-width:calc(100% - clamp(42px,4vw,72px));
margin:12px 0 0;
color:rgba(17,17,17,.66);
font:400 10px/1 Cabin,Arial,sans-serif;
letter-spacing:.08em;
text-align:center;
}
.dglk-look__progress{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
width:min(156px,calc(var(--dglk-card-width) - 40px));
max-width:calc(100% - clamp(56px,6vw,82px));
margin:14px 0 0;
padding:0;
}
.dglk-look__progress[hidden]{display:none!important;}
.dglk-look__progress-item{
appearance:none;
-webkit-appearance:none;
display:block;
flex:1 1 0;
min-width:0;
height:2px;
margin:0;
padding:0;
border:0;
background:rgba(17,17,17,.19);
box-shadow:none;
cursor:pointer;
transition:background .24s ease,transform .24s ease;
}
.dglk-look__progress-item:hover,
.dglk-look__progress-item:focus-visible{background:rgba(17,17,17,.55)!important;}
.dglk-look__progress-item:focus-visible{outline:1px solid var(--dglk-ink);outline-offset:4px;}
.dglk-look__progress-item.is-active{background:var(--dglk-ink);transform:scaleY(1.35);} .dglk-look.is-dglk-visible .dglk-look__hero-image{transform:scale(1);}
.dglk-look.is-dglk-visible .dglk-look__header,
.dglk-look.is-dglk-visible .dglk-look__rail{opacity:1;transform:translate3d(0,0,0);}
.dglk-look.is-dglk-visible .dglk-look__slide.is-active{transition-delay:.12s;}
.dglk-look__hero:hover .dglk-look__hero-image{transform:scale(1.013);}
.dglk-missing-dependency{
margin:0;
padding:14px;
border:1px solid rgba(17,17,17,.18);
color:#111;
font:400 12px/1.45 Cabin,Arial,sans-serif;
} @media (max-width:1180px){
.dglk-look{
--dglk-card-width:clamp(215px,23.3vw,286px);
--dglk-slide-gap:clamp(25px,5.6vw,62px);
--dglk-rail-inset:clamp(38px,10.2vw,118px);
--dglk-media-center:clamp(161px,17.5vw,215px);
min-height:clamp(620px,66vw,760px);
}
.dglk-look__content{padding-top:clamp(58px,6.5vw,82px);}
.dglk-look__rail{margin-top:clamp(46px,5vw,72px);}
} @media (min-width:768px) and (max-width:1024px){
.dglk-look{
--dglk-card-width:clamp(224px,28vw,286px);
--dglk-slide-gap:clamp(24px,4.2vw,44px);
--dglk-rail-inset:clamp(28px,5.6vw,58px);
grid-template-columns:minmax(0,43%) minmax(0,57%);
min-height:clamp(600px,74vw,700px);
}
.dglk-look__content{padding:clamp(56px,6vw,72px) 0 clamp(38px,4.6vw,54px);}
.dglk-look__header{gap:11px;padding:0 24px;}
.dglk-look__title{font-size:clamp(21px,2.3vw,26px);}
.dglk-look__marker{height:21px;}
.dglk-look__rail{margin-top:clamp(40px,4.8vw,58px);}
.dglk-look__track{padding-right:40px;}
.dglk-look__controls{gap:17px;margin-top:18px;}
.dglk-look__arrow{width:44px;height:36px;}
.dglk-look__count{margin-top:10px;}
.dglk-look__progress{margin-top:12px;}
} @media (max-width:767px){
.dglk-look{
--dglk-card-width:min(78vw,332px);
--dglk-slide-gap:16px;
--dglk-rail-inset:0px;
display:block;
min-height:0;
overflow:visible;
}
.dglk-look__hero{
min-height:0;
aspect-ratio:4/5;
}
.dglk-look__hero-image{
min-height:0;
height:100%;
}
.dglk-look__content{
padding:32px 0 calc(38px + env(safe-area-inset-bottom));
overflow:hidden;
}
.dglk-look__header{
gap:10px;
padding:0 20px;
}
.dglk-look__title{
font-size:clamp(19px,5.6vw,23px);
line-height:1.12;
}
.dglk-look__marker{height:17px;}
.dglk-look__view-all{min-height:34px;padding:0 0 4px;font-size:9px;}
.dglk-look__rail{
margin-top:28px;
padding-left:0;
}
.dglk-look__viewport{
cursor:default;
touch-action:pan-y;
}
.dglk-look__track{
min-width:0;
padding:0 max(0px,calc((var(--dglk-viewport-width) - var(--dglk-card-width))/2));
}
.dglk-look__slide{
opacity:.48;
transform:none;
transition:opacity .34s ease;
}
.dglk-look__slide.is-active{
opacity:1;
transform:none;
} .dglk-look__controls{
width:var(--dglk-card-width);
max-width:calc(100% - 40px);
gap:20px;
margin:18px auto 0;
}
.dglk-look__arrow{
width:48px;
height:44px;
touch-action:manipulation;
}
.dglk-look__arrow::before{right:9px;left:9px;bottom:6px;}
.dglk-look__arrow svg{width:19px;height:19px;}
.dglk-look__count{
width:var(--dglk-card-width);
max-width:calc(100% - 40px);
margin:8px auto 0;
font-size:9px;
}
.dglk-look__progress{
width:min(132px,calc(var(--dglk-card-width) - 56px));
max-width:calc(100% - 72px);
margin:12px auto 0;
}
.dglk-look__progress-item{
min-height:20px;
background:linear-gradient(transparent 9px,rgba(17,17,17,.19) 9px,rgba(17,17,17,.19) 11px,transparent 11px)!important;
}
.dglk-look__progress-item.is-active{
background:linear-gradient(transparent 9px,var(--dglk-ink) 9px,var(--dglk-ink) 11px,transparent 11px)!important;
transform:none;
}
.dglk-look .dgqa-card__meta{padding-top:8px;}
} @media (max-width:480px){
.dglk-look{
--dglk-card-width:min(80vw,310px);
--dglk-slide-gap:14px;
}
.dglk-look__content{padding-top:28px;}
.dglk-look__header{padding:0 16px;}
.dglk-look__rail{margin-top:24px;}
.dglk-look__controls{margin-top:16px;}
.dglk-look .dgqa-card__meta{padding-top:7px;}
} @media (max-width:374px){
.dglk-look{
--dglk-card-width:min(82vw,286px);
--dglk-slide-gap:12px;
}
.dglk-look__content{padding-top:24px;}
.dglk-look__title{font-size:18px;}
.dglk-look__controls{gap:16px;}
.dglk-look__arrow{width:46px;height:42px;}
} @media (hover:none), (pointer:coarse){
.dglk-look__arrow:hover,
.dglk-look__arrow:active,
.dglk-look__arrow:focus,
.dglk-look__progress-item:hover,
.dglk-look__progress-item:active{
background-color:transparent!important;
box-shadow:none!important;
color:var(--dglk-ink)!important;
}
}
@media (prefers-reduced-motion:reduce){
.dglk-look__hero-image,
.dglk-look__header,
.dglk-look__rail,
.dglk-look__track,
.dglk-look__slide,
.dglk-look__arrow,
.dglk-look__arrow::before,
.dglk-look__view-all::after,
.dglk-look__view-all svg,
.dglk-look__progress-item{transition:none!important;}
.dglk-look__hero-image{transform:none!important;}
.dglk-look__header,
.dglk-look__rail{opacity:1;transform:none;}
}