.productdetail-layout.layout-1 .section-infoproduct .infoproduct-listing {
  transform: translateY(-174px);
  display: flex;
  flex-direction: column;
  gap: 40px; }
  @media screen and (min-width: 768px) {
    .productdetail-layout.layout-1 .section-infoproduct .infoproduct-listing {
      transform: translateY(-212px); } }
  @media screen and (min-width: 1024px) {
    .productdetail-layout.layout-1 .section-infoproduct .infoproduct-listing {
      transform: translateY(-242px);
      gap: 70px; } }
  @media screen and (min-width: 1280px) {
    .productdetail-layout.layout-1 .section-infoproduct .infoproduct-listing {
      transform: translateY(-284px); } }

.productdetail-layout.layout-1 .section-infoproduct .product-brief .bubbles {
  position: absolute;
  top: -12%;
  left: -21%; }
  .productdetail-layout.layout-1 .section-infoproduct .product-brief .bubbles .bubble-wrapper {
    position: relative;
    color: var(--color-bubble); }
    .productdetail-layout.layout-1 .section-infoproduct .product-brief .bubbles .bubble-wrapper .bubble {
      position: absolute;
      top: 0;
      left: 0; }
    .productdetail-layout.layout-1 .section-infoproduct .product-brief .bubbles .bubble-wrapper > img {
      position: relative;
      top: 62px;
      left: 62px;
      width: auto; }
    .productdetail-layout.layout-1 .section-infoproduct .product-brief .bubbles .bubble-wrapper.large .bubble {
      width: 216px;
      height: 216px;
      animation: bubbling linear 2s infinite; }
    .productdetail-layout.layout-1 .section-infoproduct .product-brief .bubbles .bubble-wrapper.large > img {
      height: 71px;
      animation: bubbling linear 2s infinite; }
    .productdetail-layout.layout-1 .section-infoproduct .product-brief .bubbles .bubble-wrapper.small {
      top: 90px;
      left: 30px; }
      .productdetail-layout.layout-1 .section-infoproduct .product-brief .bubbles .bubble-wrapper.small .bubble {
        animation: bubbling linear 2s infinite .5s;
        width: 190px;
        height: 190px; }
      .productdetail-layout.layout-1 .section-infoproduct .product-brief .bubbles .bubble-wrapper.small > img {
        height: 38px;
        animation: bubbling linear 2s infinite .5s; }

.productdetail-layout.layout-1 .section-infoproduct .product-explanation {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 20px; }
  .productdetail-layout.layout-1 .section-infoproduct .product-explanation .box-table {
    display: flex;
    flex-direction: column;
    gap: 30px; }
    .productdetail-layout.layout-1 .section-infoproduct .product-explanation .box-table > div {
      width: 100%; }
  .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation {
    position: relative;
    margin: 0 auto 200px;
    width: 100%; }
    .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .main-img {
      position: relative;
      padding-bottom: 100%;
      overflow: hidden; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .main-img img.milkdrop {
        position: absolute;
        top: 0;
        left: 7%;
        width: 47.5%;
        bottom: 7%;
        right: 0;
        margin: auto;
        z-index: 3; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .main-img img.circle {
        height: 100%;
        width: 100%;
        position: absolute;
        right: 0%;
        top: 0%;
        left: 0;
        bottom: 0;
        animation: spin 25s infinite linear; }
    .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .sub-img {
      width: 160px;
      position: absolute;
      text-align: center; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .sub-img > img {
        width: 60%;
        top: -10px;
        position: relative;
        animation: bubbling linear 2s infinite;
        z-index: 3; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .sub-img > span {
        display: block;
        font-size: 12px; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .sub-img.bottom-left {
        bottom: 0;
        left: -8%; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .sub-img.bottom-middle {
        bottom: -150px;
        left: 0;
        right: 0;
        margin: auto; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .sub-img.bottom-right {
        bottom: 2%;
        right: -8%; }
  .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details {
    display: flex;
    flex-direction: column;
    gap: 50px; }
    .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-label > label {
      display: inline-block;
      margin: 0 0 18px;
      padding: 5px 15px;
      border-radius: 50px;
      background-color: var(--color-main-temp);
      color: var(--gipps-navy);
      font-size: 16px; }
    .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-label h3 {
      color: var(--gipps-navy);
      font-weight: 500;
      font-size: 22px;
      margin: 0; }
    .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover {
      position: relative;
      margin: 50px auto 100px;
      width: 60%; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients img.upper-top-left {
          position: absolute;
          animation: moving-and-bubbling linear 4s infinite;
          width: 100px;
          left: -30%;
          top: -20%; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients > div {
          width: 200px;
          position: absolute;
          text-align: center; }
          .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients > div > img {
            width: 80px;
            top: -10px;
            position: relative;
            animation: bubbling linear 2s infinite; }
          .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients > div > strong {
            display: block;
            color: var(--gipps-navy);
            margin-bottom: 10px;
            text-transform: uppercase;
            font-family: var(--skin-text-font-2);
            font-weight: 500;
            font-size: 12px; }
          .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients > div > span {
            display: block;
            font-size: 10px; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .top-left {
          top: -77px;
          left: -40%; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .bottom-left {
          bottom: -60px;
          left: -40%; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .top-right {
          top: -77px;
          right: -40%; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .bottom-right {
          bottom: -60px;
          right: -40%; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .main-img-ingredients {
        position: relative;
        padding-bottom: 100%;
        overflow: hidden; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .main-img-ingredients img {
          position: absolute;
          top: 0;
          left: 0%;
          width: 100%;
          bottom: 0%;
          right: 0; }
  @media (min-width: 768px) {
    .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation {
      width: 62%; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .sub-img {
        width: 200px; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .sub-img > img {
          width: 60%; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .sub-img.bottom-left {
          bottom: 0;
          left: -150px; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .sub-img.bottom-middle {
          bottom: -150px;
          left: 0;
          right: 0;
          margin: auto; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .sub-img.bottom-right {
          bottom: 0;
          right: -150px; }
    .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients {
      margin: 0 auto; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients img.upper-top-left {
        width: 180px;
        top: -100px; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients > div {
        width: 260px; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients > div > img {
          width: 100px; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients > div > strong {
          font-size: 18px; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients > div > span {
          font-size: 14px; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .top-left {
        top: -90px;
        left: -40%; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .bottom-left {
        bottom: 20px;
        left: -40%; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .top-right {
        top: -90px;
        right: -40%; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .bottom-right {
        bottom: 20px;
        right: -40%; } }
  @media (min-width: 1024px) {
    .productdetail-layout.layout-1 .section-infoproduct .product-explanation {
      gap: 40px; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation {
        width: 46%; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .sub-img {
          width: 250px; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation .sub-img > span {
          font-size: 16px; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-label > label {
        padding: 5px 15px;
        font-size: 18px; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-label h3 {
        font-size: 26px; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover {
        width: 46%;
        transform: scale(0.8);
        margin: 60px auto; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients img.upper-top-left {
          top: -110px;
          left: -200px; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients > div {
          width: 330px; }
          .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients > div > img {
            width: 140px; }
          .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients > div > strong {
            font-size: 22px; }
          .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients > div > span {
            font-size: 16px; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .top-left {
          top: -30px;
          left: -300px; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .bottom-left {
          bottom: -40px;
          left: -300px; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .top-right {
          top: -30px;
          right: -300px;
          width: 330px; }
        .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .bottom-right {
          bottom: -40px;
          right: -300px; } }
  @media (min-width: 1280px) {
    .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-label h3 {
      font-size: 32px; }
    .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover {
      transform: scale(1); }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients img.upper-top-left {
        top: -60px;
        left: -160px; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .top-left {
        top: -15%;
        left: -300px; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .bottom-left {
        bottom: 0%;
        left: -300px; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .top-right {
        top: -15%;
        right: -300px; }
      .productdetail-layout.layout-1 .section-infoproduct .product-explanation .explanation-details .explanation-details-cover .animated-ingredients .bottom-right {
        bottom: 0%;
        right: -300px; } }

.productdetail-layout.layout-1 .section-infoproduct .product-detail {
  background: var(--bg-gradient-temp); }

.productdetail-layout.layout-1 .section-collection {
  margin-top: -120px;
  z-index: 4;
  position: relative; }
  .productdetail-layout.layout-1 .section-collection .s-content {
    --color-btn-swiper: #ffffff;
    --bg-btn-swiper: #0151A3;
    width: 250px;
    margin: 0 auto; }
    .productdetail-layout.layout-1 .section-collection .s-content .swiper:not(.swiper-initialized) .swiper-wrapper {
      display: -ms-flex;
      display: -webkit-flex;
      display: flex;
      column-gap: 15px;
      justify-content: center; }
    .productdetail-layout.layout-1 .section-collection .s-content .swiper:not(.swiper-initialized) .swiper-slide {
      -webkit-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%; }
    .productdetail-layout.layout-1 .section-collection .s-content .swiper .swiper-slide .slide .slide-cover {
      padding-bottom: 100%;
      position: relative;
      overflow: hidden;
      display: block; }
    .productdetail-layout.layout-1 .section-collection .s-content .swiper .swiper-slide .slide .slide-cover img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .productdetail-layout.layout-1 .section-collection .s-content .swiper .swiper-slide .slide .slide-cover.loop-0 a {
      cursor: default;
      pointer-events: none; }
    .productdetail-layout.layout-1 .section-collection .s-content .swiper-button-prev {
      left: -4%;
      transform: none; }
    .productdetail-layout.layout-1 .section-collection .s-content .swiper-button-next {
      right: -4%;
      transform: none; }
  @media (min-width: 768px) {
    .productdetail-layout.layout-1 .section-collection {
      margin-top: -180px; }
      .productdetail-layout.layout-1 .section-collection .s-content {
        width: 720px; }
        .productdetail-layout.layout-1 .section-collection .s-content .swiper:not(.swiper-initialized) .swiper-slide {
          -webkit-flex: 0 0 calc((100% - (15px*2)) / 3);
          flex: 0 0 calc((100% - (15px*2)) / 3);
          max-width: calc((100% - (15px*2)) / 3); }
        .productdetail-layout.layout-1 .section-collection .s-content .swiper-button-prev {
          left: 31%;
          transform: none; }
        .productdetail-layout.layout-1 .section-collection .s-content .swiper-button-next {
          right: 31%;
          transform: none; } }
  @media (min-width: 1024px) {
    .productdetail-layout.layout-1 .section-collection {
      margin-top: -260px; }
      .productdetail-layout.layout-1 .section-collection .s-content {
        width: 900px; }
        .productdetail-layout.layout-1 .section-collection .s-content .swiper-button-prev {
          left: 31%;
          transform: none; }
        .productdetail-layout.layout-1 .section-collection .s-content .swiper-button-next {
          right: 31%;
          transform: none; } }
  @media (min-width: 1280px) {
    .productdetail-layout.layout-1 .section-collection {
      margin-top: -400px; }
      .productdetail-layout.layout-1 .section-collection .s-content {
        width: 1200px; } }
  @media (min-width: 1440px) {
    .productdetail-layout.layout-1 .section-collection {
      margin-top: -400px; }
      .productdetail-layout.layout-1 .section-collection .s-content {
        width: 1400px; } }

.productdetail-layout.layout-1.temp-default {
  --color-main-temp: var(--gipps-coral);
  --bg-gradient-temp: linear-gradient(#feeddf 80%, #fff);
  --bg-image-temp: url(https://cdn.hstatic.net/files/200001149561/file/coral-rsgopmq7.png);
  --color-bubble: #FFA598; }

.productdetail-layout.layout-1.temp-coral {
  --color-main-temp: var(--gipps-coral);
  --bg-gradient-temp: linear-gradient(#feeddf 80%, #fff);
  --bg-image-temp: url(https://cdn.hstatic.net/files/200001149561/file/coral-rsgopmq7.png);
  --color-bubble: #FFA598; }

.productdetail-layout.layout-1.temp-green {
  --color-main-temp: var(--gipps-light-green);
  --bg-gradient-temp: linear-gradient(#eef4d7 80%, #fff);
  --bg-image-temp: url(https://cdn.hstatic.net/files/200001149561/file/green-5lj7o642.png);
  --color-bubble: #81BE6B; }

.productdetail-layout.layout-1.temp-yellow {
  --color-main-temp: var(--gipps-yellow);
  --bg-gradient-temp: linear-gradient(#faf7cb 80%, #fff);
  --bg-image-temp: url(https://cdn.hstatic.net/files/200001149561/file/yellow-6fcxhrlk.png);
  --color-bubble: #E1CD50; }