

@layer views {

  .v-point-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .v-point {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }

  .v-point__label {
    flex: 0 0 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 21px;
    background: var(--text-main);
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 13.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-white);
  }

  .v-point__text {
    padding-top: 5px;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #4a4845;
    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 767px) {
    .v-point {
      gap: 12px;
    }
  }

  .v-section-head--en-only:not(:has(.v-section-head__lead)) {
    padding-bottom: 120px;
  }

  @media (max-width: 767px) {
    .v-section-head--en-only:not(:has(.v-section-head__lead)) {
      padding-bottom: 48px;
    }
  }

  .v-content-section--flush {
    padding-top: 0;
  }

  .v-style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 72px 17px;
  }

  .v-style-card {
    display: flex;
    flex-direction: column;
  }

  .v-style-card__en {
    --cap: 32.016px;
    padding-bottom: 18px;
    font-weight: 400;
    font-size: 4.8rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-gold);
    text-box: trim-both cap alphabetic;
  }

  .v-style-card__en img {
    display: block;
    width: auto;
    height: calc(var(--cap) * 1.2);
    margin-block: calc(var(--cap) * -0.1);

    margin-left: 0.05em;
  }

  .v-style-card__img {
    position: relative;
    aspect-ratio: 382 / 509;
    overflow: hidden;
  }

  .v-style-card__img picture {
    display: contents;
  }

  .v-style-card__img picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .v-style-card__img:has(.v-detail-toggle) picture img {
    transition: scale var(--dur-thumb) var(--ease-hover);
  }

  @media (hover: hover) and (pointer: fine) {
    .v-style-card__img:has(.v-detail-toggle:hover) picture img {
      scale: 1.055;
    }
  }

  .v-style-card__img[data-detail] picture img {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-detail) var(--ease-hover),
                visibility var(--dur-detail) var(--ease-hover),
                scale var(--dur-thumb) var(--ease-hover);
  }

  .v-style-card__img[data-detail="front"] .v-style-card__photo:nth-of-type(1) img,
  .v-style-card__img[data-detail="back"] .v-style-card__photo:nth-of-type(2) img {
    opacity: 1;
    visibility: visible;
  }

  .v-style-card__img picture[hidden] {
    display: none;
  }

  .v-style-card__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .v-style-card__name {
    padding-top: 18px;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  .v-style-card__desc {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  .v-style-card--sm .v-style-card__img {
    aspect-ratio: 290 / 386;
  }

  .v-style-card--sm .v-style-card__name {
    padding-top: 16px;
  }

  .v-detail-toggle {
    position: absolute;
    inset: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    grid-auto-flow: column;
    place-content: end;
    align-items: center;
    gap: 8px;
    padding: 12px;
  }

  .v-detail-toggle__text {

    padding-block: 4px;
    border-bottom: 1px solid transparent;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--text-white);
    text-box: trim-both cap alphabetic;

    transition: border-bottom-color var(--dur-hover) var(--ease-hover);
  }

  @media (hover: hover) and (pointer: fine) {
    .v-detail-toggle:hover .v-detail-toggle__text {
      border-bottom-color: var(--text-white);
    }

    .v-detail-toggle:hover .v-detail-toggle__icon {
      background: var(--text-gold);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .v-detail-toggle__text,
    .v-detail-toggle__icon,

    .v-custom-note img,
    .v-style-card__img picture img { transition: none; }
  }

  .v-detail-toggle__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-white);

    transition: background-color var(--dur-hover) var(--ease-hover);
  }

  .v-style-carousel {
    padding-top: 96px;
  }

  .v-style-carousel .v-carousel {
    --carousel-gutter: max(var(--gutter), calc((100% - var(--content-max)) / 2));
    --carousel-btn-x: calc(var(--carousel-gutter) - 20px);
    --carousel-btn-y: 193px;
  }

  .v-style-carousel .v-carousel__track > li {
    width: 290px;
  }

  @media (max-width: 767px) {
    .v-style-grid {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .v-style-card {
      display: grid;
      grid-template-columns: 1fr 160px;
      grid-template-rows: auto 1fr;
      column-gap: 15px;
    }

    .v-style-card__en  { grid-area: 1 / 1; min-width: 0; }
    .v-style-card__body { grid-area: 2 / 1; min-width: 0; align-self: start; }
    .v-style-card__img { grid-area: 1 / 2 / 3 / 3; align-self: start; }

    .v-style-card__en {
      --cap: 21.344px;
      padding-top: 6px;
      padding-bottom: 24px;
      font-size: 3.2rem;
    }

    .v-style-card__name {
      padding-top: 0;
      font-size: 1.5rem;
    }

    .v-style-card__desc {
      font-size: 1.3rem;
    }

    .v-style-card__img {
      aspect-ratio: 160 / 213;
    }

    .v-style-card--sm {
      display: flex;
      flex-direction: column;
    }

    .v-style-card--sm .v-style-card__img {
      grid-area: auto;
      align-self: auto;
      aspect-ratio: 144 / 192;
    }

    .v-style-card--sm .v-style-card__name {
      padding-top: 16px;
    }

    .v-detail-toggle {
      padding: 8px;
      gap: 6px;
    }

    .v-detail-toggle__text {
      font-size: 1.1rem;
    }

    .v-detail-toggle__icon {
      width: 22px;
      height: 22px;
    }

    .v-detail-toggle__icon img {
      width: 10.313px;
      height: 4.383px;
    }

    .v-style-carousel {
      padding-top: 84px;
    }

    .v-style-carousel .v-carousel {
      --carousel-gutter: 20px;
      --carousel-btn-x: 10px;

      --carousel-btn-y: 96px;
    }

    .v-style-carousel .v-carousel__track > li {
      width: 144px;
    }
  }

  .v-fabric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px 37px;
  }

  .v-fabric-card__name {
    overflow-wrap: anywhere;
  }

  .v-fabric-card__img {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
  }

  .v-fabric-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .v-fabric-card__name {
    padding-top: 18px;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  .v-fabric-card__text {
    padding-top: 18px;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 767px) {

    .v-fabric-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 36px 23px;
    }

    .v-fabric-card__name {
      font-size: 1.5rem;
    }

    .v-fabric-card__text {
      font-size: 1.3rem;
    }
  }

  .v-custom-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 72px 10px;
  }

  .v-custom-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .v-custom-item__img {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-white);
  }

  .v-custom-item__img picture {
    display: contents;
  }

  .v-custom-item__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .v-custom-pin {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 5.47%;
    aspect-ratio: 1;

    min-height: 0;
    translate: -50% -50%;
    border-radius: 50%;
    background: var(--text-gold);

    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: 1.52rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--text-main);

    cursor: pointer;

    transition: background-color var(--dur-hover) var(--ease-hover);
  }

  .v-custom-pin::before {
    content: "";
    position: absolute;
    inset: min(0px, calc((100% - 24px) / 2));
  }

  .v-custom-pin:focus-visible {
    outline-offset: 3px;
  }

  .v-custom-item--jacket-front .v-custom-pin:nth-of-type(1) { left: 50.94%; top: 58.63%; }
  .v-custom-item--jacket-front .v-custom-pin:nth-of-type(2) { left: 57.78%; top: 30.60%; }
  .v-custom-item--jacket-front .v-custom-pin:nth-of-type(3) { left: 42.05%; top: 35.21%; }
  .v-custom-item--jacket-front .v-custom-pin:nth-of-type(4) { left: 60.51%; top: 41.03%; }
  .v-custom-item--jacket-front .v-custom-pin:nth-of-type(5) { left: 38.63%; top: 67.35%; }
  .v-custom-item--jacket-front .v-custom-pin:nth-of-type(6) { left: 69.57%; top: 74.02%; }

  .v-custom-item--jacket-back  .v-custom-pin:nth-of-type(1) { left: 49.57%; top: 76.75%; }
  .v-custom-item--jacket-back  .v-custom-pin:nth-of-type(2) { left: 57.78%; top: 49.57%; }

  .v-custom-item--slacks-front .v-custom-pin:nth-of-type(1) { left: 41.71%; top: 23.59%; }
  .v-custom-item--slacks-front .v-custom-pin:nth-of-type(2) { left: 61.03%; top: 20.17%; }
  .v-custom-item--slacks-front .v-custom-pin:nth-of-type(3) { left: 41.37%; top: 84.79%; }
  .v-custom-item--slacks-front .v-custom-pin:nth-of-type(4) { left: 50.77%; top: 19.32%; }

  .v-custom-item--slacks-back  .v-custom-pin:nth-of-type(1) { left: 42.39%; top: 22.50%; }

  .v-custom-item--vest-front   .v-custom-pin:nth-of-type(1) { left: 53.85%; top: 58.63%; }
  .v-custom-item--vest-front   .v-custom-pin:nth-of-type(2) { left: 59.83%; top: 42.91%; }
  .v-custom-item--vest-front   .v-custom-pin:nth-of-type(3) { left: 37.26%; top: 70.77%; }
  .v-custom-item--vest-front   .v-custom-pin:nth-of-type(4) { left: 43.08%; top: 30.60%; }

  .v-custom-item--vest-back    .v-custom-pin:nth-of-type(1) { left: 49.06%; top: 47.69%; }

  .v-custom-list--suit .v-custom-item--slacks-front .v-custom-pin:nth-of-type(1) { left: 42.39%; top: 23.86%; }
  .v-custom-list--suit .v-custom-item--slacks-front .v-custom-pin:nth-of-type(2) { left: 61.03%; top: 20.17%; }
  .v-custom-list--suit .v-custom-item--slacks-front .v-custom-pin:nth-of-type(3) { left: 41.37%; top: 85.74%; }
  .v-custom-list--suit .v-custom-item--slacks-front .v-custom-pin:nth-of-type(4) { left: 50.77%; top: 18.91%; }

  .v-custom-list--suit .v-custom-item--slacks-back  .v-custom-pin:nth-of-type(1) { left: 42.39%; top: 22.15%; }

  .v-custom-list--suit .v-custom-item--vest-front   .v-custom-pin:nth-of-type(1) { left: 53.85%; top: 58.50%; }
  .v-custom-list--suit .v-custom-item--vest-front   .v-custom-pin:nth-of-type(2) { left: 58.97%; top: 42.94%; }
  .v-custom-list--suit .v-custom-item--vest-front   .v-custom-pin:nth-of-type(3) { left: 37.26%; top: 70.80%; }
  .v-custom-list--suit .v-custom-item--vest-front   .v-custom-pin:nth-of-type(4) { left: 43.08%; top: 30.63%; }

  .v-custom-list--suit .v-custom-item--vest-back    .v-custom-pin:nth-of-type(1) { left: 49.06%; top: 48.41%; }

  .v-custom-item--coat-front   .v-custom-pin:nth-of-type(1) { left: 58.29%; top: 34.70%; }
  .v-custom-item--coat-front   .v-custom-pin:nth-of-type(2) { left: 41.54%; top: 57.44%; }
  .v-custom-item--coat-front   .v-custom-pin:nth-of-type(3) { left: 64.79%; top: 63.76%; }
  .v-custom-item--coat-front   .v-custom-pin:nth-of-type(4) { left: 57.61%; top: 24.27%; }

  .v-custom-item--coat-back    .v-custom-pin:nth-of-type(1) { left: 56.58%; top: 40.17%; }

  .v-custom-item--ladies-jacket-front .v-custom-pin:nth-of-type(1) { left: 50.09%; top: 54.53%; }
  .v-custom-item--ladies-jacket-front .v-custom-pin:nth-of-type(2) { left: 58.80%; top: 32.65%; }
  .v-custom-item--ladies-jacket-front .v-custom-pin:nth-of-type(3) { left: 59.83%; top: 41.88%; }
  .v-custom-item--ladies-jacket-front .v-custom-pin:nth-of-type(4) { left: 38.12%; top: 68.38%; }
  .v-custom-item--ladies-jacket-front .v-custom-pin:nth-of-type(5) { left: 71.11%; top: 82.39%; }

  .v-custom-item--ladies-jacket-back  .v-custom-pin:nth-of-type(1) { left: 49.40%; top: 77.44%; }
  .v-custom-item--ladies-jacket-back  .v-custom-pin:nth-of-type(2) { left: 57.27%; top: 46.84%; }

  .v-custom-item--ladies-slacks-front .v-custom-pin:nth-of-type(1) { left: 43.08%; top: 85.85%; }
  .v-custom-item--ladies-slacks-back  .v-custom-pin:nth-of-type(1) { left: 42.56%; top: 21.74%; }

  .v-custom-item--ladies-skirt-front  .v-custom-pin:nth-of-type(1) { left: 50.01%; top: 78.09%; }
  .v-custom-item--ladies-vest-front   .v-custom-pin:nth-of-type(1) { left: 52.99%; top: 56.03%; }

  .v-custom-item--kids-jacket-front .v-custom-pin:nth-of-type(1) { left: 51.62%; top: 56.24%; }
  .v-custom-item--kids-jacket-front .v-custom-pin:nth-of-type(2) { left: 76.41%; top: 68.21%; }
  .v-custom-item--kids-jacket-front .v-custom-pin:nth-of-type(3) { left: 58.63%; top: 30.77%; }
  .v-custom-item--kids-jacket-back  .v-custom-pin:nth-of-type(1) { left: 49.40%; top: 71.28%; }
  .v-custom-item--kids-slacks-front .v-custom-pin:nth-of-type(1) { left: 62.05%; top: 79.25%; }
  .v-custom-item--kids-vest-front   .v-custom-pin:nth-of-type(1) { left: 53.85%; top: 50.70%; }

  .v-custom-item--shirt-front .v-custom-pin:nth-of-type(1) { left: 44.08%; top: 27.61%; }
  .v-custom-item--shirt-front .v-custom-pin:nth-of-type(2) { left: 82.43%; top: 68.88%; }
  .v-custom-item--shirt-front .v-custom-pin:nth-of-type(3) { left: 58.86%; top: 47.26%; }
  .v-custom-item--shirt-front .v-custom-pin:nth-of-type(4) { left: 59.84%; top: 64.65%; }
  .v-custom-item--shirt-front .v-custom-pin:nth-of-type(5) { left: 53.78%; top: 33.89%; }
  .v-custom-item--shirt-back  .v-custom-pin:nth-of-type(1) { left: 50.00%; top: 48.55%; }

  .v-custom-item__body {
    padding-top: 12px;
  }

  .v-custom-item__title {
    padding: 12px;
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  .v-custom-item__notes {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
    padding: 12px;
  }

  .v-custom-note {
    display: flex;
    background: transparent;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--text-main);
    transition: color var(--dur-hover) var(--ease-hover);
  }

  .v-custom-note__text {
    flex-shrink: 0;
  }

  .v-custom-note__no {
    --note-no: 2.24rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--note-no);
    width: var(--note-no);
    min-width: 0;
    height: var(--note-no);
    border-radius: 50%;
    background: var(--text-gold);
    font-family: "Jost", sans-serif;
    font-size: calc(var(--note-no) * 0.475);
    line-height: 1.8;
    color: var(--text-main);
    transition: background-color var(--dur-hover) var(--ease-hover);
  }

  @media (hover: hover) and (pointer: fine) {
    .v-custom-pin:hover,
    .v-custom-note:hover .v-custom-note__no {
      background: var(--text-gold-dark);
    }

    .v-custom-note:hover {
      color: var(--hover-gray);
    }

    .v-custom-note img {
      transition: filter var(--dur-hover) var(--ease-hover);
    }

    .v-custom-note:hover img {
      filter: brightness(2.45098);
    }
  }

  .v-custom-item__other {
    flex-basis: 100%;
  }

  .v-custom-other {
    max-width: 561px;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--text-main);
    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 767px) {
    .v-custom-list {
      grid-template-columns: 1fr;
      gap: 48px;

    }

    .v-custom-item__body {
      padding-top: 24px;
    }

    .v-custom-item__title {
      padding: 0;
    }

    .v-custom-item__notes {
      gap: 18px;
      padding: 24px 0 0;
    }

    .v-custom-note__no {
      --note-no: 1.84rem;
    }

    .v-custom-pin {
      width: 6.21%;
      font-size: 0.988rem;
    }

  }

  .v-content-section--beige-dark {
    background: var(--bg-beige-dark);
  }

  .v-figure--shirt {
    margin-top: 0;
    aspect-ratio: 1180 / 668;
  }

  .v-figure-caption {
    margin-top: 40px;
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 767px) {
    .v-figure--shirt {
      margin-top: 0;
      aspect-ratio: 335 / 223;
    }

    .v-figure-caption {
      margin-top: 24px;
      font-size: 1.6rem;
    }
  }
}
