.productitem--image-primary {
  object-fit: contain;
  object-position: center center;
  max-height: 220px !important; }

@media only screen and (max-width: 1080px) {
  .productitem--image-primary {
    max-height: 170px !important; } }
.custom-mosaic-grid {
  width: 100%;
  height: 50vw;
  max-height: 700px;
  margin-top: 1.75rem;
  overflow: hidden;
  display: grid;
  grid-column-gap: 1.75rem;
  grid-row-gap: 1.75rem;
  grid-template-columns: calc(66.67% - (1.75rem / 2)) calc(33.33% - (1.75rem / 2)); }
  .custom-mosaic-grid .main-panel-container {
    grid-row: 1 / span 3;
    grid-column: 1;
    display: grid;
    height: 50vw;
    max-height: 700px; }
    .custom-mosaic-grid .main-panel-container .mosaic-main-panel {
      grid-column: 1;
      grid-row: 1;
      width: 100%;
      height: 50vw;
      max-height: 700px;
      transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1); }
      .custom-mosaic-grid .main-panel-container .mosaic-main-panel.hidden {
        opacity: 0; }
      .custom-mosaic-grid .main-panel-container .mosaic-main-panel img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: bottom right; }
    .custom-mosaic-grid .main-panel-container .main-panel-navigation {
      position: relative;
      display: block; }
      .custom-mosaic-grid .main-panel-container .main-panel-navigation .main-panel-next {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0.875rem 0 0 0.65rem;
        border-radius: 0.875rem 0 0 0;
        font-size: 24px;
        font-weight: 600;
        line-height: 0.72;
        background: #fff;
        color: #022d74;
        cursor: pointer; }
  .custom-mosaic-grid .mosaic-side-panel {
    grid-column: 2;
    width: 100%;
    height: calc((50vw - 1.75rem) / 2);
    max-height: calc((700px - 1.75rem) / 2); }
    .custom-mosaic-grid .mosaic-side-panel img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center center; }

@media only screen and (max-width: 1023px) {
  .custom-mosaic-grid {
    height: 100%;
    max-height: 100%;
    margin-top: 0;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    grid-template-columns: repeat(2, calc(50% - (1.75rem / 2))); }
    .custom-mosaic-grid .main-panel-container {
      margin-top: 0;
      margin-bottom: 0;
      margin-left: -1.75rem;
      margin-right: -1.75rem;
      grid-row: 1;
      grid-column: 1 / span 2;
      height: calc(((50vw * 1.5) + 15px) + (1.75rem / 2));
      max-height: calc(((700px * 1.5) + 15px) + (1.75rem / 2)); }
      .custom-mosaic-grid .main-panel-container .mosaic-main-panel {
        height: calc(((50vw * 1.5) + 15px) + (1.75rem / 2));
        max-height: calc(((700px * 1.5) + 15px) + (1.75rem / 2)); }
      .custom-mosaic-grid .main-panel-container .main-panel-navigation .main-panel-next {
        right: 1.75rem;
        padding: 0.875rem 0.65rem 0 0.65rem;
        border-radius: 0.875rem 0.875rem 0 0; }
    .custom-mosaic-grid .mosaic-side-panel {
      grid-column: initial;
      height: calc(((50vw - 1.75rem) * 1.5) / 2);
      max-height: calc(((700px - 1.75rem) * 1.5) / 2); } }
@media only screen and (max-width: 599px) {
  .custom-mosaic-grid {
    grid-template-columns: 100%; }
    .custom-mosaic-grid .main-panel-container {
      grid-row: 1;
      grid-column: 1;
      height: calc(((50vw * 1.5) + 10px) + (1.75rem / 2));
      max-height: calc(((700px * 1.5) + 10px) + (1.75rem / 2)); }
      .custom-mosaic-grid .main-panel-container .mosaic-main-panel {
        height: calc(((50vw * 1.5) + 10px) + (1.75rem / 2));
        max-height: calc(((700px * 1.5) + 10px) + (1.75rem / 2)); }
    .custom-mosaic-grid .mosaic-side-panel {
      height: calc((50vw - 1.75rem) * 1.5);
      max-height: calc((700px - 1.75rem) * 1.5); } }
.custom-collection-container .custom-collection-grid {
  display: grid;
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  grid-template-columns: repeat(6, calc((100% - (18px * 5)) / 6)); }
  .custom-collection-container .custom-collection-grid .custom-collection-item {
    padding: 18px;
    border-radius: 4.5px;
    text-align: center;
    transition: 250ms cubic-bezier(0.4, 0, 0.2, 1); }
    .custom-collection-container .custom-collection-grid .custom-collection-item a {
      text-decoration: none; }
    .custom-collection-container .custom-collection-grid .custom-collection-item .ratio-box {
      position: relative; }
      .custom-collection-container .custom-collection-grid .custom-collection-item .ratio-box::after {
        display: block;
        content: '';
        padding-bottom: 100%; }
      .custom-collection-container .custom-collection-grid .custom-collection-item .ratio-box img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        object-fit: cover;
        object-position: center center; }
    .custom-collection-container .custom-collection-grid .custom-collection-item p {
      opacity: 0.8;
      transition: 250ms cubic-bezier(0.4, 0, 0.2, 1); }
    .custom-collection-container .custom-collection-grid .custom-collection-item:hover {
      box-shadow: 0 3px 15px rgba(128, 128, 128, 0.4); }
      .custom-collection-container .custom-collection-grid .custom-collection-item:hover p {
        opacity: 1; }
  .custom-collection-container .custom-collection-grid .custom-collection-all {
    padding: 18px;
    text-align: center; }
    .custom-collection-container .custom-collection-grid .custom-collection-all .all-square {
      position: relative;
      width: 100%; }
      .custom-collection-container .custom-collection-grid .custom-collection-all .all-square:after {
        content: '';
        display: block;
        padding-bottom: 100%; }
      .custom-collection-container .custom-collection-grid .custom-collection-all .all-square .all-square-content {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        background: #efefef;
        transition: 250ms cubic-bezier(0.4, 0, 0.2, 1); }
        .custom-collection-container .custom-collection-grid .custom-collection-all .all-square .all-square-content .content-container {
          display: table;
          height: 100%;
          width: 100%; }
          .custom-collection-container .custom-collection-grid .custom-collection-all .all-square .all-square-content .content-container p {
            display: table-cell;
            vertical-align: middle;
            font-weight: 600; }
        .custom-collection-container .custom-collection-grid .custom-collection-all .all-square .all-square-content:hover {
          background: #fff;
          color: #022d74;
          box-shadow: 0 3px 15px rgba(128, 128, 128, 0.4); }
  @media only screen and (max-width: 1000px) {
    .custom-collection-container .custom-collection-grid {
      grid-template-columns: repeat(4, calc((100% - (18px * 3)) / 4)); } }
  @media only screen and (max-width: 720px) {
    .custom-collection-container .custom-collection-grid {
      grid-template-columns: repeat(3, calc((100% - (18px * 2)) / 3)); } }
  @media only screen and (max-width: 480px) {
    .custom-collection-container .custom-collection-grid {
      grid-template-columns: repeat(2, calc((100% - (18px * 1)) / 2)); } }

.custom-discount-container .custom-discount-grid {
  display: grid;
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  grid-template-columns: repeat(4, calc((100% - (2em * 3)) / 4));
  margin-top: 4em; }
  .custom-discount-container .custom-discount-grid .custom-discount {
    transition: 0.33s cubic-bezier(0.4, 0, 0.2, 1); }
    .custom-discount-container .custom-discount-grid .custom-discount img {
      width: 100%;
      height: auto; }
    .custom-discount-container .custom-discount-grid .custom-discount:hover {
      transform: translate(0, -0.5em);
      box-shadow: 0 3px 15px rgba(128, 128, 128, 0.4); }
  @media only screen and (max-width: 800px) {
    .custom-discount-container .custom-discount-grid {
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      grid-template-columns: repeat(2, calc((100% - (10px * 1)) / 2)); } }
  @media only screen and (max-width: 480px) {
    .custom-discount-container .custom-discount-grid .custom-discount:hover {
      transform: translate(0, 0);
      box-shadow: initial; } }