/* Cafe look preview — scoped to preserve the existing shop section. */
.cafe-section {
  padding: 10px 0 85px;
}
.cafe-section > .wrap {
  max-width: 1100px;
}
.cafe-frame {
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  overflow: hidden;
  background: #e8e6dc;
  aspect-ratio: 1/1;
}
.cafe-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.cafe-stamp {
  position: absolute;
  bottom: 25px;
  left: 25px;
  margin: 0;
  padding: 14px 28px;
  background: #555e46d9;
  color: #fff;
  letter-spacing: 5px;
  font-size: 18px;
  font-weight: 400;
  border-radius: 9px;
  pointer-events: none;
}
.cafe-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #71665370;
  color: #fff;
  font-size: 23px;
  line-height: 1;
  box-shadow: 0 2px 12px #0002;
  transition:
    background 0.2s,
    box-shadow 0.2s;
}
.cafe-pin:hover,
.cafe-pin[aria-pressed="true"] {
  background: #596447a6;
  box-shadow: 0 0 0 4px #ffffff20;
}
.cafe-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 26px 5px 30px;
}
.cafe-caption .en {
  font-size: clamp(29px, 4.3vw, 53px);
  font-style: italic;
  color: #60684e;
  line-height: 1.2;
  letter-spacing: -1.3px;
}
.cafe-caption small {
  color: #737965;
  white-space: nowrap;
  font-size: 13px;
}
.cafe-bar {
  border-top: 1px solid #cfcfc2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0 18px;
  letter-spacing: 5px;
  font-size: 17px;
}
.cafe-bar span:last-child {
  font-size: 12px;
  color: #929084;
  letter-spacing: 3px;
}
.cafe-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.cafe-card {
  position: relative;
  border: 1px solid #deded2;
  border-radius: 19px;
  background: linear-gradient(120deg, #f0f0e6, #f8f6ed);
  padding: 17px 18px 13px;
  color: var(--ink);
  min-width: 0;
  scroll-margin-top: 30px;
  transition:
    box-shadow 0.2s,
    background 0.2s;
}
.cafe-card[aria-pressed="true"] {
  box-shadow: inset 0 0 0 3px #606c50;
  background: #eeefe4;
}
.cafe-card:hover {
  background: #e9ecdf;
}
.cafe-card > span {
  display: block;
  text-align: left;
  color: #787c6c;
  font-size: 15px;
}
.cafe-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 6px #3b2b1610);
}
.cafe-card strong {
  display: block;
  font-weight: 400;
  font-size: 23px;
  margin-top: 6px;
}
.cafe-signoff {
  border-top: 1px solid #cfcfc2;
  margin-top: 42px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.cafe-signoff small {
  letter-spacing: 4px;
  font-size: 9px;
  line-height: 2.2;
}
.cafe-signoff small span {
  color: #969488;
}
.cafe-signoff .en {
  font-style: italic;
  font-size: 28px;
  line-height: 1.05;
  color: #7d836c;
  text-align: right;
}
@media (max-width: 700px) {
  .cafe-section {
    padding-bottom: 55px;
  }
  .cafe-frame {
    border-radius: 18px;
  }
  .cafe-pin {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .cafe-stamp {
    bottom: 15px;
    left: 15px;
    letter-spacing: 3px;
    padding: 9px 14px;
    font-size: 11px;
  }
  .cafe-caption {
    display: block;
    padding: 20px 0;
  }
  .cafe-caption small {
    display: block;
    margin-top: 8px;
    font-size: 10px;
  }
  .cafe-bar {
    letter-spacing: 2px;
    font-size: 12px;
    padding: 16px 0;
  }
  .cafe-bar span:last-child {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .cafe-cards {
    gap: 8px;
  }
  .cafe-card {
    border-radius: 11px;
    padding: 10px 6px;
  }
  .cafe-card > span {
    font-size: 11px;
  }
  .cafe-card strong {
    font-size: 13px;
    margin-top: 5px;
  }
  .cafe-card[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px #606c50;
  }
  .cafe-signoff {
    margin-top: 25px;
    padding-top: 20px;
  }
  .cafe-signoff small {
    font-size: 7px;
    letter-spacing: 1.7px;
  }
  .cafe-signoff .en {
    font-size: 21px;
  }
}

/* Keep the square photo and its percentage coordinates identical at every size. */
.cafe-products {
  min-width: 0;
}
@media (min-width: 701px) {
  .cafe-section > .wrap {
    width: min(1100px, calc(100% - 56px), calc((100svh - 100px) * 1.25 + 24px));
  }
  .cafe-layout {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
  }
  .cafe-frame {
    min-width: 0;
    align-self: start;
  }
  .cafe-products {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  .cafe-products .cafe-bar {
    flex: none;
    display: block;
    padding: 0 0 12px;
    border-top: 0;
    font-size: 12px;
    letter-spacing: 2px;
    line-height: 1.5;
  }
  .cafe-products .cafe-bar span {
    display: block;
  }
  .cafe-products .cafe-bar span:last-child {
    font-size: 8px;
    letter-spacing: 1.4px;
    margin-top: 3px;
  }
  .cafe-products .cafe-cards {
    flex: 1;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .cafe-products .cafe-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 9px 12px;
    border-radius: 14px;
    overflow: hidden;
  }
  .cafe-products .cafe-card > span {
    position: absolute;
    top: 8px;
    left: 11px;
    font-size: 11px;
    line-height: 1.3;
  }
  .cafe-products .cafe-card img {
    flex: 1;
    min-height: 0;
    height: 0;
    width: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    padding: 2px 4px 0;
  }
  .cafe-products .cafe-card strong {
    flex: none;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 3px;
  }
  .cafe-caption {
    padding: 22px 0 0;
  }
  .cafe-caption .en {
    font-size: clamp(28px, 3.2vw, 44px);
  }
  .cafe-caption small {
    font-size: 11px;
  }
  .cafe-signoff {
    margin-top: 25px;
  }
  .cafe-pin {
    width: 44px;
    height: 44px;
    font-size: 19px;
  }
  .cafe-stamp {
    font-size: 13px;
    letter-spacing: 4px;
    padding: 11px 20px;
    bottom: 20px;
    left: 20px;
  }
}
@media (min-width: 701px) and (max-height: 650px) {
  .cafe-products .cafe-bar {
    font-size: 10px;
    padding-bottom: 6px;
  }
  .cafe-products .cafe-bar span:last-child {
    display: none;
  }
  .cafe-products .cafe-cards {
    gap: 6px;
  }
  .cafe-products .cafe-card {
    padding: 5px 8px;
  }
  .cafe-products .cafe-card strong {
    font-size: 11px;
  }
  .cafe-caption {
    flex-wrap: wrap;
    gap: 8px;
  }
}
@media (max-width: 700px) {
  .cafe-products {
    margin-top: 20px;
  }
  .cafe-caption {
    padding-bottom: 0;
  }
}

/* The photo defines the row height; product content scrolls inside that row. */
@media (min-width: 701px) {
  .cafe-layout > .cafe-products {
    contain: size;
    height: auto;
    min-height: 0;
    align-self: stretch;
  }
  .cafe-products .cafe-cards {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #9ba28b #eeeee4;
    scrollbar-gutter: stable;
    padding: 2px 5px 2px 2px;
  }
  .cafe-products .cafe-card {
    flex: 0 0 auto;
    width: 100%;
    padding: 12px 10px 10px;
  }
  .cafe-products .cafe-card img {
    flex: none;
    height: auto;
    aspect-ratio: 1;
    width: 100%;
    padding: 9px 2px 0;
  }
  .cafe-products .cafe-cards:focus-visible {
    outline: 2px solid #687553;
    outline-offset: 2px;
  }
}
#cafe-look [hidden] { display:none !important; }
#cafe-look .cafe-load-state { color:var(--muted); font-size:12px; }
#cafe-look .cafe-stamp { max-width:85%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Preserve the marked image geometry so percentage pins stay on the outfit. */
#cafe-look .cafe-frame { aspect-ratio:auto; align-self:start; }
#cafe-look .cafe-frame > img { height:auto; }
#cafe-look .cafe-caption { flex-wrap:wrap; gap:16px; }
#cafe-look .cafe-full-look { white-space:nowrap; flex-shrink:0; }
/* Compact full-photo Look feature; scale the frame and pins together. */
@media(min-width:701px) {
  #cafe-look > .wrap { width:min(820px, calc(100% - 56px), calc((100svh - 170px) * var(--cafe-photo-ratio, .75) + 204px)); }
  #cafe-look .cafe-layout { grid-template-columns:minmax(0,1fr) 180px; }
}

/* Editorial title for the live Look feature. */
#cafe-look .cafe-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; padding-bottom:28px; margin-bottom:32px; border-bottom:1px solid var(--line); }
#cafe-look .cafe-heading h2 { font-size:clamp(48px,5vw,72px); font-weight:400; line-height:1.05; letter-spacing:-1.5px; margin:16px 0 0; }
#cafe-look .cafe-heading h2 i { font-weight:400; color:var(--olive); }
#cafe-look .cafe-heading-note { flex-shrink:0; padding-bottom:4px; }
#cafe-look .cafe-heading-note .eyebrow { font-size:8px; letter-spacing:1.5px; color:var(--muted); }
#cafe-look .cafe-heading-note p { margin:12px 0; font-size:12px; color:var(--muted); }
#cafe-look .cafe-heading-note .text-link { font-size:11px; }
@media(max-width:700px) {
  #cafe-look .cafe-heading { display:block; padding-bottom:24px; margin-bottom:24px; }
  #cafe-look .cafe-heading-note { margin-top:24px; }
  #cafe-look .cafe-heading-note > .eyebrow { display:none; }
  #cafe-look .cafe-heading-note p { display:inline-block; margin:0 16px 0 0; }
}
/* Compact image disclosure in the existing caption/signoff spacing. */
#cafe-look .cafe-image-note { margin:8px 0 0; font-size:10px; line-height:1.6; color:var(--muted); }
#cafe-look .cafe-signoff { margin-top:12px; }