/*
 * DUONG The Look Slider v1.4.0
 * The Look owns only the editorial shell and the product rail.
 * Product gallery, wishlist and Quick Add remain owned by Duong Commerce Card.
 */
.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);}

/* The section remains transparent. Only Duong Commerce Card's own Quick Add
   and metadata glass strip may surface above the product image. */
.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;}

/* Prevent theme-level pink hover treatments inside this editorial rail.
   Utility icons stay background-free; Quick Add keeps the white glass surface
   defined by Duong Commerce Card. */
.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;
}

/* Carousel controls sit below the active product card so the composition
   feels balanced and does not compete with the product image itself. */
.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);}

/* Entrance uses only composited properties. */
.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;
}

/* Large laptop: preserve the editorial split without forcing an oversized rail. */
@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);}
}

/* Tablet: the product rail gets more room than the editorial image so cards
   stay legible and controls never drop outside the section. */
@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;}
}

/* Mobile: one centred product is the focal point, with only a small preview
   of the next card. This avoids a cramped two-card layout while preserving the
   visual signal that the rail can be explored. */
@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;
  }

  /* Controls are visually quiet, but their tap targets meet mobile reach needs. */
  .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;}
}

/* Small phones: keep targets comfortable without letting the card run edge to edge. */
@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;}
}

/* Narrow devices such as 320px screens still retain a clean card silhouette. */
@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;}
}

/* Touch tablets and phones never receive desktop hover styling by accident. */
@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;}
}