/* START_SECTION:ro-cart-drawer (INDEX:104) */
ro-cart-drawer[data-open='true'] .ro-cart-drawer{opacity:1;pointer-events:auto}ro-cart-drawer[data-open='true'] .ro-cart-drawer .drawer-content{transform:translateY(0);opacity:1}ro-cart-drawer .ro-cart-drawer{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:var(--ro-zindex-drawer);opacity:0;pointer-events:none;transition:opacity 0.3s ease-in-out;display:flex;justify-content:flex-end;padding:16px}@media (max-width: 576px){ro-cart-drawer .ro-cart-drawer{padding:0}}ro-cart-drawer .ro-cart-drawer .drawer-content{width:100%;max-width:648px;height:100%;background-color:#f5f6f7;border-radius:10px;transform:translateX(100%);opacity:0;transition:all 0.3s ease;display:flex;flex-direction:column;overflow:hidden;position:relative}@media (max-width: 576px){ro-cart-drawer .ro-cart-drawer .drawer-content{border-radius:0}}ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 30px;background-color:var(--ro-white-color)}@media (max-width: 576px){ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-header{padding:4px 16px 20px 16px}}ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-header.header-empty{background-color:#f5f6f7}ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-header .header-title{font-size:20px;font-weight:600;line-height:1.5;color:var(--ro-black)}ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-header .header-close{height:24px;width:24px;cursor:pointer;flex-shrink:0;fill:var(--ro-black)}ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-body{flex:1;overflow-y:auto}ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-body .body-container{padding:0 30px 24px 30px;display:flex;flex-direction:column;gap:20px;background-color:var(--ro-white-color)}@media (max-width: 576px){ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-body .body-container{gap:16px;padding:0 16px 24px 16px}}ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-body .body-container.hidden{display:none}ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-body .body-container .body-tip-box{display:flex;align-items:center;gap:10px;padding:10px 16px;background-color:#f1f7fe;border-radius:6px}@media (max-width: 576px){ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-body .body-container .body-tip-box{border-radius:4px}}ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-body .body-container .body-tip-box .body-tip-img{width:24px;height:24px;flex-shrink:0;aspect-ratio:1/1}ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-body .body-container .body-tip-box .body-tip-text{font-size:14px;font-weight:600;line-height:1.5;color:var(--ro-theme-color)}ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-body .body-default-container.hidden{display:none}ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-body .body-other-container{padding:36px 0;display:flex;flex-direction:column;gap:36px}@media (max-width: 576px){ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-body .body-other-container{padding:24px 0;gap:24px}}ro-cart-drawer .ro-cart-drawer .drawer-content .drawer-footer{height:100px}
/* END_SECTION:ro-cart-drawer */
/* START_SNIPPET:dialog-subscribe (INDEX:193) */
.dialog-subscribe .hidden {
    display: none;
  }
  .dialog-subscribe .flex {
    display: flex;
  }

  .dialog-subscribe__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: var(--ro-zindex-toast);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 48px;
  }

  .dialog-subscribe__container {
    padding: 16px 16px 48px 48px;
    background-color: white;
    border-radius: 10px;
    max-width: 546px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.08);
  }

  .dialog-subscribe__header {
    display: flex;
    gap: 24px;
    justify-content: flex-end;
  }

  .dialog-subscribe__close-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: #f5f5f5;
    border-radius: 50%;
  }

  .dialog-subscribe__close-icon svg {
    width: 12px;
    height: 12px;
  }

  .dialog-subscribe__content {
    margin-top: 16px;
    padding-right: 32px;
  }

  .dialog-subscribe__title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 33px;
    color: var(--ro-text-color);
  }

  .dialog-subscribe__checkbox-wrapper {
    margin-bottom: 20px;
    display: flex;
    padding-top: 16px;
    font-size: 14px;
  }

  .dialog-subscribe__checkbox-label {
    display: flex;
  }

  .dialog-subscribe__checkbox {
    flex-shrink: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    margin: 2px 8px 0 0;
    padding: 0 !important;
  }

  .dialog-subscribe__checkbox:checked {
    background-color: var(--ro-theme-color) !important;
    border-color: var(--ro-theme-color) !important;
  }

  .dialog-subscribe__checkbox:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: contain;
    transform: translate(-50%, -50%);
  }

  .dialog-subscribe__button {
    width: 100%;
    height: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ro-theme-color);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border-radius: 99px;
    padding: 11px 0;
  }

  .dialog-subscribe__loading-icon {
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .loading-button-text.flex {
    display: flex;
  }

  .rotate_icon {
    animation: rotate 1s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @media (max-width: 576px) {
    .dialog-subscribe__overlay {
      padding: 0 16px;
    }

    .dialog-subscribe__container {
      padding-left: 16px;
      padding-bottom: 16px;
      max-width: 352px;
      border-radius: 6px;
    }

    .dialog-subscribe__content {
      padding-right: 0;
    }

    .dialog-subscribe__title {
      font-size: 14px;
    }

    .dialog-subscribe__button {
      margin-top: 16px;
      font-size: 16px;
    }
  }
/* END_SNIPPET:dialog-subscribe */
/* START_SNIPPET:global-button (INDEX:220) */
.global-button__button:disabled {
    background-color: var(--global-button-disabled-bg-color);
    border-color: var(--global-button-disabled-border-color);
    color: #b8b8b8;
    pointer-events: none;
  }
  .global-button__button {
    --pseudo-transform-y: 100%;
    border: 1px solid var(--global-button-default-border-color);
    padding: var(--global-button-desktop-padding);
    border-radius: var(--global-button-default-border-radius);
    outline: none;
    background-color: var(--global-button-default-bg-color);
    cursor: pointer;
    transition: all var(--global-button-hover-transition-time, 0.6s) ease;
    line-height: 1.5;
    font-weight: 600;
    font-size: var(--global-button-font-size);
    color: var(--global-button-default-text-color);
    text-align: center;
    border-radius: var(--global-button-default-border-radius);
    overflow: hidden;
    position: relative;
    width: var(--global-button-width);
  }
  .global-button__button-text {
    position: relative;
    z-index: 1;
  }
  .global-button__button[data-loading='true'] .global-button__button-text {
    opacity: 0;
  }
  .global-button__button[data-loading='true'] .global-button__button-loading {
    opacity: 1;
  }
  .global-button__button[data-loading='true']:hover .global-button__button-loading-item {
    background-color: var(--global-button-hover-text-color);
  }
  .global-button__button-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    z-index: 1;
  }
  .global-button__button-loading-item {
    width: 6px;
    height: 6px;
    background-color: var(--global-button-default-text-color);
    border-radius: 50%;
    animation: wave 1.2s ease-in-out infinite;
  }

  .global-button__button-loading-item:nth-child(1) {
    animation-delay: 0s;
  }

  .global-button__button-loading-item:nth-child(2) {
    animation-delay: 0.2s;
  }

  .global-button__button-loading-item:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes wave {
    0%,
    60%,
    100% {
      transform: translateY(0px);
    }
    30% {
      transform: translateY(-6px);
    }
  }
  .global-button__button:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 200%;
    border-radius: 50%;
    background-color: var(--global-button-hover-bg-color);
    z-index: var(--pseudo-z-index, 1);
    transition: var(--pseudo-transition, all var(--global-button-hover-transition-time, 0.6s) ease);
    /*
       * 伪元素动画控制变量：
       * --pseudo-transform-y: 控制伪元素的垂直位置
       * 100%: 伪元素在按钮下方
       * -25%: 伪元素居中 (200%高度时的居中值)
       * -100%: 伪元素在按钮上方
       */
    transform: translate(-16.67%, var(--pseudo-transform-y, 100%));
    overflow: hidden;
  }
  .global-button__button:hover {
    color: var(--global-button-hover-text-color);
    border-color: var(--global-button-hover-border-color);
  }
  .global-button__button:hover:before {
    transform: translate(-16.67%, var(--pseudo-transform-y, -25%));
  }
  /* 1200px以下禁用hover效果 */
  @media (max-width: 1200px) {
    .global-button__button:hover {
      color: var(--global-button-default-text-color);
      border-color: var(--global-button-default-border-color);
    }

    .global-button__button:hover:before {
      transform: translate(-16.67%, var(--pseudo-transform-y, 100%));
    }

    .global-button__button[data-loading='true']:hover .global-button__button-loading-item {
      background-color: var(--global-button-default-text-color);
    }
  }
  @media (max-width: 576px) {
    .global-button__button {
      font-size: var(--global-button-mobile-font-size);
      padding: var(--global-button-mobile-padding);
    }
  }
/* END_SNIPPET:global-button */
/* START_SNIPPET:global-stock-notify-modal (INDEX:226) */
.global-stock-notify-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 500;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
  }
  .global-stock-notify-modal__content {
    width: 100%;
    max-width: 546px;
    background-color: var(--ro-white-color);
    padding: 64px 48px 48px 48px;
    border-radius: 10px;
    box-shadow: 0 0 13px 0 #00000014;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease;
  }
  global-stock-notify-modal[data-is-open='true'] .global-stock-notify-modal {
    opacity: 1;
    pointer-events: auto;
  }
  global-stock-notify-modal[data-is-open='true'] .global-stock-notify-modal__content {
    transform: translateY(0);
    opacity: 1;
  }

  .global-stock-notify-modal__content_title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ro-black);
  }
  .global-stock-notify-modal__content_main {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .global-stock-notify-modal__content_input {
    width: 100%;
    height: 46px;
    border: 1px solid #d8d8d9;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.5;
    padding: 11px 12px;
    outline: none;
    color: var(--ro-black);
  }
  .global-stock-notify-modal__content_input_error {
    color: #fc2323;
    font-size: 14px;
    line-height: 1.5;
    display: none;
    margin-top: 8px;
  }
  .global-stock-notify-modal__content_checkbox_wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .global-stock-notify-modal__content_checkbox_text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ro-black);
  }
  .global-stock-notify-modal__content_checkbox {
    width: 16px;
    height: 16px;
    border: 1px solid #d8d8d9;
    background-color: #fff;
    position: relative;
    cursor: pointer;
  }
  /* 选中的勾号 */
  .global-stock-notify-modal__content_checkbox::after {
    content: '';
    width: 5px;
    height: 9px;
    border-right: 2px solid var(--ro-white-color);
    border-bottom: 2px solid var(--ro-white-color);
    transform: rotate(45deg);
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0;
  }

  global-stock-notify-modal[data-checkbox='true'] .global-stock-notify-modal__content_checkbox {
    background-color: var(--ro-theme-color);
  }
  global-stock-notify-modal[data-checkbox='true'] .global-stock-notify-modal__content_checkbox::after {
    opacity: 1;
  }
  .global-stock-notify-modal__content_button {
    width: 100%;
    height: 46px;
    background-color: var(--ro-theme-color);
    border-radius: 99px;
    color: var(--ro-white-color);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .global-stock-notify-modal__content_button[data-loading='true'] .global-stock-notify-modal__content_button_text {
    opacity: 0;
  }
  .global-stock-notify-modal__content_button[data-loading='true'] .global-stock-notify-modal__content_button_loading {
    opacity: 1;
  }
  @media (hover: hover) {
    .global-stock-notify-modal__content_button:hover {
      opacity: 0.8;
    }
  }
  .global-stock-notify-modal__content_button_text {
    position: relative;
    z-index: 1;
  }

  .global-stock-notify-modal__content_button_loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    z-index: 1;
  }
  .global-stock-notify-modal__content_button_loading_item {
    width: 6px;
    height: 6px;
    background-color: var(--ro-white-color);
    border-radius: 50%;
    animation: wave 1.2s ease-in-out infinite;
  }

  .global-stock-notify-modal__content_button_loading_item:nth-child(1) {
    animation-delay: 0s;
  }

  .global-stock-notify-modal__content_button_loading_item:nth-child(2) {
    animation-delay: 0.2s;
  }

  .global-stock-notify-modal__content_button_loading_item:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes wave {
    0%,
    60%,
    100% {
      transform: translateY(0px);
    }
    30% {
      transform: translateY(-6px);
    }
  }
  .global-stock-notify-modal__content_close_btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .global-stock-notify-modal__content_close_btn svg {
    transition: transform 0.3s ease;
    cursor: pointer;
  }

  .global-stock-notify-modal__content_close_btn:hover svg {
    transform: rotate(180deg);
    transform-origin: center;
  }
  @media (max-width: 576px) {
    .global-stock-notify-modal__content {
      padding: 64px 16px 24px 16px;
    }
    .global-stock-notify-modal__content_title {
      font-size: 14px;
    }
  }
/* END_SNIPPET:global-stock-notify-modal */
/* START_SNIPPET:global-toast (INDEX:227) */
.global-toast {
    --toast-success-color: #f6ffed;
    --toast-success-border-color: #b7eb8f;
    --toast-warning-color: #fffbe6;
    --toast-warning-border-color: #ffe58f;
    --toast-error-color: #fff1f0;
    --toast-error-border-color: #ffccc7;
    --text-color: #161920;
    position: fixed;
    width: 100%;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    pointer-events: none;
  }

  .global-toast__template {
    display: none;
  }

  .global-toast__item {
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-radius: 4px;
    opacity: 0;
    transform: translateY(-15px);
    transition: all 0.25s ease;
    border: 1px solid transparent;
  }

  .global-toast__item.show {
    opacity: 1;
    transform: translateY(0);
  }

  .global-toast__item.hide {
    opacity: 0;
    transform: translateY(-15px);
  }

  .global-toast__icon {
    display: flex;
    align-items: center;
  }

  .global-toast__icon i {
    width: 18px;
    height: 18px;
  }

  .global-toast__icon i.hidden {
    display: none;
  }

  .global-toast__message {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--text-color);
  }
/* END_SNIPPET:global-toast */
/* START_SNIPPET:ro-drawer-brand-advantage (INDEX:365) */
.ro-drawer-brand-advantage {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 30px;
    @media (max-width: 576px) {
      padding: 0 16px;
    }
    &.hidden {
      display: none;
    }
    .ro-drawer-brand-advantage-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--ro-black);
      line-height: 1.5;
      @media (max-width: 576px) {
        font-size: 16px;
      }
    }
    .ro-drawer-brand-advantage-content {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 20px 24px;
      background-color: var(--ro-white-color);
      border-radius: 6px;
      @media (max-width: 576px) {
        padding: 16px 20px;
      }
      .ro-drawer-brand-advantage-content-item {
        display: flex;
        align-items: center;
        gap: 16px;
        .ro-drawer-brand-advantage-content-item-icon {
          width: 24px;
          height: 24px;
          flex-shrink: 0;
        }
        .ro-drawer-brand-advantage-content-item-title {
          font-size: 16px;
          font-weight: 400;
          color: var(--ro-black);
          line-height: 1.5;
          @media (max-width: 576px) {
            font-size: 14px;
          }
        }
      }
    }
  }
/* END_SNIPPET:ro-drawer-brand-advantage */
/* START_SNIPPET:ro-drawer-discount-code (INDEX:366) */
ro-drawer-discount-code {
    &[data-open='true'] .ro-drawer-discount-code {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .ro-drawer-discount-code {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: var(--ro-white-color);
      padding: 24px 30px 16px 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 330px;
      gap: 24px;
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
      transform: translateY(30px);
      z-index: 100;
      box-shadow: 0 -4px 14px 0 #0000000f;
      @media (max-width: 1200px) {
        min-height: 300px;
      }
      @media (max-width: 576px) {
        padding: 16px;
      }
      .ro-drawer-discount-code-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        .ro-drawer-discount-code-title {
          font-size: 16px;
          font-weight: 600;
          color: var(--ro-black);
          line-height: 1.5;
        }
        .ro-drawer-discount-code-input-box {
          display: flex;
          flex-direction: column;
          gap: 10px;
          .ro-drawer-discount-code-input {
            width: 100%;
            height: 54px;
            border-radius: 4px;
            border: 1px solid #d8d8d9;
            resize: none;
            padding: 10px;
            font-size: 16px;
            font-weight: 400;
            color: var(--ro-black);
            line-height: 1.5;
            outline: none;
            transition: all 0.2s ease;
            background-color: var(--ro-white-color);
            @media (max-width: 576px) {
              height: 44px;
            }
          }
          .ro-drawer-discount-code-input:focus {
            outline: none;
            border: 1px solid var(--ro-theme-color);
          }
          .ro-drawer-discount-code-input-box-desc {
            font-size: 14px;
            font-weight: 400;
            color: var(--ro-grey-800);
            line-height: 1.5;
          }
        }
      }
      .ro-drawer-discount-code-footer {
        display: flex;
        width: 100%;
        gap: 16px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .ro-drawer-discount-code-footer-save {
          width: 100%;
        }
        .ro-drawer-discount-code-footer-cancel {
          font-size: 16px;
          font-weight: 600;
          text-align: center;
          line-height: 1.5;
          color: var(--ro-theme-color);
          cursor: pointer;
          transition: all 0.2s ease;
          @media (max-width: 576px) {
            font-size: 14px;
          }
          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
  }
/* END_SNIPPET:ro-drawer-discount-code */
/* START_SNIPPET:ro-drawer-empty (INDEX:367) */
.ro-drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    height: 390px;
    width: 100%;
    @media (max-width: 576px) {
      gap: 20px;
      height: 263px;
    }
    .ro-drawer-empty-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .ro-drawer-empty-icon-img {
        width: 54px;
        height: 54px;
        fill: var(--ro-black);
        flex-shrink: 0;
        @media (max-width: 576px) {
          width: 48px;
          height: 48px;
        }
      }
      .ro-drawer-empty-icon-count {
        position: absolute;
        top: 0;
        right: 0;
        background-color: var(--ro-theme-color);
        color: var(--ro-white-color);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
        pointer-events: none;
      }
    }
    .ro-drawer-empty-text {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--ro-black);
    }
  }
/* END_SNIPPET:ro-drawer-empty */
/* START_SNIPPET:ro-drawer-footer (INDEX:368) */
.ro-drawer-footer {
    width: 100%;
    background-color: var(--ro-white-color);
    padding: 18px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 -1px 0 0 #00000026;
    position: relative;
    z-index: 1;
    @media (max-width: 576px) {
      padding: 20px 16px 16px 16px;
      gap: 16px;
    }
    &.hidden {
      display: none;
    }
    .ro-drawer-footer-note {
      display: flex;
      align-items: center;
      gap: 16px;
      @media (max-width: 576px) {
        gap: 10px;
      }
      .ro-drawer-footer-note-item {
        display: flex;
        align-items: center;
        gap: 4px;
        border-radius: 99px;
        background-color: #f3f3f4;
        padding: 6px 16px;
        cursor: pointer;
        .ro-drawer-footer-note-item-text {
          font-size: 14px;
          font-weight: 400;
          color: var(--ro-black);
          line-height: 1.5;
          @media (max-width: 576px) {
            font-size: 12px;
          }
        }
        .ro-drawer-footer-note-item-icon {
          width: 16px;
          height: 16px;
          fill: var(--ro-black);
          flex-shrink: 0;
        }
      }
    }
    .ro-drawer-footer-info {
      display: flex;
      flex-direction: column;
      gap: 16px;
      @media (max-width: 576px) {
        gap: 12px;
      }
      .ro-drawer-footer-info-content {
        display: flex;
        flex-direction: column;
        gap: 6px;
        @media (max-width: 576px) {
          gap: 4px;
        }
        .ro-drawer-footer-info-countdown {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          font-size: 16px;
          color: var(--ro-red-color);
          font-weight: 400;
          line-height: 1.5;
          @media (max-width: 576px) {
            font-size: 14px;
          }
          .ro-drawer-footer-info-countdown-time {
            font-weight: 600;
          }
        }
        .ro-drawer-footer-info-total {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 8px 24px;
          @media (max-width: 576px) {
            gap: 6px;
          }
          .ro-drawer-footer-info-total-price {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-right: auto;
            @media (max-width: 576px) {
              gap: 4px;
            }
            .ro-drawer-footer-info-total-price-new {
              font-size: 24px;
              font-weight: 600;
              color: var(--ro-black);
              line-height: 1.5;
              display: flex;
              align-items: center;
              gap: 10px;
              @media (max-width: 576px) {
                gap: 4px;
                font-size: 20px;
              }
            }
            .ro-drawer-footer-info-total-price-old {
              font-size: 14px;
              font-weight: 400;
              color: var(--ro-grey-800);
              line-height: 1.5;
              text-decoration: line-through;
              @media (max-width: 576px) {
                font-size: 12px;
              }
            }
          }
          .ro-drawer-footer-info-total-discount {
            border-radius: 99px;
            background-color: var(--ro-red-color);
            padding: 2px 16px;
            font-size: 14px;
            font-weight: 400;
            color: var(--ro-white-color);
            line-height: 1.5;
            @media (max-width: 576px) {
              font-size: 12px;
            }
          }
        }
      }
      .ro-drawer-footer-info-shipping {
        display: flex;
        align-items: center;
        gap: 10px;
        @media (max-width: 576px) {
          gap: 8px;
        }
        .ro-drawer-footer-info-shipping-icon {
          width: 24px;
          height: 24px;
          flex-shrink: 0;
          fill: #2c3140;
          @media (max-width: 576px) {
            width: 20px;
            height: 20px;
          }
        }
        .ro-drawer-footer-info-shipping-text {
          font-size: 14px;
          color: #2c3140;
          line-height: 1.5;
          font-weight: 400;
          @media (max-width: 576px) {
            font-size: 12px;
          }
          .ro-drawer-footer-info-shipping-text-time {
            font-weight: 600;
          }
        }
      }
    }
    .ro-drawer-footer-handle {
      display: flex;
      flex-direction: column;
      gap: 16px;
      @media (max-width: 576px) {
        gap: 10px;
      }
    }
  }
/* END_SNIPPET:ro-drawer-footer */
/* START_SNIPPET:ro-drawer-note (INDEX:369) */
ro-drawer-note {
    &[data-open='true'] .ro-drawer-note {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .ro-drawer-note {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: var(--ro-white-color);
      padding: 24px 30px 16px 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 330px;
      gap: 24px;
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
      transform: translateY(30px);
      z-index: 100;
      box-shadow: 0 -4px 14px 0 #0000000f;
      @media (max-width: 1200px) {
        min-height: 300px;
      }
      @media (max-width: 576px) {
        padding: 16px;
      }
      .ro-drawer-note-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        .ro-drawer-note-title {
          font-size: 16px;
          font-weight: 600;
          color: var(--ro-black);
          line-height: 1.5;
        }
        .ro-drawer-note-input {
          width: 100%;
          height: 113px;
          border-radius: 4px;
          border: 1px solid #d8d8d9;
          resize: none;
          padding: 10px;
          font-size: 16px;
          font-weight: 400;
          color: var(--ro-black);
          line-height: 1.5;
          outline: none;
          transition: all 0.2s ease;
          background-color: var(--ro-white-color);
          @media (max-width: 576px) {
            height: 104px;
          }
        }
        .ro-drawer-note-input:focus {
          outline: none;
          border: 1px solid var(--ro-theme-color);
        }
      }
      .ro-drawer-note-footer {
        display: flex;
        width: 100%;
        gap: 16px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .ro-drawer-note-footer-save {
          width: 100%;
        }
        .ro-drawer-note-footer-cancel {
          font-size: 16px;
          font-weight: 600;
          text-align: center;
          line-height: 1.5;
          color: var(--ro-theme-color);
          cursor: pointer;
          transition: all 0.2s ease;
          @media (max-width: 576px) {
            font-size: 14px;
          }
          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
  }
/* END_SNIPPET:ro-drawer-note */
/* START_SNIPPET:ro-drawer-product-list (INDEX:370) */
ro-drawer-product-list {
    .ro-drawer-product-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      @media (max-width: 576px) {
        gap: 16px;
      }
      .ro-drawer-product-item {
        display: flex;
        gap: 24px;
        @media (max-width: 576px) {
          gap: 16px;
        }
        .ro-drawer-product-item-img {
          width: 78px;
          height: 78px;
          flex-shrink: 0;
          aspect-ratio: 1/1;
          @media (max-width: 576px) {
            width: 76px;
            height: 76px;
          }
        }
        .ro-drawer-product-item-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 16px;
          padding-top: 14px;
          @media (max-width: 576px) {
            padding-top: 10px;
          }
        }
        .ro-drawer-product-item-info-top {
          display: flex;
          justify-content: space-between;
          gap: 24px;
          @media (max-width: 576px) {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
          }
          .ro-drawer-product-item-info-top-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
            @media (max-width: 576px) {
              gap: 4px;
            }
            .ro-drawer-product-item-info-top-left-title {
              font-size: 16px;
              font-weight: 600;
              line-height: 1.5;
              color: var(--ro-black);
              @media (max-width: 576px) {
                font-size: 14px;
              }
            }
            .ro-drawer-product-item-info-top-left-variant {
              font-size: 14px;
              font-weight: 400;
              line-height: 1.5;
              color: var(--ro-grey-800);
            }
            .ro-drawer-product-item-info-top-left-code-box {
              display: flex;
              flex-wrap: wrap;
              gap: 0 16px;
              @media (max-width: 576px) {
                display: none;
              }
              .ro-drawer-product-item-info-top-left-code {
                display: flex;
                align-items: center;
                gap: 6px;
                .ro-drawer-product-item-info-top-left-code-icon {
                  width: 16px;
                  height: 16px;
                  flex-shrink: 0;
                  fill: var(--ro-theme-color);
                }
                .ro-drawer-product-item-info-top-left-code-text {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 1.5;
                  color: var(--ro-theme-color);
                  @media (max-width: 576px) {
                    font-size: 12px;
                  }
                }
              }
            }
          }
          .ro-drawer-product-item-info-top-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
            flex-shrink: 0;
            width: 180px;
            @media (max-width: 576px) {
              width: 100%;
              align-items: flex-start;
              gap: 4px;
            }
            .ro-drawer-product-item-info-top-right-price {
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              gap: 6px;
              @media (max-width: 576px) {
                align-items: center;
                flex-direction: row;
                flex-wrap: wrap;
              }
              .ro-drawer-product-item-info-top-right-price-new {
                font-size: 16px;
                font-weight: 600;
                line-height: 1.5;
                color: var(--ro-black);
                @media (max-width: 576px) {
                  font-size: 14px;
                }
              }
              .ro-drawer-product-item-info-top-right-price-old {
                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
                color: var(--ro-grey-800);
                text-decoration: line-through;
              }
            }
            .ro-drawer-product-item-info-top-right-price-discount {
              border-radius: 99px;
              padding: 2px 16px;
              font-size: 14px;
              font-weight: 400;
              line-height: 1.5;
              color: var(--ro-white-color);
              background-color: var(--ro-red-color);
              @media (max-width: 576px) {
                font-size: 12px;
              }
            }
          }
        }
        .ro-drawer-product-item-info-mobile-code-box {
          display: none;
          flex-wrap: wrap;
          gap: 0 16px;
          @media (max-width: 576px) {
            display: flex;
          }
          .ro-drawer-product-item-info-mobile-code {
            display: flex;
            align-items: center;
            gap: 6px;
            .ro-drawer-product-item-info-mobile-code-icon {
              width: 16px;
              height: 16px;
              flex-shrink: 0;
              fill: var(--ro-theme-color);
            }
            .ro-drawer-product-item-info-mobile-code-text {
              font-size: 14px;
              font-weight: 400;
              line-height: 1.5;
              color: var(--ro-theme-color);
              @media (max-width: 576px) {
                font-size: 12px;
              }
            }
          }
        }
        .ro-drawer-product-item-info-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 24px;
          .ro-drawer-product-item-info-bottom-quantity {
            display: flex;
            align-items: center;
            border: 1px solid #e8e8e9;
            border-radius: 4px;
            width: 120px;
            height: 32px;
            overflow: hidden;
            .ro-drawer-product-item-info-bottom-quantity-btn {
              background-color: #f5f6f7;
              border: none;
              width: 32px;
              height: 100%;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: background-color 0.2s ease;
              flex-shrink: 0;
            }
            .ro-drawer-product-item-info-bottom-quantity-icon {
              width: 14px;
              height: 14px;
              color: var(--ro-black);
              flex-shrink: 0;
            }
            .ro-drawer-product-item-info-bottom-quantity-icon path {
              fill: var(--ro-black);
            }
            .ro-drawer-product-item-info-bottom-quantity-input {
              border: none;
              width: 100%;
              height: 100%;
              padding: 0 12px;
              text-align: center;
              font-size: 14px;
              font-weight: 400;
              color: var(--ro-black);
              background-color: white;
              outline: none;
            }
            .ro-drawer-product-item-info-bottom-quantity-input:focus {
              outline: none;
            }
          }

          .ro-drawer-product-item-info-bottom-delete-box {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            .ro-drawer-product-item-info-bottom-delete {
              width: 24px;
              height: 24px;
              flex-shrink: 0;
              fill: var(--ro-black);
              cursor: pointer;
              transition: fill 0.3s ease;
              &:hover {
                fill: var(--ro-red-color);
              }
            }

            .loading-box {
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 4px;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
              pointer-events: none;
              z-index: 1;
            }
            .loading-box-line {
              width: 4px;
              height: 4px;
              background-color: var(--ro-black);
              border-radius: 50%;
              animation: wave 1.2s ease-in-out infinite;
            }
            .loading-box-line:nth-child(1) {
              animation-delay: 0s;
            }

            .loading-box-line:nth-child(2) {
              animation-delay: 0.2s;
            }

            .loading-box-line:nth-child(3) {
              animation-delay: 0.4s;
            }

            @keyframes wave {
              0%,
              60%,
              100% {
                transform: translateY(0px);
              }
              30% {
                transform: translateY(-6px);
              }
            }
          }
        }
      }
      .ro-drawer-product-item[data-loading='true'] {
        .ro-drawer-product-item-info-bottom {
          pointer-events: none;
          .ro-drawer-product-item-info-bottom-delete-box {
            .ro-drawer-product-item-info-bottom-delete {
              opacity: 0;
            }
            .loading-box {
              opacity: 1;
            }
          }
        }
      }
    }
  }
/* END_SNIPPET:ro-drawer-product-list */
/* START_SNIPPET:ro-drawer-recommend-product (INDEX:371) */
.ro-drawer-recommend-product {
    display: flex;
    flex-direction: column;
    gap: 16px;
    .ro-drawer-recommend-product-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px;
      @media (max-width: 576px) {
        padding: 0 16px;
      }
      .ro-drawer-recommend-product-header-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--ro-black);
        @media (max-width: 576px) {
          font-size: 16px;
        }
      }
      .ro-drawer-recommend-product-header-handle {
        display: flex;
        gap: 6px;
        align-items: center;
        @media (max-width: 576px) {
          display: none;
        }
        .ro-drawer-recommend-product-header-handle-prev.swiper-button-disabled {
          opacity: 0.5;
          pointer-events: none;
        }
        .ro-drawer-recommend-product-header-handle-next.swiper-button-disabled {
          opacity: 0.5;
          pointer-events: none;
        }
      }
    }
    .ro-drawer-recommend-product-body-swiper {
      display: flex;
      padding: 0 30px;
      overflow: unset;
      overflow-x: clip;
      @media (max-width: 576px) {
        padding: 0 16px;
      }
      .ro-drawer-recommend-product-body-swiper-slide {
        width: 204px;
        height: auto;
        .ro-drawer-recommend-product-body-item {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          gap: 20px;
          padding: 0 16px 24px 16px;
          border-radius: 6px;
          background-color: var(--ro-white-color);
          .ro-drawer-recommend-product-body-item-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            .ro-drawer-recommend-product-body-item-info-image {
              width: 100px;
              height: 100px;
              object-fit: cover;
            }
            .ro-drawer-recommend-product-body-item-info-content {
              display: flex;
              flex-direction: column;
              gap: 6px;
              .ro-drawer-recommend-product-body-item-info-content-title {
                font-size: 14px;
                font-weight: 600;
                color: var(--ro-black);
                line-height: 1.5;
                text-align: center;
                /* 两行省略 */
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                word-break: break-all;
              }
              .ro-drawer-recommend-product-body-item-info-content-variant-select {
                position: relative;
              }

              .ro-drawer-recommend-product-body-item-info-content-variant-select-button {
                cursor: pointer;
                display: flex;
                gap: 16px;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
                color: #737373;
              }
              .ro-drawer-recommend-product-body-item-info-content-variant-select-button-text {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                word-break: break-all;
              }

              .ro-drawer-recommend-product-body-item-info-content-variant-select-button .chevron {
                width: 16px;
                height: 16px;
                transition: transform 0.2s ease;
                flex-shrink: 0;
              }

              .ro-drawer-recommend-product-body-item-info-content-variant-select-button .chevron.open {
                transform: rotate(180deg);
              }

              .ro-drawer-recommend-product-body-item-info-content-variant-dropdown {
                position: absolute;
                margin-top: 10px;
                padding-bottom: 30px;
                top: 100%;
                left: 0;
                right: 0;
                z-index: 99;
                display: none;
              }
              .ro-drawer-recommend-product-body-item-info-content-variant-dropdown-content {
                background: var(--ro-white-color);
                padding: 10px 6px 10px 10px;
                border-radius: 6px;
                box-shadow: 0 4px 16px 0 #11111a0d, 0 8px 32px 0 #11111a0d;
              }
              .ro-drawer-recommend-product-body-item-info-content-variant-dropdown-option-list {
                display: flex;
                flex-direction: column;
                max-height: 220px;
                gap: 10px;
                overflow-y: auto;
              }
              .ro-drawer-recommend-product-body-item-info-content-variant-dropdown-option-list::-webkit-scrollbar {
                width: 4px;
              }
              .ro-drawer-recommend-product-body-item-info-content-variant-dropdown-option-list::-webkit-scrollbar-thumb {
                background: #b6b6c0;
                border-radius: 112px;
              }
              .ro-drawer-recommend-product-body-item-info-content-variant-dropdown-option-list::-webkit-scrollbar-track {
                background: #f3f3f4;
                border-radius: 112px;
              }

              .ro-drawer-recommend-product-body-item-info-content-variant-dropdown.open {
                display: block;
              }

              .ro-drawer-recommend-product-body-item-info-content-variant-dropdown-option {
                cursor: pointer;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
                color: var(--ro-black);
                transition: color 0.2s ease;
                text-decoration: none;
                padding-right: 10px;
              }

              .ro-drawer-recommend-product-body-item-info-content-variant-dropdown-option:hover {
                color: #86bff3;
              }

              .ro-drawer-recommend-product-body-item-info-content-variant-dropdown-option.selected {
                color: var(--ro-theme-color);
                pointer-events: none;
              }
            }
            .ro-drawer-recommend-product-body-item-info-price {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-wrap: wrap;
              gap: 6px;
              .ro-drawer-recommend-product-body-item-info-price-new {
                font-size: 16px;
                font-weight: 400;
                color: var(--ro-black);
                line-height: 1.5;
              }
              .ro-drawer-recommend-product-body-item-info-price-old {
                font-size: 12px;
                font-weight: 400;
                color: #b6b6c0;
                line-height: 1.5;
                text-decoration: line-through;
              }
              .ro-drawer-recommend-product-body-item-info-price-old.hidden {
                display: none;
              }
            }
          }
        }
      }
    }
  }
/* END_SNIPPET:ro-drawer-recommend-product */