.content-max,
  .controller-max {
    margin: 0 auto;
    max-width: 630px;
  }
  
  .controller-max {
    margin-top: 10px;
  }
  
  /**
  * EasyZoom core styles
  */
  .easyzoom {
    display: flex;
    position: relative;
    /* display: inline-block; */
    width: 100%;
    height: 100%;
  }
  
  .easyzoom > a {
    margin: auto;
    display: block;
  }
  
  .easyzoom img {
    vertical-align: bottom;
  }
  
  .easyzoom > a > img {
    margin: auto;
    max-width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  
  .easyzoom.is-loading img {
    cursor: progress;
  }
  
  .easyzoom.is-ready img {
    cursor: crosshair;
  }
  
  .easyzoom.is-error img {
    cursor: not-allowed;
  }
  
  .easyzoom-notice {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 150;
    width: 10em;
    margin: -1em 0 0 -5em;
    line-height: 2em;
    text-align: center;
    background: #FFF;
    box-shadow: 0 0 10px #888;
  }
  
  .easyzoom-flyout {
    position: absolute;
    z-index: 100;
    overflow: hidden;
    background: #FFF;
  }
  
  .easyzoom--overlay .easyzoom-flyout {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .easyzoom--adjacent .easyzoom-flyout {
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    margin-left: 20px;
  }
  
  .ratio {
    position: relative;
    width: 100%;
  }
  .ratio::before {
    content: "";
    display: block;
  }
  .ratio > * {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }
  .ratio.ratio-4x3 {
    background-color: #FFF;
    /* border: 1px solid #DDD; */
  }
  .ratio.ratio-4x3::before {
    padding-top: 75%;
  }
  
  /** 
  * Swiper styles
  */
  .swiper .swiper-slide img {
    padding: 10px;
  }
  .swiper.swiper.swiper--product-detail .swiper-slide {
    display: flex;
    position: relative;
    width: 100%;
  }
  .swiper.swiper--product-thumbs .swiper-slide img {
    -o-object-fit: contain;
       object-fit: contain;
    cursor: pointer;
  }
  
  .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    margin-top: 5px;
    position: relative;
    top: unset;
    bottom: unset;
    left: unset;
    width: 100%;
    height: 2px;
  }
  
  .swiper-scrollbar {
    background-color: #f0f0f0;
  }
  .swiper-scrollbar-drag {
    background-color: #ccc;
  }
  
  .swiper-buttons {
    /* margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center; */
    display: none;
  }
  
  .swiper-button-prev,
  .swiper-button-next {
    margin: 0 5px;
    padding: 10px 15px;
    position: relative;
    left: unset;
    right: unset;
    top: unset;
    width: unset;
    height: unset;
    margin-top: unset;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #DDD;
    border: 1px solid #DDD;
    background-color: #FFF;
    transition: all 0.2s ease;
  }
  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 1.2rem;
    font-weight: bold;
  }
  .swiper-button-prev:not(.swiper-button-disabled):hover,
  .swiper-button-next:not(.swiper-button-disabled):hover {
    color: #FFF;
    background-color: #ccc;
  }
  
  .swiper-button-prev.swiper-button-disabled,
  .swiper-button-next.swiper-button-disabled {
    opacity: 0.35;
  }