/* ── Featured Edit: hueylightshop.com's "shop the look" (.c-products-look.shop-look),
   cloned from their section CSS (refs/huey/home.html) and box-checked at 1905 and
   390. A full-bleed picture 1440:770 (700 px tall on phones) under their dark
   sweep to the right; label, paragraph and a bracketed button bottom-left;
   two "+" dots that open a small card on hover, tap or focus (js/look.js).
   Their cream text #fef8e7 -> our cream #f7f3ee, the card's black -> our #181818; words ours; picture,
   dot targets and card pictures are stand-ins. */
.lk { position: relative; }
.lk-image {
  position: relative; width: 100%; aspect-ratio: 1440 / 770; min-height: 680px; overflow: hidden;
  background: center / cover no-repeat;   /* the picture and their sweep are set inline on the element */
}
@media (max-width: 749px) { .lk-image { aspect-ratio: auto; min-height: 700px; } }

.lk-content { position: absolute; z-index: 2; left: 0; bottom: 0; padding: 38px; color: #f7f3ee; }
.lk-label {
  display: flex; align-items: center; gap: 6px; max-width: fit-content;
  margin: 11.62px 0; padding-bottom: 10px;
  font: 400 14px / 1 var(--f-head); letter-spacing: .1em; text-transform: uppercase;
}
.lk-sub { margin: 0 0 6px; }
.lk-heading { max-width: 500px; margin: 0 0 16px 40px; font: 400 25px / 1.05 var(--f-body); letter-spacing: normal; }
@media (max-width: 990px) { .lk-heading { font-size: 23px; } }

/* their .button: Herbik caps between 【 】, the last word in the script, tilted */
.lk-btn {
  display: inline-flex; align-items: center; min-height: 47px; margin-left: 32px; white-space: nowrap;
  font: 400 14px / 1.2 var(--f-head); letter-spacing: .1em; text-transform: uppercase;
  color: inherit; text-decoration: none; transition: all .4s cubic-bezier(.4, 0, .2, 1);
}
.lk-btn:hover { opacity: .5; }
.lk-btn::before { content: "【"; position: relative; padding-right: 1ch; }
.lk-btn::after { content: "】"; position: relative; padding-left: 1ch; }
.lk-btn i {
  font: 400 calc(1em + 5px) / 1 var(--f-script); font-style: normal; text-transform: none; letter-spacing: 0;
  padding-left: .5ch; transform: rotate(-5.52deg);
}

/* dots: 16 px, a 40 px hit area, desktop only */
.lk-dots { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; list-style: none; }
@media (max-width: 990px) { .lk-dots { display: none; } }
.lk-dots > li { position: absolute; }
.lk-dot { position: relative; display: block; width: 16px; height: 16px; padding: 0; background: none; border: 0; cursor: pointer; }
.lk-dot svg { display: block; width: 100%; height: 100%; }
.lk-dot::after { content: ""; position: absolute; z-index: 1; width: 40px; height: 40px; top: 50%; left: 50%; margin: -20px 0 0 -20px; }

.lk-pop {
  position: absolute; z-index: 5; top: 50%; left: 100%; padding-left: 16px;
  transform: translateY(-50%) translateX(-8px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.lk-dots > li:hover .lk-pop, .lk-pop.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.lk-card {
  display: flex; gap: 10px; width: 340px; padding: 12px; color: #181818; text-decoration: none;
  background: rgb(247 243 238 / .8); backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px);
  font: 400 16px / 1.8 var(--f-body); letter-spacing: .6px;
}
.lk-card img { flex: none; width: 89px; height: 89px; object-fit: cover; }
.lk-card b { display: block; font-weight: 400; }
.lk-card small { display: block; font-size: 12px; line-height: 1.4; }
@media (max-width: 749px) { .lk-content { padding: 20px; max-width: 80%; } }