/* COREVERSE Try On: supplied lace treatment and mobile-first studio layout. */
.tone-carousel__nav { display: none; }

@media (max-width: 700px) {
  #tryon.tryon {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 13.5vw 0 0 !important;
    overflow: visible;
    background: #fff !important;
  }

  #tryon.tryon::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 12;
    height: 13.5vw;
    content: "";
    opacity: 1;
    background: url("assets/tryon/mobile-lace-frame.png") center -24.1vw / 100vw auto no-repeat;
    mix-blend-mode: normal;
    pointer-events: none;
  }

  #tryon .tryon__panel {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    grid-template-areas:
      "stage stage"
      "skin skin"
      "background strip"
      "product product";
    width: 100%;
    margin: 0;
    padding: 0 !important;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #050507;
    box-shadow: none;
    backdrop-filter: none;
  }

  #tryon .tryon__head { display: none; }
  #tryon .tryon__grid,
  #tryon .tryon__controls { display: contents !important; }

  #tryon .tryon__stage-wrap {
    grid-area: stage;
    position: relative;
    z-index: 2;
    gap: 0;
    width: 100%;
    background: #f5f6f8;
  }

  #tryon .tryon__stage {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 0;
    border-radius: 0;
  }

  #tryon .tryon__stage[data-hand="photo"] .stage__inner,
  #tryon .tryon__stage[data-hand="photo"] .hand-photo {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: 4 / 3;
  }

  #tryon #handPhotoImg { object-fit: fill; }
  #tryon .stage__hint { display: none; }

  #tryon .tryon__tools {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 10;
    gap: 5px;
  }

  #tryon .tryon__tools .tool {
    display: grid;
    width: 34px;
    min-height: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border-color: rgba(0, 0, 0, .18);
    background: rgba(255, 255, 255, .9);
    font-size: 0;
  }

  #tryon .tryon__tools .tool svg { width: 15px; height: 15px; }

  #tryon .tryon-control-block--skin {
    position: relative;
    grid-area: skin;
    min-width: 0;
    margin: 0;
    padding: 13px 10px calc(13.5vw + 10px);
    overflow: hidden;
    border: 0;
    background: #050507;
    color: #fff;
  }

  #tryon .tryon-control-block--skin::after {
    position: absolute;
    inset: auto 0 0;
    height: 13.5vw;
    content: "";
    background: url("assets/tryon/mobile-lace-frame.png") center -113.8vw / 100vw auto no-repeat;
    pointer-events: none;
  }

  #tryon .tryon-control-block--skin > .micro {
    margin: 0 0 8px;
    color: #fff;
    font-size: 0;
    letter-spacing: .02em;
  }

  #tryon .tryon-control-block--skin > .micro::before {
    font: 700 clamp(17px, 4.7vw, 23px)/1 "Howto Longa", "Times New Roman", serif;
    content: "SKIN TONE ←";
  }

  #tryon .tone-carousel {
    --mobile-tone-size: clamp(44px, 11.5vw, 56px);
    display: grid;
    grid-template-columns: 28px minmax(0, auto) 28px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
  }

  #tryon .tone-carousel__nav {
    display: grid;
    width: 28px;
    min-width: 28px;
    height: 36px;
    min-height: 36px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: 700 17px/1 Arial, sans-serif;
    cursor: pointer;
  }

  #tryon .tone-carousel__nav:active { transform: scale(.94); }

  #tryon .tones {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    gap: 6px !important;
    width: calc((5 * var(--mobile-tone-size)) + 24px);
    max-width: calc(100vw - 86px);
    margin: 0;
    padding: 2px 2px 6px;
    overflow: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  #tryon .tones::-webkit-scrollbar { display: none; }

  #tryon .tone {
    flex: 0 0 var(--mobile-tone-size);
    min-width: var(--mobile-tone-size) !important;
    min-height: var(--mobile-tone-size) !important;
    width: var(--mobile-tone-size);
    height: var(--mobile-tone-size);
    display: block !important;
    padding: 3px !important;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    scroll-snap-align: start;
  }

  #tryon .tone img,
  #tryon .tone span { display: none; }

  #tryon .tone::before {
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: var(--mobile-skin, #efd3c6);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, .22);
    content: "";
  }

  #tryon .tone.is-on::before {
    outline: 3px solid #fff;
    outline-offset: 2px;
  }

  #tryon .tone[data-tone="1"] { --mobile-skin: #f0dcd5; }
  #tryon .tone[data-tone="2"] { --mobile-skin: #e4c1b0; }
  #tryon .tone[data-tone="3"] { --mobile-skin: #dfaf8e; }
  #tryon .tone[data-tone="4"] { --mobile-skin: #c8906b; }
  #tryon .tone[data-tone="5"] { --mobile-skin: #733f2a; }
  #tryon .tone[data-tone="6"] { --mobile-skin: #759d47; }
  #tryon .tone[data-tone="7"] { --mobile-skin: #6c98d2; }
  #tryon .tone[data-tone="8"] { --mobile-skin: #b485c5; }
  #tryon .tone[data-tone="9"] { --mobile-skin: #a9a5ac; }
  #tryon .tone[data-tone="10"] { --mobile-skin: #ffd9e9; }
  #tryon .tone[data-tone="11"] { --mobile-skin: #c6211b; }
  #tryon .tone[data-tone="12"] { --mobile-skin: #f0ecf3; }
  #tryon .tone[data-tone="13"] { --mobile-skin: #291d19; }

  #tryon #skinReset { display: none; }

  #tryon .tryon-control-block--background {
    position: relative;
    grid-area: background;
    align-self: stretch;
    min-width: 0;
    margin: 8px 4px 14px 10px;
    padding: 12px 31px 12px 10px;
    overflow: visible;
    border: 3px double #050507;
    border-radius: 4px;
    background: #fff;
    color: #050507;
    box-shadow: 0 0 0 3px #fff;
  }

  #tryon .tryon-control-block--background > .micro {
    position: absolute;
    top: 50%;
    right: 5px;
    margin: 0;
    color: #050507;
    font: 700 clamp(15px, 4vw, 19px)/1 "Howto Longa", serif;
    letter-spacing: .01em;
    text-transform: lowercase;
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
  }

  #tryon .bgs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
  }

  #tryon .bg {
    width: clamp(38px, 10vw, 48px);
    height: clamp(38px, 10vw, 48px);
    justify-self: center;
    border: 1px solid #050507;
  }

  #tryon .color-lab,
  #tryon .background-upload {
    position: relative;
    z-index: 5;
    width: calc(100% + 21px);
    margin: 10px 0 0;
    padding: 8px;
    border-radius: 6px;
    background: #fff;
  }

  #tryon .strip--junji {
    position: relative;
    grid-area: strip;
    align-self: stretch;
    min-width: 0;
    margin: 8px 10px 14px 4px;
    padding: 38px 19px 10px;
    overflow: hidden;
    border: 3px double #050507;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 0 3px #fff;
  }

  #tryon .strip--junji::before {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    color: #050507;
    font: 700 clamp(15px, 4.4vw, 21px)/1 "Howto Longa", "Times New Roman", serif;
    text-align: center;
    letter-spacing: .01em;
    content: "CHOOSE COLLECTION";
  }

  #tryon .strip--junji .strip__scroll {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  #tryon .strip--junji .chip--cover {
    flex: 0 0 calc(50% - 2px);
    width: auto;
    min-width: 0;
    display: block;
    padding: 2px;
    border: 1px solid #050507;
    border-radius: 0;
    background: #fff;
    scroll-snap-align: start;
  }

  #tryon .strip--junji .chip--cover > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100px;
    aspect-ratio: 3 / 4;
    border-radius: 0;
    object-fit: cover;
  }

  #tryon .strip--junji .chip--cover > span { display: none; }

  #tryon .strip--junji .tryon-strip-empty {
    min-width: 100%;
    min-height: 100px;
    padding: 8px;
    border-radius: 0;
    font-size: 9px;
    line-height: 1.45;
  }

  #tryon .strip--junji .strip__nav {
    position: absolute;
    top: 56%;
    z-index: 5;
    width: 26px;
    min-height: 26px;
    height: 26px;
    border: 2px solid #050507;
    background: #fff;
    color: #050507;
    transform: translateY(-50%);
  }

  #tryon .strip--junji .strip__nav:hover { transform: translateY(-50%) scale(1.04); }
  #tryon .strip--junji .strip__nav--prev,
  #tryon .strip--junji #stripPrev { left: -9px; }
  #tryon .strip--junji .strip__nav--next,
  #tryon .strip--junji #stripNext { right: -9px; }

  #tryon .tryon__product {
    position: relative;
    grid-area: product;
    min-width: 0;
    margin: 0;
    padding: calc(13.5vw + 16px) 12px 24px !important;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #111114;
    box-shadow: none;
    backdrop-filter: none;
  }

  #tryon .tryon__product::before {
    position: absolute;
    inset: 0 0 auto;
    height: 13.5vw;
    content: "";
    background: #050507 url("assets/tryon/mobile-lace-frame.png") center -159.3vw / 100vw auto no-repeat;
    pointer-events: none;
  }

  #tryon .product__top { margin-top: 0; }
  #tryon .junji-finger-controls { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}