/* Keep the supplied editorial photographs crisp at their native proportions. */
.hero>img {
  object-position: center 38%;
}

/* Keep the mouth and gloss applicator visible above the hero lettering. */
.hero-copy { top:58%; }

/* Desktop only: fill the viewport so no white gap appears below the hero. */
@media (min-width:801px) {
  .hero { height:100vh; }
}

.badge { display:none; }

.shade-image {
  display: block;
  background: none;
  height: auto;
  box-shadow: 0 18px 45px rgba(94, 31, 57, .14);
  overflow: hidden;
}

.collection-banner {
  width: 100%;
  height: auto;
  display: block;
}

.collection-art { position:relative; width:100%; }
.shade-label {
  position:absolute;
  z-index:1;
  top:7%;
  width:21%;
  color:#fff;
  font-family:"Archivo Black",sans-serif;
  line-height:1;
  text-shadow:0 2px 12px rgba(94,24,34,.24);
}
.shade-label strong { display:block; font-size:clamp(18px,2vw,30px); }
.shade-label span { display:block; margin-top:8px; font-size:clamp(12px,1.25vw,19px); }
.shade-label-1 { left:3%; }
.shade-label-2 { left:28%; }
.shade-label-3 { left:53%; }
.shade-label-4 { left:78%; }

.mantra img { object-position: center 30%; }

.mosaic {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 8px;
}

.mosaic figure,
.mosaic .wide {
  grid-column: auto;
  aspect-ratio: 1;
}

.orange-lips-post::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 111, 38, .22);
  mix-blend-mode: color;
  pointer-events: none;
}

.mosaic .orange-lips-post { position: relative; }
.mosaic .orange-lips-post img { transform: none; object-position: center 16%; filter: saturate(1.18) contrast(1.04); }
.mosaic .orange-lips-post:hover img { transform: scale(1.02); }

@media (min-width:801px) {
  .lookbook { overflow:hidden; }
  .mosaic {
    display:flex;
    width:max-content;
    grid-template-columns:none;
    animation:sandia-mobile-gallery 28s linear infinite;
    will-change:transform;
  }
  .mosaic figure,
  .mosaic .wide {
    flex:0 0 calc((91vw - 24px) / 4);
    width:calc((91vw - 24px) / 4);
  }
  .mosaic:hover { animation-play-state:paused; }
}

@media (max-width: 800px) {
  .hero>img { object-position:64% center; }
  .hero-copy { top:50%; }
  .shade-image {
    overflow:hidden;
  }
  .collection-art { width:100%; }
  .collection-banner { width:100%; max-width:none; }
  .shade-label { top:5%; }
  .shade-label strong { font-size:11px; }
  .shade-label span { margin-top:4px; font-size:7px; }
  .mosaic { grid-template-columns: repeat(5, 140px); overflow-x: auto; padding-bottom: 8px; }
}

/* Bilingual navigation */
.header { grid-template-columns: auto 1fr auto auto; gap: 24px; }
.header nav { justify-self: center; }
.language-switch { display:flex; align-items:center; gap:5px; padding:5px 9px; border:1px solid rgba(255,255,255,.7); border-radius:999px; background:rgba(17,17,17,.18); backdrop-filter:blur(7px); font:bold 9px/1 sans-serif; letter-spacing:.08em; }
.language-switch button { padding:3px 2px; border:0; background:none; color:rgba(255,255,255,.55); font:inherit; cursor:pointer; }
.language-switch button[aria-pressed="true"] { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.language-switch button:focus-visible { outline:2px solid var(--acid); outline-offset:3px; }
html[lang="ja"] body { font-family:"DM Sans","Hiragino Sans","Yu Gothic",sans-serif; }
html[lang="ja"] .hero h1,html[lang="ja"] h2,html[lang="ja"] footer h3 { letter-spacing:-.07em; line-height:.95; }

@media (max-width:800px) {
  .header { grid-template-columns:1fr auto auto; gap:12px; }
  .language-switch { grid-column:2; }
  .cart { grid-column:3; }
  .menu { right:142px; }
}

/* Mobile-only layout and motion. Desktop rules above remain unchanged. */
@media (max-width:800px) {
  .header {
    grid-template-columns:auto 1fr auto auto;
    gap:10px;
    padding-inline:4vw;
  }
  .menu {
    position:static;
    grid-column:2;
    justify-self:end;
    margin-right:6px;
  }
  .language-switch { grid-column:3; }
  .cart { grid-column:4; }
  .header>.logo { transform:none; }
  .menu span { box-shadow:0 1px 5px rgba(0,0,0,.78); }
  .hero-copy .overline,
  .hero-copy h1,
  .hero-copy>p:not(.overline),
  .hero-copy .button { transform:translateY(58px); }

  .lookbook { overflow:hidden; }
  .look-intro h2 {
    font-size:clamp(28px,9vw,36px);
    white-space:nowrap;
    letter-spacing:-.065em;
  }
  .mosaic {
    display:flex;
    width:max-content;
    grid-template-columns:none;
    overflow:visible;
    gap:8px;
    padding-bottom:8px;
    animation:sandia-mobile-gallery 22s linear infinite;
    will-change:transform;
  }
  .mosaic figure,
  .mosaic .wide {
    flex:0 0 140px;
    width:140px;
  }
  .mosaic:hover { animation-play-state:paused; }
}

@media (max-width:500px) {
  .hero-copy { top:55%; }
  .hero-copy .hand { text-shadow:0 1px 5px rgba(0,0,0,.65); }
  .mantra img {
    height:auto;
    aspect-ratio:2 / 1;
    object-fit:cover;
    object-position:center 30%;
  }
}

@keyframes sandia-mobile-gallery {
  from { transform:translateX(0); }
  to { transform:translateX(calc(-50% - 4px)); }
}

@media (max-width:800px) and (prefers-reduced-motion:reduce) {
  .mosaic { animation:none; overflow-x:auto; }
}

@media (min-width:801px) and (prefers-reduced-motion:reduce) {
  .mosaic { animation:none; }
}

/* PC only: improve menu readability over light areas of the hero photo. */
@media (min-width:801px) {
  .header nav a {
    text-shadow:0 1px 5px rgba(0,0,0,.78);
  }
}

/* Mood Finder — isolated interactive section. */
.about { width:100%; overflow:hidden; }
.about>img { display:block; min-width:100%; max-width:none; transform:scale(1.015); }

.mood-finder { --mood-color:#f6f0e8; --wave-color:#f6f0e8; --wave-x:50%; --wave-y:50%; position:relative; overflow:hidden; padding:80px 4.5%; background:var(--mood-color); transition:background-color .65s ease; }
.mood-finder>.mood-color-wave { position:absolute; z-index:0; inset:0; background:var(--wave-color); clip-path:circle(0 at var(--wave-x) var(--wave-y)); pointer-events:none; }
.mood-finder.is-revealing>.mood-color-wave { animation:mood-color-wave .65s cubic-bezier(.55,.02,.16,1) both; }
.mood-finder>*:not(.mood-color-wave) { position:relative; z-index:1; }
.mood-finder-heading { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:end; gap:28px; margin-bottom:34px; }
.mood-finder-heading h2 { margin:0; font-size:clamp(48px,6vw,86px); }
.mood-finder-heading>p:last-child { margin:0 0 8px; max-width:190px; }
.mood-options { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #111; }
.mood-option { position:relative; min-height:230px; padding:24px; border:0; border-right:1px solid #111; color:#111; text-align:left; cursor:pointer; overflow:hidden; transition:transform .25s ease,filter .25s ease; }
.mood-option:last-child { border-right:0; }
.mood-option strong { position:relative; z-index:1; display:block; max-width:150px; font:22px/.95 "Archivo Black"; }
.mood-option span { position:absolute; z-index:1; left:24px; bottom:24px; max-width:145px; font-size:11px; }
.mood-option i { display:none; }
.mood-option:hover,.mood-option:focus-visible { transform:translateY(-7px); filter:saturate(1.12); outline:0; }
.mood-option[aria-pressed="true"] { box-shadow:inset 0 0 0 4px #111; }
.mood-slow,.mood-fresh,.mood-cool,.mood-warm { background:#f6f0e8; }
.mood-slow[aria-pressed="true"] { background:#efc8bb; }
.mood-fresh[aria-pressed="true"] { background:#ff5d79; }
.mood-cool[aria-pressed="true"] { background:#d7a5d9; }
.mood-warm[aria-pressed="true"] { background:#ef983f; }
.mood-result { margin-top:36px; min-height:440px; display:grid; grid-template-columns:1fr 1fr; background:#111; color:#fff; animation:mood-result-in .55s ease both; }
.mood-result[hidden] { display:none; }
.mood-result-image { min-height:440px; overflow:hidden; }
.mood-result-image img { display:block; width:100%; height:100%; object-fit:cover; }
/* CORAL BREEZE only: hide the narrow source-image edge without changing the frame. */
.mood-result-image img[src*="shade-coral-breeze"] { transform:scale(1.012); }
/* BERRY CRUSH only: crop the narrow orange edge visible on the rendered right side. */
.mood-result-image img[src*="shade-berry-crush"] { transform:scale(1.012); }
.mood-result-copy { padding:60px 7vw; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.mood-result-copy>span { margin-top:20px; font:bold 13px sans-serif; letter-spacing:.15em; }
.mood-result-copy h3 { margin:5px 0 18px; font:clamp(38px,5vw,70px)/.92 "Archivo Black"; }
.mood-result-copy>p:not(.overline) { max-width:260px; margin:0; }
.mood-result-copy .button { background:#fff; color:#111; }
.mood-reset { margin-top:18px; padding:0; border:0; border-bottom:1px solid currentColor; background:none; color:inherit; font:bold 9px sans-serif; letter-spacing:.08em; cursor:pointer; }
@keyframes mood-result-in { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes mood-color-wave { from { clip-path:circle(0 at var(--wave-x) var(--wave-y)); } to { clip-path:circle(220% at var(--wave-x) var(--wave-y)); } }

@media (max-width:800px) {
  .mood-finder { padding:64px 6%; }
  .mood-finder-heading { display:block; margin-bottom:28px; }
  .mood-finder-heading h2 { margin:16px 0 20px; font-size:clamp(43px,13vw,62px); }
  .mood-options { grid-template-columns:1fr; }
  .mood-option { min-height:132px; border-right:0; border-bottom:1px solid #111; }
  .mood-option:last-child { border-bottom:0; }
  .mood-option strong { max-width:none; }
  .mood-option span { bottom:20px; max-width:230px; }
  .mood-option i { bottom:-28px; }
  .mood-result { grid-template-columns:1fr; min-height:0; }
  .mood-result-image { min-height:0; aspect-ratio:1; }
  .mood-result-copy { padding:46px 8%; }
}

@media (prefers-reduced-motion:reduce) {
  .mood-finder,.mood-option { transition:none; }
  .mood-result { animation:none; }
  .mood-finder.is-revealing>.mood-color-wave { animation:none; }
}

/* SHOP NOW click feedback. */
.mantra>a.shop-pressed { animation:shop-circle-press .24s ease both; }
@keyframes shop-circle-press { 50% { transform:scale(.88) rotate(-5deg); background:#111; color:#fff; } }
@media (prefers-reduced-motion:reduce) {
  .mantra>a.shop-pressed { animation:none; }
}