.popChosen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none; }
  .popChosen .popChosen-overplay {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(0, 0, 0, 0.75); }
  .popChosen .popChosen-image {
    position: absolute;
    top: 50%;
    left: 15%;
    width: 440px;
    transform: translateY(-50%);
    z-index: 2; }
    @media (max-width: 767px) {
      .popChosen .popChosen-image {
        display: none; } }
    .popChosen .popChosen-image .popChosen-image-wrap {
      background: #FFF;
      border-radius: 10px;
      overflow: hidden;
      width: fit-content;
      margin: 0 auto; }
      .popChosen .popChosen-image .popChosen-image-wrap img {
        max-width: 440px;
        margin: 0 auto; }
  .popChosen .popChosen-box {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 40%;
    z-index: 2; }
    @media (max-width: 767px) {
      .popChosen .popChosen-box {
        width: 100%; } }
    .popChosen .popChosen-box .popChosen-box-wrap {
      height: 100%;
      background: #FFF;
      border-radius: 10px 0 0 10px;
      padding: 24px;
      padding-right: 0;
      z-index: 2;
      transition: all .5s; }
      .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        height: 30px;
        padding-right: 24px; }
        .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-head h2 {
          color: #222;
          font-size: 18px;
          font-weight: 700;
          line-height: 24px;
          margin: 0; }
        .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-head button {
          background: transparent;
          border: none;
          outline: none; }
          .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-head button img {
            max-width: 20px; }
      .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data {
        padding: 15px 0 175px;
        height: calc(100% - 30px);
        overflow: hidden auto; }
        .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-color {
          margin-bottom: 12px;
          padding-right: 24px; }
          .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-color label {
            font-weight: 800;
            margin-bottom: 10px;
            color: #000; }
          .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-color ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 16px; }
            .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-color ul li {
              border-radius: 4px;
              text-align: center;
              border: 2px solid transparent;
              cursor: pointer;
              position: relative; }
              .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-color ul li:hover, .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-color ul li.active {
                border: 2px solid #222; }
              .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-color ul li span {
                position: absolute;
                top: -10px;
                right: -10px;
                z-index: 1;
                background: #F30;
                color: #FFF;
                min-width: 30px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-size: 10px;
                border-radius: 999px;
                font-weight: 800; }
              .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-color ul li img {
                background-color: rgba(0, 0, 0, 0.04);
                border-radius: 4px;
                margin: 0 auto; }
        .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-size {
          margin-bottom: 12px;
          padding-right: 24px; }
          .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-size label {
            font-weight: 800;
            margin-bottom: 10px;
            color: #000; }
          .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-size ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 12px; }
            .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-size ul li {
              display: none; }
              .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-size ul li .popChosen-box-data-size-item {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between; }
                .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-size ul li .popChosen-box-data-size-item .popChosen-box-data-size-name {
                  flex: 1; }
                .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-size ul li .popChosen-box-data-size-item .popChosen-box-data-size-price {
                  width: 100px; }
                .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-size ul li .popChosen-box-data-size-item .popChosen-box-data-size-action {
                  display: flex;
                  flex-wrap: nowrap;
                  border: 1px solid #ddd;
                  border-radius: 999px; }
                  .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-size ul li .popChosen-box-data-size-item .popChosen-box-data-size-action button {
                    width: 30px;
                    height: 30px;
                    border: none;
                    border-radius: 999px;
                    background: #FFF;
                    border: 1px solid #ddd; }
                    .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-size ul li .popChosen-box-data-size-item .popChosen-box-data-size-action button[disabled="disabled"] {
                      background-color: #e6e6e6;
                      color: #ccc;
                      cursor: not-allowed; }
                  .popChosen .popChosen-box .popChosen-box-wrap .popChosen-box-data .popChosen-box-data-size ul li .popChosen-box-data-size-item .popChosen-box-data-size-action input {
                    width: 45px;
                    height: 30px;
                    background: #FFF;
                    border: none; }
    .popChosen .popChosen-box .popChosen-box-cart {
      position: absolute;
      z-index: 3;
      inset: 0;
      background: #FFF;
      border-radius: 10px 0 0 10px;
      padding: 24px;
      padding-right: 0;
      transition: all .5s;
      transform: translateY(100%); }
      .popChosen .popChosen-box .popChosen-box-cart.openCart {
        transform: none; }
      .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        height: 30px;
        padding-right: 24px; }
        .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-head h2 {
          color: #222;
          font-size: 18px;
          font-weight: 700;
          line-height: 24px;
          margin: 0; }
        .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-head button {
          background: transparent;
          border: none;
          outline: none; }
          .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-head button img {
            max-width: 20px; }
      .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data {
        padding: 15px 0 175px;
        height: calc(100% - 30px);
        overflow: hidden auto; }
        .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-label {
          display: grid;
          grid-template-columns: 40% 30% 30%;
          margin-right: 24px; }
          @media (max-width: 767px) {
            .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-label {
              grid-template-columns: 60% 40%; } }
          .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-label div {
            min-width: 0;
            border: 1px solid #ddd;
            display: table-cell;
            padding: 15px 10px;
            font-weight: 800; }
            .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-label div.popChosen-cart-data-label-var {
              border-right: none; }
            .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-label div.popChosen-cart-data-label-price {
              border-right: none; }
              @media (max-width: 767px) {
                .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-label div.popChosen-cart-data-label-price {
                  display: none; } }
        .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-item {
          display: grid;
          grid-template-columns: 40% 30% 30%;
          border-bottom: 1px solid #ddd;
          margin-right: 24px; }
          @media (max-width: 767px) {
            .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-item {
              grid-template-columns: 60% 40%; } }
          .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-item > div {
            min-width: 0;
            border: 1px solid #ddd;
            display: table-cell;
            padding: 15px 10px;
            border-bottom: none; }
            .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-item > div.popChosen-cart-data-item-var {
              display: inline-flex;
              align-items: center;
              gap: 10px;
              border-right: none; }
              .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-item > div.popChosen-cart-data-item-var img {
                max-width: 20px; }
            .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-item > div.popChosen-cart-data-item-price {
              border-right: none;
              display: inline-flex;
              align-items: center;
              gap: 10px; }
              @media (max-width: 767px) {
                .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-item > div.popChosen-cart-data-item-price {
                  display: none; } }
            .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-item > div.popChosen-cart-data-item-quantity .popChosen-cart-data-item-quantity-wrap {
              display: inline-flex;
              flex-wrap: nowrap;
              border: 1px solid #ddd;
              border-radius: 999px; }
              .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-item > div.popChosen-cart-data-item-quantity .popChosen-cart-data-item-quantity-wrap button {
                width: 30px;
                height: 30px;
                border: none;
                border-radius: 999px;
                background: #FFF;
                border: 1px solid #ddd; }
                .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-item > div.popChosen-cart-data-item-quantity .popChosen-cart-data-item-quantity-wrap button[disabled] {
                  background-color: #e6e6e6;
                  color: #ccc;
                  cursor: not-allowed; }
              .popChosen .popChosen-box .popChosen-box-cart .popChosen-cart-data .popChosen-cart-data-item > div.popChosen-cart-data-item-quantity .popChosen-cart-data-item-quantity-wrap input {
                width: 45px;
                height: 30px;
                background: #FFF;
                border: none; }
    .popChosen .popChosen-box .popChosen-box-result {
      background-color: #fff;
      bottom: 0;
      box-shadow: 0 -10px 10px -10px rgba(176, 176, 176, 0.5);
      left: 0;
      padding: 6px 24px 28px;
      position: absolute;
      width: 100%;
      z-index: 4; }
      .popChosen .popChosen-box .popChosen-box-result .popChosen-subtotal {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between; }
        .popChosen .popChosen-box .popChosen-box-result .popChosen-subtotal p {
          margin: 0; }
          .popChosen .popChosen-box .popChosen-box-result .popChosen-subtotal p.popChosen-subtotal-count.hasItem {
            text-decoration: underline;
            cursor: pointer; }
          @media (max-width: 767px) {
            .popChosen .popChosen-box .popChosen-box-result .popChosen-subtotal p.popChosen-subtotal-price {
              display: none; } }
      .popChosen .popChosen-box .popChosen-box-result .popChosen-total {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin: 12px 0; }
        .popChosen .popChosen-box .popChosen-box-result .popChosen-total p {
          margin: 0; }
          .popChosen .popChosen-box .popChosen-box-result .popChosen-total p.popChosen-total-label, .popChosen .popChosen-box .popChosen-box-result .popChosen-total p.popChosen-total-price {
            font-size: 20px;
            font-weight: 800;
            color: #000; }
      .popChosen .popChosen-box .popChosen-box-result .popChosen-action {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px; }
        .popChosen .popChosen-box .popChosen-box-result .popChosen-action button {
          min-width: 0;
          align-items: center;
          background-color: #fff;
          border: 1px solid #e6e6e6;
          border-radius: 24px;
          color: #333;
          cursor: pointer;
          display: flex;
          flex: 1;
          font-size: 14px;
          font-weight: 600;
          height: 48px;
          justify-content: center;
          padding: 0 12px;
          width: 100%;
          font-weight: bold; }
          .popChosen .popChosen-box .popChosen-box-result .popChosen-action button:first-child {
            background-color: #f60;
            border-color: #f60;
            color: #fff; }
          .popChosen .popChosen-box .popChosen-box-result .popChosen-action button[data-type="popChosen-add"] {
            pointer-events: none;
            background-color: #e6e6e6;
            color: #ccc;
            cursor: not-allowed; }
            .popChosen .popChosen-box .popChosen-box-result .popChosen-action button[data-type="popChosen-add"].hasItem {
              border-color: #222;
              pointer-events: initial;
              background-color: #fff;
              color: #333;
              cursor: pointer; }