/* lalita/lookbook and lalita/lookbook-item — the lookbook rules of reference/css/pages/home.css (lines 140-201), verbatim. */
.lm-lookbook__grid {
  display: grid; gap: var(--wp--preset--spacing--40);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 192px 192px 304px;
  grid-template-areas:
    "helix helix tragus    dermal"
    "helix helix cartilago dermal"
    "conch conch nariz     nariz";
}
.lm-look { position: relative; min-width: 0; min-height: 0; }
.lm-look--helix { grid-area: helix; }
.lm-look--tragus { grid-area: tragus; }
.lm-look--dermal { grid-area: dermal; }
.lm-look--cartilago { grid-area: cartilago; }
.lm-look--conch { grid-area: conch; }
.lm-look--nariz { grid-area: nariz; }
.lm-look:hover, .lm-look:focus-within, .lm-look.is-open { z-index: var(--wp--custom--z-index--raised); }
.lm-look__image { width: 100%; height: 100%; object-fit: cover; border-radius: var(--wp--custom--radius--sm); background: var(--wp--preset--color--surface); }

/* Hotspot: 44px hit area, 16px visible dot with a pulsing ring. Position comes from --x / --y. */
.lm-look__dot { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: var(--wp--custom--radius--pill); }
.lm-look__dot::before, .lm-look__dot::after { content: ""; grid-area: 1 / 1; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--accent); }
.lm-look__dot::before { width: 26px; height: 26px; opacity: 0.6; animation: lm-pulse 2s ease-out infinite; }
.lm-look__dot::after { width: 16px; height: 16px; border: 2px solid var(--wp--preset--color--ink); }
@keyframes lm-pulse { 0% { transform: scale(0.9); opacity: 0.7; } 70%, 100% { transform: scale(1.7); opacity: 0; } }

.lm-look__tip {
  position: absolute; left: var(--x); top: calc(var(--y) + 20px); z-index: var(--wp--custom--z-index--raised);
  display: flex; align-items: center; gap: var(--wp--preset--spacing--30);
  width: 224px; padding: var(--wp--preset--spacing--20);
  background: var(--wp--preset--color--surface);
  border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--sm); box-shadow: var(--wp--preset--shadow--pop);
  transform: translateX(-50%); opacity: 0; visibility: hidden;
  transition: opacity var(--wp--custom--motion--fast) ease, visibility var(--wp--custom--motion--fast) ease;
}
.lm-look:hover .lm-look__tip, .lm-look:focus-within .lm-look__tip, .lm-look.is-open .lm-look__tip { opacity: 1; visibility: visible; }
.lm-look__thumb { flex-shrink: 0; width: 44px; height: 44px; object-fit: cover; border-radius: var(--wp--custom--radius--sm); }
.lm-look__info { display: flex; flex-direction: column; min-width: 0; line-height: var(--wp--custom--line-height--snug); }
.lm-look__label { font-size: var(--wp--preset--font-size--tiny); font-weight: var(--wp--custom--font-weight--bold); letter-spacing: var(--wp--custom--letter-spacing--caps); text-transform: uppercase; color: var(--wp--preset--color--muted); }
.lm-look__name { font-size: var(--wp--preset--font-size--ui); font-weight: var(--wp--custom--font-weight--bold); }
.lm-look__price { font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--bold); color: var(--wp--preset--color--accent); }

@media (max-width: 1023px) {
  .lm-lookbook__grid { grid-template-rows: 160px 160px 240px; gap: var(--wp--preset--spacing--30); }
}
@media (max-width: 639px) {
  .lm-lookbook__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 280px 160px 160px 200px 200px;
    gap: var(--wp--preset--spacing--20);
    grid-template-areas:
      "helix  helix"
      "tragus dermal"
      "cartilago dermal"
      "conch  conch"
      "nariz  nariz";
  }
  /* No room to float the tip next to the dot: dock it to the bottom of the tile. */
  .lm-look__tip { left: var(--wp--preset--spacing--20); right: var(--wp--preset--spacing--20); top: auto; bottom: var(--wp--preset--spacing--20); width: auto; transform: none; }
}