.product {

  /* main product section */
  [class^="hdt-secion-main-product"] {
    --detail-width: calc(100% - var(--media-width) - 90px);
    justify-content: space-between;

    @media (max-width:1149px) {
      --detail-width: calc(100% - var(--media-width) - 20px);
    }
  }

  .shopify-block.shopify-app-block {
    margin-bottom: 16px;
  }

  /* add to cart buttons */
  hdt-buy-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;

    @media (min-width: 450px) and (max-width: 768px) {
      max-width: 80% !important;
    }
  }

  hdt-buy-buttons .hdt-product-form__top-buttons {
    display: flex !important;
    align-items: stretch;
    gap: 10px;
    justify-content: space-between;

    @media (min-width: 756px) and (max-width: 1150px) {
      flex-wrap: nowrap !important;

    }
  }

  hdt-height-observer .hdt-sticky-atc__btns {
    justify-content: center;

    @media (max-width: 767px) {
      gap: 1rem !important;
      padding-inline: 1rem;

      .hdt-sticky-atc__submit {
        max-width: 40% !important;
      }
    }

    @media (max-width: 360px) {
      flex-wrap: wrap;

      .hdt-sticky-atc__submit {
        max-width: 70% !important;
      }

    }
  }

  hdt-buy-buttons .hdt-product-info__item {
    margin: 0 !important;
  }

  .hdt-product-form__quantity button[name=minus] {
    padding-inline-start: 0px !important;
  }

  .hdt-product-form__quantity button[name=plus] {
    padding-inline-end: 0px !important;
  }


  hdt-buy-buttons .hdt-quantity__input {
    border: none !important;
    outline: none;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    background: transparent;
    width: 40px;
  }

  hdt-buy-buttons .hdt-quantity__input::-webkit-outer-spin-button,
  hdt-buy-buttons .hdt-quantity__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }



  hdt-buy-buttons .shopify-payment-button__button {
    display: block;
    background: #F4F0EA !important;
    border: 1px solid #C9A97ACC !important;
    color: #1A2A3A !important;
    border-radius: 8px !important;
    height: 63px !important;
    width: 100% !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    font-size: 25px;
    padding: 6px 0;

    @media (max-width: 1150px) {
      font-size: 20px;
      height: 50px !important;
    }

  }

  hdt-buy-buttons .shopify-payment-button__button:hover {
    background-color: #faf6ef !important;
    border-color: #9E7C4E !important;
  }

  /* images slider on mobile screen */
  .hdt-product-media__thumb .hdt-slider__container {
    @media (max-width: 767px) {
      margin-inline-start: 25px;
    }

    .hdt-thumbnail__media.is-thumb-selected img {
      border: 2.5px solid #9E7C4E !important;
    }
  }

  /* container of the main product section */
  @media (max-width: 768px) {
    .hdt-section-inner:has(.hdt-product-media-wrapps) .hdt-container {
      padding: 0;

      .hdt-ratio.hdt-product__media img {
        border-radius: 0px;
      }

      .hdt-group-product-block {
        padding: 0 1.5rem;
      }
    }
  }


  /* product price block */
  [class^="hdt-secion-main-product"] .hdt-price__sale.hdt-price__list {
    flex-direction: row-reverse;
  }

  [class^="hdt-secion-main-product"] hdt-compare-at-price.hdt-compare-at-price {
    text-decoration: none;
  }

  [class^="hdt-secion-main-product"] hdt-compare-at-price.hdt-compare-at-price .hdt-money .money {
    font-size: var(--text-xl);
    color: #1A2A3A;
    text-decoration: line-through;

    @media (max-width: 768px) {
      font-size: var(--text-base);
    }

  }

  [class^="hdt-secion-main-product"] hdt-price .hdt-money .money {
    font-weight: 700;
    color: #F81005;
    font-size: var(--text-10xl);

    @media (max-width: 768px) {
      font-size: var(--text-6xl);
    }
  }

  [class^="hdt-secion-main-product"] .hdt-price__sale.hdt-price__list hdt-compare-at-price[hidden]+hdt-price .hdt-money .money {
    color: inherit;
  }


  /* badg */
  [class^="hdt-secion-main-product"] .hdt-price--show-badge .hdt-badge.hdt-badge__on-sale {
    color: #9E7C4E;
    background-color: #FFF0E0 !important;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 14px !important;
    border-radius: 4px;
    gap: 3px;

    @media (max-width: 1150px) {
      font-size: 11px;
    }
  }


  /* custom image with text product page  */
  .shopify-section:has(#image_text_custom-product) {
    margin-inline: 1.5rem;
  }

  #image_text_custom-product {
    padding-inline: 0;
    box-shadow: 0px 21px 80px 0px #00000033;
    background-color: #FFFFFF01 !important;
    border-radius: 28px;

    .hdt-cl-icon {
      width: 40px;
      height: 40px;

      img {
        width: 20px;
        height: 20px;
      }
    }

    .hdt-cl-list {
      @media (max-width:991px) {
        gap: 8px;
      }
    }

    .hdt-image_text_column {
      @media (max-width: 991px) {
        padding: 20px;
        width: 100%;
      }

      @media (max-width:767px) {
        padding: 0px 15px 15px;

      }
    }

    .hdt-text-warry {
      @media (max-width: 991px) {
        font-size: var(--text-6xl);
      }
    }

    .hdt-text-secondary p {
      @media (max-width: 991px) {
        font-size: var(--text-lg);
      }
    }

    .hdt-cl-text {
      @media (max-width: 991px) {
        font-size: var(--text-xs);
      }
    }

    .hdt-row-grid {
      @media (max-width: 767px) {
        display: flex;
        flex-direction: column-reverse;
      }

      @media (min-width: 768px) {
        grid-template-columns: 1fr .8fr !important;
      }

      .hdt-text-warry p {
        font-weight: 400;
        font-size: 16px;
        line-height: 27px;
      }
    }

    .hdt-row-grid>.hdt-relative::after {
      @media (max-width: 767px) {
        display: none !important;
      }
    }

    .hdt-image-wrapper {
      border-top-left-radius: 28px;
      overflow: hidden;
      border-bottom-left-radius: 28px;
      height: 100%;

      @media (max-width: 767px) {
        border-bottom-left-radius: 0;
        border-top-right-radius: 28px;
      }

      img {
        @media (max-width: 767px) {
          height: 100% !important;
          object-fit: cover;
        }
      }
    }

    .hdt-ratio--adapt_image,
    .hdt-image-wrap {
      height: 100%;
    }

    .custom-checklist {
      @media (max-width:767px) {
        .hdt-cl-text {
          font-size: var(--text-base);
        }
      }
    }
  }

  /* Judge me section */
  .shopify-section:has([id*="judge_me_reviews_review_widget"]) {
    padding: 40px 15px;
    background-color: #F4F0EA;

    @media (max-width:1150px) {
      padding: 24px 15px;
    }

    @media (max-width:767px) {
      padding: 16px 15px;
    }

    /* Beige background matching the design */
    .hdt-group-block .hdt-group-content .hdt-text-warry.hdt-text-secondary {
      @media (max-width: 767px) {
        text-align: center;
      }
    }
  }


  .shopify-section:has([id*="judge_me_reviews_review_widget"]) .jdgm-widget,
  .shopify-section:has([id*="judge_me_reviews_review_widget"]) .jm-review-widget {
    max-width: 1200px;
    margin: 0 auto;

    @media (max-width:1150px) {
      padding-bottom: 16px;
    }

    @media (max-width:767px) {
      padding-bottom: 0px;
    }

  }

  /* Header Box */
  .shopify-section:has([id*="judge_me_reviews_review_widget"]) {

    .jm-review-widget__header,
    .jdgm-rev-widg__header {
      background-color: #FFFFFF !important;
      border-radius: 12px !important;
      padding: 30px !important;
      box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.03) !important;
      margin-bottom: 24px !important;
      border: 1px solid #E8E4DE !important;
    }

    /* Review Box */
    .jm-review,
    .jdgm-rev {
      background-color: #FFFFFF !important;
      border-radius: 12px !important;
      padding: 24px !important;
      margin-bottom: 16px !important;
      border: 1px solid #E8E4DE !important;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.02) !important;
    }

    /* Write Review Button */
    .jm-action-buttons__button,
    .jdgm-write-rev-link {
      background-color: transparent !important;
      border: 1.5px solid #6D9471 !important;
      /* Green border */
      color: #6D9471 !important;
      border-radius: 30px !important;
      padding: 10px 35px !important;
      font-weight: 600 !important;
      font-size: 16px !important;
      transition: all 0.3s ease !important;
    }

    .jm-action-buttons__button:hover,
    .jdgm-write-rev-link:hover {
      background-color: #6D9471 !important;
      color: #FFFFFF !important;
    }

    /* Verified Badge */
    .jdgm-rev__buyer-badge,
    .jm-badge {
      background-color: #EAF2EC !important;
      color: #386D43 !important;
      border-radius: 20px !important;
      padding: 4px 12px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 4px !important;
    }

    /* Histogram Bars */
    .jdgm-histogram__bar-content,
    .jm-bar-chart__bar {
      background-color: #386D43 !important;
      /* Dark green filled bars */
    }

    .jdgm-histogram__bar,
    .jm-bar-chart__background {
      background-color: #E8E4DE !important;
      /* Light background for bars */
      border-radius: 4px !important;
    }

    .jm-sort-filter--compact .jm-sort-filter__icon--sort[data-v-2bbaaaa5] {
      display: block;
      inset-inline-start: 0;
    }

    /* Figma Design Summary Section */
    .jm-review-widget-header__summary-section {
      display: flex !important;
      flex-wrap: nowrap !important;
      justify-content: space-between !important;
      align-items: center !important;
      width: 100% !important;
    }

    .jm-review-widget-header__title {
      display: none !important;
    }

    .jm-review-widget-header__title-and-rating {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .jm-review-widget-header__main-content {
      flex: 2;
      display: flex;
      justify-content: center;
    }

    .jm-action-buttons {
      flex: 1;
      display: flex;
      justify-content: center;
      border-inline-start: 1px solid #E8E4DE !important;
      padding-inline-start: 20px !important;
      margin-inline-start: 20px !important;
    }

    .jm-progress-bar {
      height: 6px !important;
      border-radius: 10px !important;
      background-color: #E8E4DE !important;
    }

    .jm-progress-bar__fill {
      background-color: #386D43 !important;
      border-radius: 10px !important;
    }

    .jm-histogram-row {
      gap: 12px !important;
      margin-bottom: 6px !important;
    }

    @media (max-width: 768px) {
      .jm-review-widget-header__summary-section {
        flex-direction: column !important;
        gap: 20px !important;
      }

      .jm-action-buttons {
        border-inline-start: none !important;
        padding-inline-start: 0 !important;
        margin-inline-start: 0 !important;
        border-top: 1px solid #E8E4DE !important;
        padding-top: 20px !important;
        width: 100%;
      }
    }

    .jm-button.jm-button--secondary,
    .jdgm-sort-dropdown.jm-sort-filter__select {
      background-color: transparent !important;
      border: 1.5px solid #6D9471 !important;
      color: #6D9471 !important;
    }

    .jm-loading-overlay.jm-review-widget__body>.jm-stack {
      box-shadow: 0px 2px 20px 0px #00000017;
      background-color: #FFFFFF;
      border-radius: 12px;
      padding: 28px 32px;

      @media (max-width: 767px) {
        box-shadow: none;
        background-color: transparent;
        border-radius: 12px;
        padding: 0;
      }

      .jm-box.jm-review-item {
        border: 1px solid #EDE7E0;
        border-radius: 12px;
        padding: 20px 24px;

        @media (max-width: 767px) {
          background-color: #fff !important;
          box-shadow: 0px 2px 20px 0px #00000017;
        }

        .jm-star-rating__font-icon {
          font-size: 1.4rem !important;
        }
      }
    }

  }

  /* judge me star rating */
  .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge {
    display: flex !important;
    gap: 7px !important;
  }


  /* related feature collection */
  .custom-card-style11 {
    .hdt-price__list {
      justify-content: flex-end !important;
    }

    .hdt-card-product__btn-ultra .hdt-truncate {
      display: block;
    }

    .hdt-pr-btns-group1 {
      opacity: unset !important;
      transform: none !important;

      .hdt-card-product__btn-ultra {
        justify-content: center !important;
        background: #1A2A3A !important;

        span {
          color: #C6A490 !important;
        }

        &:hover {
          background: #C6A490 !important;

          span {
            color: #1A2A3A !important;
          }
        }
      }
    }
  }

  .hdt-card-product__widget .hdt-badge__wrapp {
    left: auto !important;
    right: 5px !important;
    align-items: flex-start;
  }
}


.product.hdt-page-type-product hdt-buy-buttons,
hdt-sticky-btn-atc {

  /* Quantity selector box */
  hdt-quantity-wrapp {
    width: 177px;
    height: 50px;
    border: 1.5px solid #E8E4DE;
    border-radius: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    button.hdt-quantity__button {
      height: 100%;
      width: 30%;
      background-color: #F4F0EA;
      font-size: 30px;
      text-align: center;

      @media (max-width:768px) {
        border-radius: 6px;
        margin: 5px 4px 4px;
        height: fit-content;
      }
    }

    input.hdt-quantity__input {
      height: 100%;
      width: 30%;
    }

    @media (max-width:768px) {
      width: 160px;
    }
  }

  /* Add to Cart button */
  .hdt-product-form__submit,
  .hdt-sticky-atc__submit {
    flex: 1;
    min-height: 50px;
    background-color: #1A2A3A !important;
    color: #C9A97AE5 !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: opacity 0.2s ease;
    max-width: 60%;
    padding: 12px 60px !important;

    @media (max-width: 1150px) {
      padding: 10px 30px !important;
    }
  }

  hdt-buy-buttons .hdt-product-form__submit:hover {
    opacity: 0.9;
  }

  /* Buy Now / Dynamic checkout */
  hdt-buy-buttons .shopify-payment-button {
    margin: 0;
  }

}

/* EN STYLE  */

[dir="ltr"] #image_text_custom-product {
  .hdt-image-wrapper {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 28px;
    border-bottom-right-radius: 28px;

    @media (max-width: 767px) {
      border-top-left-radius: 28px !important;
      border-top-right-radius: 28px !important;
      border-bottom-left-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
    }
  }
}

[dir="ltr"] .product .hdt-card-product__widget .hdt-badge__wrapp {
  left: 5px !important;
  right: auto !important;
  align-items: flex-start;
}