@charset "UTF-8";
/* Load the display font from this shared stylesheet so every mall uses the same typography. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');

/* 26AW DRESS LOOKBOOK — shared, component-scoped styles for Rakuten / Yahoo! / Color Me */
.lookbook-26aw,
.lookbook-26aw * {
  box-sizing: border-box;
}

.lookbook-26aw {
  -webkit-text-size-adjust: 100%;
  display: block !important;
  width: 76% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 0 64px !important;
  color: #222 !important;
  background: #fff !important;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: normal !important;
  text-align: left;
}

/* Keep template typography / margins from changing the lookbook header. */
.lookbook-26aw__header {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  padding: 34px 0 44px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
}

.lookbook-26aw__eyebrow {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #222 !important;
  background: transparent !important;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  letter-spacing: .24em !important;
  text-align: center !important;
}
.lookbook-26aw__subtitle {
  display: block !important;
  margin: 13px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #222 !important;
  background: transparent !important;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(21px, 2vw, 26px) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  letter-spacing: .04em !important;
  text-align: center !important;
  text-transform: none !important;
}


.lookbook-26aw__title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #222 !important;
  background: transparent !important;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(13px, 1.1vw, 15px) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
  letter-spacing: .11em !important;
  text-align: center !important;
  text-transform: none !important;
}

.lookbook-26aw__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: clamp(24px, 2.8vw, 42px) !important;
  row-gap: clamp(36px, 4vw, 60px) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.lookbook-26aw__item {
  display: block !important;
  position: relative;
  min-width: 0 !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.lookbook-26aw__trigger {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 2 / 3;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer;
  list-style: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.lookbook-26aw__trigger::-webkit-details-marker { display: none !important; }
.lookbook-26aw__trigger::marker { content: ""; }
.lookbook-26aw__trigger:focus-visible { outline: 2px solid #666; outline-offset: 4px; }

.lookbook-26aw__image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  vertical-align: bottom !important;
}

.lookbook-26aw__products {
  display: none !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 6px 18px !important;
  width: 100% !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  list-style: none !important;
  text-align: center !important;
}

.lookbook-26aw__item[open] .lookbook-26aw__products {
  display: flex !important;
}

.lookbook-26aw__products li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  list-style: none !important;
}

.lookbook-26aw__products a {
  display: inline !important;
  color: #333 !important;
  background: transparent !important;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: .025em !important;
  line-height: 1.8 !important;
  text-decoration: none !important;
  border: 0 !important;
  border-bottom: 1px solid #c8c8c8 !important;
  border-radius: 0 !important;
}

.lookbook-26aw__products a:hover { opacity: .65; }

/* Footer links retain the approved previous footer styling in the HTML. */
.lookbook-26aw__footer { font-family: Arial, sans-serif; }

@media (max-width: 767px) {
  .lookbook-26aw {
    width: 100% !important;
    max-width: none !important;
    padding: 0 16px 40px !important;
  }
  .lookbook-26aw__header { padding: 32px 0 32px !important; }
  .lookbook-26aw__eyebrow { font-size: 9px !important; margin-bottom: 11px !important; }
  .lookbook-26aw__subtitle { font-size: 21px !important; line-height: 1.4 !important; margin-top: 11px !important; }
  .lookbook-26aw__title { font-size: 13px !important; line-height: 1.55 !important; letter-spacing: .09em !important; }
  .lookbook-26aw__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 30px !important;
  }
  .lookbook-26aw__products {
    gap: 4px 12px !important;
    margin-top: 12px !important;
  }
  .lookbook-26aw__products a { font-size: 10px !important; }
}

@media (max-width: 360px) {
  .lookbook-26aw {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
  .lookbook-26aw__grid { column-gap: 10px !important; }
}

/* Color Me: expand its floated/narrow content column only on the lookbook page.
   The same shared CSS remains usable by Rakuten and Yahoo! without these classes. */
@supports selector(body:has(.lookbook-26aw)) {
  @media (min-width: 980px) {
    body:has(.lookbook-26aw) .side {
      display: none !important;
    }
    body:has(.lookbook-26aw) .contents {
      display: block !important;
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      float: none !important;
      clear: both !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    body:has(.lookbook-26aw) .header_btm {
      padding-top: 121px !important;
    }
  }
}

/* Color Me desktop: use the full available content width, matching the existing Dress Collection page.
   Only the Color Me HTML uses the modifier; Rakuten and Yahoo! retain the 76% layout. */
@media (min-width: 768px) {
  .lookbook-26aw.lookbook-26aw--colorme {
    width: 100% !important;
  }
}