@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&display=swap');

:root {
  --app1-color: #3ae5f8;
  --app4-color: #f96cf7;
}

.ident-color {
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 50%;
  margin-top: 2px;
  margin-right: 5px;
}

.menu-drawer__navigation .indicator {
  margin: 0 15px;
}

.app1-block .ident-color,
.app1-block-main .ident-color,
.app1.indicator,
.app-drawer-1 {
  background: var(--app1-color);
}

.app4-block .ident-color,
.app4.indicator {
  background: var(--app4-color);
}

.app1-block,
.app1-block-main,
.app4-block,
.app4-block-main {
  display: flex;
  cursor: pointer;
  justify-content: space-between;
}

.app-container-sec {
  display: flex;
  justify-content: space-evenly;
}

.app-container-view {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  border: 1px solid #dedede;
  padding: 15px;
  z-index: 99999;
  box-shadow: 0px -1px 8px 2px rgba(0, 0, 0, 0.15);

}

.app-container-view button.close_btn {
  background: inherit;
  border: 0;
  font-size: 20px;
  cursor: pointer;
  position: absolute;
  top: 13px;
  right: 13px;
}

.indicator {
  display: inline-block;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
  margin-left: 10px;
  cursor: pointer;
}

.kirb-byor-number {
  position: relative;
}

.kirb-byor-number {
  position: relative;
}

.kirb-byor-number .app1.indicator {
  position: absolute;
  right: 0;
  top: -47px;
}

.kirb-new-byor-section,
.image-section {
  border: 2px solid transparent;
  padding: 2px !important;
}

.app1-block-color {
  border: 2px solid var(--app1-color) !important;
  padding: 2px !important;
}

.app4-block-color {
  border: 2px solid var(--app4-color) !important;
  padding: 2px !important;
}

.app-name {
  font-size: 14px;
}

.app-name:hover {
  text-decoration: underline;
  text-decoration-thickness: 1.2px;
}

.background-none {
  background: none !important;
}

.kirb-new-byor-section,
.image-section {
  position: relative;
}

.img-360-icon {
  width: 30px !important;
}
/* ===== Tooltip container ===== */

.app1-tooltip ul,
.app4-tooltip ul {
  margin: 0;
  padding: 0;
  padding-left: 15px;
}

.app1-tooltip li,
.app1-tooltip li,
.app4-tooltip li {
  list-style-type: disc !important;
}

.app1-tooltip,
.app4-tooltip {
  display: none;
  position: absolute;
  top: 0;
  /* place right below indicator */
  left: 50%;
  transform: translateX(-50%);
  width: 234px;
  background: #fff;
  padding: 10px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 98;
  text-align: left;
}

.app1-tooltip::before,
.app4-tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid #fff;
}

.app1-tooltip::after,
.app4-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 30px solid #fff;
}


.kirb-new-byor-section .app1-tooltip::before {
  filter: drop-shadow(0px 0px 6px var(--app1-color));
  border-bottom: 20px solid #fff;
  border-top: 0px;
  top: -20px;
}

.kirb-new-byor-section .app1-tooltip::after {
  border-bottom: 30px solid #fff;
  border-top: 0px;
  top: -19px;
}

.kirb-new-byor-section .app1-tooltip {
  box-shadow: 0px 0px 10px 0px var(--app1-color);
  top: 125px;
}

.app1-block-main .app1-tooltip::before {
  filter: drop-shadow(0px 0px 6px var(--app1-color));
  top: 177px;
}

.app1-block-main .app1-tooltip::after {
  top: 165px;
}

.app1-block-main .app1-tooltip {
  box-shadow: 0px 0px 10px 0px var(--app1-color);
  top: -184px;
}


.app4-tooltip {
  box-shadow: 0px 0px 10px 0px var(--app4-color);
  top: -180px;
}

.app4-tooltip::before {
  filter: drop-shadow(0px 0px 6px var(--app4-color));
  bottom: -20px;
}

.app4-tooltip::after {
  bottom: -20px;
}

@media (max-width: 767px) {
  .ident-color {
    margin-top: 6px;
    width: 10px;
    height: 10px;
  }

  .app-container-view {
    bottom: auto;
    top: 0;
    padding: 0;
  }

  .app-container-view button.close_btn {
    right: 0px;
  }

  .app-container-sec {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10px;
    column-gap: 50px;
    padding: 5px 25px 5px 5px;
  }

  /* 1 child */
  .app-container-sec:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
    grid-template-columns: repeat(1, 1fr);
  }

  .app-container-sec:has(> :nth-child(2)):not(:has(> :nth-child(3))) .app1-block,
  .app-container-sec:has(> :nth-child(2)):not(:has(> :nth-child(3))) .app1-block-main,
  .app-container-sec:has(> :nth-child(2)):not(:has(> :nth-child(3))) .app4-block {
    justify-content: center;
  }

  .app-container-view button.close_btn {
    top: 0px;
  }

  .kirb-new-byor-section .app1-tooltip {
    top: 110px;

  }


  .app1-block,
  .app1-block-main,
  .app4-block {
    justify-content: flex-start;
  }

  .app1-block-main .app1-tooltip {
    top: 53px;
  }

  /* App1 */
  .app1-block-main .app1-tooltip::before {
    top: -20px;
    border-bottom: 20px solid #fff;
    border-top: 0px;
  }

  .app1-block-main .app1-tooltip::after {
    top: -12px;
    border-bottom: 20px solid #fff;
    border-top: 0px;
  }
}

.app4-tooltip.tooltip-right::before,
.app4-tooltip.tooltip-right::after {
  left: -50%;
  top: -10%;
  transform: rotate(90deg);
}

.app4-tooltip.tooltip-right {
    top: 390px !important;
    left: 123% !important;
}

.announcement-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  font-size: 13px;
}

.announcement-bar p {
  padding: 10px 0;
  margin: 0;
  color: #242833BF;
}

.logo-keyideas a {
  display: flex;
  text-decoration: none;
}

header .header__heading-link p {
  width: 160px;
  line-height: normal;
  text-align: end;
  font-size: 14px;
  font-weight: 600;
  color: #5724C5;
  padding-right: 15px;
  margin-right: 15px !important;
  margin: 0;
}

header .header__heading-link .header__heading-logo-wrapper {
  display: flex;
  flex-direction: column;
  color: #000;
  font-size: 14px;
  line-height: normal;
}

.navbar-section {
  display: flex;
  justify-content: space-between;
}

.list-menu--inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 20px;
}

.list-menu--inline li {
  list-style: none;
}

.list-menu--inline li a {
  color: #242833BF;
  text-decoration: none;
  font-size: 14px;
}

.list-menu--inline li a.active {
  text-decoration: underline;
  text-decoration-color: #7646D7;
  text-underline-offset: 0.3rem;
}

.Engagement-section {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 10px;
}


.shape-items {
  display: flex;
}

.gem_type-box {
  flex: 0 0 22%;
  height: 24px;
}

.shape-box img {
  width: 44px;
  padding: 5px;
  height: 44px;
}

.shape_heading {
  font-size: 12px;
  font-weight: 400;
}

.filter_inner {
  display: flex;
  justify-content: space-evenly;
  width: 95%;
  gap: 8px;
}

.shape-box {
  width: 52px;
  height: 52px;
  display: flex;

  align-items: center;
  justify-content: center;
  border: 1px solid lightgray;
  cursor: pointer;
}

.bg-gray {
  background-color: #f6f6f6;
  padding: 10px;
  padding-top: 25px;
  flex-wrap: wrap;
  padding-bottom: 27px;
}

.Ring-Style-items {
  flex-wrap: wrap;
  display: flex;
  gap: 10px;
  /* margin-top: 10px; */
}

.Ring-Style-box {
  flex: 0 0 30%;
  height: 24px;
}

.Metal-Style-items {
  flex-wrap: wrap;
  display: flex;
  gap: 10px;
  /* margin-top: 10px; */
}

.Ring-Style-box label {
  border: 1px solid lightgray;
  display: flex;
  color: rgb(110, 109, 109);
  align-items: center;
  font-size: 10px;
  justify-content: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 5px;
}

.Ring-Style {
  text-align: left;
}

.Metal-Style-box {
  flex: 0 0 30%;
  height: 24px;
}

.white-gold {
  background-color: lightgray;
}

.yellow-gold {
  background-color: #fef08a;
}

.rose-gold {
  background-color: #f5cece;
}

.platinum {
  background-color: #ededed;
}

.Metal-Style-box label {
  border: 1px solid lightgray;
  display: flex;
  color: rgb(110, 109, 109);
  align-items: center;
  font-size: 10px;
  justify-content: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 5px;
}

.Metal-Style {
  text-align: left;
}

.advanced-section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-top: 35px; */
  gap: 20px;
  position: relative;
}

.advanced-section .advanced-filter {
  margin: auto;
  gap: 10px;
  padding: 8px 10px;
  background-color: white !important;
  color: gray !important;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid gray !important;
  height: 44px;
  width: 134px;
}

.advanced-section label {
  border: 1px solid gray;
  padding: 10px;
  font-size: 15px;
  align-items: center;
  display: flex;
  height: 44px;
  color: gray;
  font-weight: 400;
  cursor: pointer;
  justify-content: center;
  width: 134px;
}

.shape_item {
  display: flex;
  flex: 0 0 6%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.accent-content {
  display: flex;
  justify-content: space-evenly;
  gap: 30px;
  gap: 30px;
  padding: 10px;
  background-color: #f6f6f6;
}

.heading {
  display: flex;
  justify-content: left;
  margin-bottom: 20px;
}

div#shapeSection1 {
  margin-top: 18px;
}

.displaynone {
  display: none;
}

.moreless__div {
  background-color: #fff;
  padding: 10px 0;
  display: flex;
  justify-content: center;
}

#keyideas-logo-main {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000;
  width: 130px;
  background-color: #efefef;
  border-radius: 0 0 15px 15px;
  font-size: 10px;
  position: absolute;
  left: 44%;
  top: 100%;
}

.filter__section {
  margin-top: 30px;
  padding-top: 15px;
  justify-content: end;
  border-bottom: 1px solid rgba(34, 36, 38, 0.15);
}

.filter-div {
  position: relative;
}

.content-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

/* .prod-item {
  border: 1px solid #ddd;
} */

.product-item {
  display: flex !important;
  gap: 10px !important;
}

.prod-item a {
  font-size: 14px;
  line-height: 1.2;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: currentcolor;
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}

.prod-item a:hover {
  text-decoration: underline;
}

.image-div>a>img {
  padding: 12px;
  transition: transform 0.3s ease;
}

.prod-item:hover .image-div > a > img {
  transform: scale(1.05);
}

.view-360 {
  color: grey;
  display: flex;
  align-items: center;
}

.view-icon-sprite {
  background-image: url(images/icon-sprite-image.webp);
  width: 25px;
  height: 25px;
  background-position: -341px -171px;
  background-size: 800px;
  background-repeat: no-repeat;
}

.price {
  font-weight: 500;
  color:rgba(36, 40, 51, 0.906)
}

.slider-section .ui-slider-horizontal {
  width: 100%;
  height: 2px;
  background: lightgray !important;
  border-radius: 50vh;
  border: none;
}

.ui-slider-horizontal .ui-slider-range {
  background: #7646d7 !important;
  height: 4px !important;
  margin-top: -1px !important;
}

.mobile_heading {
  display: none;
}

.slider-section .ui-slider-horizontal {
  width: 100%;
  height: 4px;
  background: #7646d7 !important;
  border-radius: 50vh;
  border: none;
}

.ui-slider-handle .ui-corner-all .ui-state-default {
  left: 2% !important;
}

.filter__section .slider {
  margin-bottom: 20px !important;
}

.slider-section .ui-state-default,
.ui-widget-content .ui-state-default {
  top: -7px !important;
  width: 15px;
  height: 16px;
  border-radius: 50vh;
  background: #ffffff !important;
  border: 1px solid lightgray;
  cursor: pointer !important;
}

.filter__section .slider {
  margin-bottom: 20px !important;
}

.show__short__eng .short {
  display: flex;
}

.show__short__eng input,
.show__short__eng select {
  width: 220px;
  height: 30px;
  min-height: 30px;
  padding-left: 5px !important;
  font-size: 14px;
  background-color: transparent;
  border-top: 1px solid #d3d3d3;
  border-left: 1px solid #d3d3d3;
  border-right: 0px;
  border-bottom: 1px solid #d3d3d3;
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.show__short__eng input,
.show__short__eng select:focus {
  outline: none;
}

.d-flex.search-section {
  margin-right: 20px;
}

.show__short__eng {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 20px;
  margin-bottom: 20px;
}

.filter__section .slider-section .input-div input {
  width: 100px;
  height: 15px;
  min-height: 24px;
  padding-left: 5px;
  border: 1px solid #c4c4c4;
  border-radius: 3px;
  font-size: 14px;
  color: #242833BF;
}

.filter__section .slider-section .input-div {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.filter__section .filter_div {
  display: flex;
  flex-direction: column;
  padding: 6px;
}

button.btn.btn-search {
  height: 30px;
  width: 26px;
  border-top: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3;
  background: white;
  color: #fff;
  cursor: pointer;
  min-height: 30px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 !important;
}

.view-360 {
  cursor: pointer;
}

#wcrb_search_btn:focus {
  outline: none;
}


@media (min-width: 992px) {
  .col-lg-3 {
    flex: 0 0 auto;
    width: 24% !important;
    padding: 0% !important;
  }
}

@media (max-width: 765px) {
  .col-lg-3 {
    flex: 0 0 auto;
    width: 47% !important;
    padding: 0% !important;
  }
}

@media (max-width: 767px) {

  .show__short__eng .short {
    width: 100%;
    justify-content: space-between;
  }

  .show__short__eng {
    flex-direction: column-reverse;
    align-items: start !important;
  }

  .show__short__eng input,
  .show__short__eng select {
    width: 120px;
    align-items: self-start;
    margin-left: 0;
    font-size: 15px;
  }
}


/* details page  */

h1 {
  font-size: 32px !important;
  color: #5724C5;
  font-weight: 400;
}

.product-view .main-section {
  display: flex;
  margin-bottom: 30px;
  gap:50px
}

.product-view .main-section .image-section,
.product-view .main-section .content-section {
  width: 50%;
}

.product-view .main-section .image-section {
  height: fit-content;
}

.product-view .main-section h1 {
  margin-bottom: 18px !important;
}

.content-section p {
  margin-bottom: 15px;
  line-height: normal;
  font-size: 14px;
  color: rgba(36, 40, 51, 0.75);
}
.content-section p span{
  font-weight: 700;
}

.grid-shape {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.grid-shape span {
  font-size: 14px;
  flex: 0 0 auto;
  border: 1px solid lightgray;
  padding: 5px 7px;
  line-height: normal;
  cursor: pointer !important;
  width: 42.65px;
  height: 42.65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-shape span.active {
  border: 1px solid #303030 !important;
}

.grid-shape .shapedata{
  background-image: url(../assets/images/diamond-shapes-new.webp);
  background-repeat: no-repeat;
  background-size: 170px;
  display: block;
  background-color: #F5F5F4;
  border-color: #D3D3D3;
}
/* .shapedata.Round{background-position: 34% 50%;}
.shapedata.Cushion{background-position: 96% 3%;}
.shapedata.Oval{background-position: 65% 50%;}
.shapedata.Princess{background-position: 3.5% 97%;}
.shapedata.Emerald{background-position: 34.5% 97%;}
.shapedata.Pear{background-position: 65% 3%;}
.shapedata.Asscher{background-position: 65% 97%;}
.shapedata.Marquise{background-position: 3.5% 3%;}
.shapedata.Heart{background-position: 96% 96%;}
.shapedata.Radiant{background-position: 34.5% 3%;} */

.shapedata[data-shape="Round"]{background-position: 34% 50%;}
.shapedata[data-shape="Cushion"]{background-position: 96% 3%;}
.shapedata[data-shape="Oval"]{background-position: 65% 50%;}
.shapedata[data-shape="Princess"]{background-position: 3.5% 97%;}
.shapedata[data-shape="Emerald"]{background-position: 34.5% 97%;}
.shapedata[data-shape="Pear"]{background-position: 65% 3%;}
.shapedata[data-shape="Asscher"]{background-position: 65% 97%;}
.shapedata[data-shape="Marquise"]{background-position: 3.5% 3%;}
.shapedata[data-shape="Heart"]{background-position: 96% 96%;}
.shapedata[data-shape="Radiant"]{background-position: 34.5% 3%;}

.shape-section,
.metal-section {
  margin-bottom: 15px;
}

.metal-section .grid-shape span {
  padding: 8px 21px;
}


.metal-section .white-gold {
  background: linear-gradient(45deg, #D1D1D1 0%, #F7F7F7 50%, #D1D1D1 100%);
}

.metal-section .yellow-gold {
  background: linear-gradient(45deg, #EDD38C 0%, #FFF8E5 50%, #EDD38C 100%);
}

.metal-section .rose-gold {
  background: linear-gradient(45deg, #F4B998 0%, #FFF6F0 50%, #F4B998 100%);
}

.metal-section .platinum {
  background: linear-gradient(45deg, #D1D1D1 0%, #F7F7F7 50%, #D1D1D1 100%);
}

.image-section {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.image-section .inner-gallery {
  overflow: hidden;
  border: 1px solid rgb(226, 226, 226);
  flex: 0 0 calc(50% - 8px);
  width: 100%;
  height: auto;
}

.image-section .inner-gallery img {
  width: 100%;
}

.back-collection{
  font-size: 14px;
  color: #242833BF;
  margin-bottom: 15px;
  display: flex;
  align-items:center;
}

.back-collection a{
  font-size: 14px;
  color: #242833BF;
}

.deliver-section {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.deliver-section .deliver-icon {
  width: 25px;
  height: 25px;
  margin-right: 5px;
  background-image: url(images/sprite-image-wcrb.webp);
  background-size: 800px;
  background-position: -43px -171px;
}

.deliver-section .free-icon {
  width: 25px;
  height: 25px;
  margin-right: 5px;
  background-image: url(images/sprite-image-wcrb.webp);
  background-size: 800px;
  background-position: -82px -171px;
}

.deliver-section .return-icon {
  width: 25px;
  height: 25px;
  margin-right: 5px;
  background-image: url(images/sprite-image-wcrb.webp);
  background-size: 800px;
  background-position: -122px -171px;
  margin-left: 20px;
}

.deliver-section p {
  margin-bottom: 0 !important;
  font-size: 14px;
}

.deliver-section p span {
  font-weight: 500;
}

.price-tag {
  font-size: 32px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 10px;
}

.add-button {
  width: 50%;
  height: 45px;
  border: none;
  font-weight: 500;
  background-color: #7646D7;
  color: #fff;
}

.drop-icon-section {
  display: flex;
  gap: 22px;
  margin-top: 18px;
}

.drop-icon-section div {
  display: flex;
  align-items: center;
}

.drop-icon-section div p {
  margin: 0;
  line-height: normal;
}

.sprite-popup-iocn {
  display: flex;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-right: 5px;
}

/* .sprite-popup-iocn.drop {
  background-position: -160px -171px;
}

.sprite-popup-iocn.expert {
  background-position: -197px -171px;
} */

.sprite-popup-iocn.share {
  width: 20px;
  height: 18px;
  background-image: url(images/share.webp);
}

.drop-popup-section .modal-content {
  padding: 16px;
  border-radius: 0 !important;
}

.kirb-modal-product-share{
  display: flex;
  justify-content: center;
}

.kirb-product-share{
  width: 550px !important;
}

.drop-popup-section .modal-header {
  border-bottom: none !important;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 0 !important;
}

.drop-popup-section .modal-header .btn-close {
  position: absolute;
  right: 18px;
  top: 28px;
}

.drop-popup-section .img-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drop-popup-section .img-section p {
  margin-left: 20px !important;
  margin: 0;
  font-weight: 500;
  font-size: 18px;
}

.drop-popup-section .email-section {
  margin-top: 10px;
  border: 1px solid lightgray;
  padding: 0px 18px 18px 18px;
  
}

.drop-popup-section .email-section input,
.drop-popup-section .email-section textarea {
  width: 100%;
  border: 1px solid black;
  margin-top: 15px;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 0px;
  line-height: 1.15;
}

.drop-popup-section .email-section textarea {
  height: 100px;
}

.drop-popup-section .email-section .send-btn {
  width: 200px;
  height: 50px;
  border: none;
  background-color: #7646D7;
  color: #fff;
  font-size: 18px;
  margin-top: 20px;
}

.drop-section h5 {
  font-size: 25px;
  margin-bottom: 8px !important;
  font-weight: 700;
  line-height: normal;
}

.drop-section p {
  margin: 0;
  font-size: 16px;
  line-height: normal;
}

.modal__share__icon_wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal__share__section {
  border: 1px solid lightgray;
  padding: 18px;
  margin-top: 20px;
}

.modal__share__section p {
  font-size: 18px;
  margin: 15px 0;
}

.modal__share__icons {
  background: url(images/modal-social-icon-sprite.png) no-repeat;
  width: 60px;
  height: 60px;
  display: block;
}

.modal__share__icons.facebook {
  background-position: 0;
}

.modal__share__icons.instagram {
  background-position: -95px;
}

.modal__share__icons.pinterest {
  background-position: -190px;
}

.modal__share__section .modal__copy__link {
  border: 1px solid lightgray;
  display: flex;
  align-items: center;
  height: 50px;
  color: lightgray;
  padding-left: 10px;
  position: relative;
}

.modal__share__section .modal__copy__link #pageLinkText {
  position: absolute;
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
}

.modal__share__section .modal__copy__link a {
  margin-left: auto;
  height: 50px;
  z-index: 1;
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E") !important;
  transition: all 0.5s;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E") !important;
}

.accordion-button:not(.collapsed){
  background-color: transparent !important;
  box-shadow: none !important;
}

.product-section-head{
    padding: 0 !important;
    margin-top: 20px;
    font-size: 16px !important;
    color: #000 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 36px;
}

.product-section-head .arrow{
  font-size: 20px;
}

.product-section-content {
  display: none;
}

.product-section-content.open {
  display: block;
}

.product-section-pera{
  font-size: 14px !important;
}

.product-section-pera p{
  color: rgb(36, 40, 51);
  opacity: 75%;
  font-size: 16px;
  line-height: 28px;
}
.product-section-pera p span{
  font-weight: 400;
}

.product-section-pera .bold{
  margin-bottom: 5px;
  margin-top: 5px;
  color: #000 !important;
}

.ring-size-section select {
  padding: 5px;
  color: rgba(36, 40, 51, 0.75);
  font-size: 14px;
}

.ring-engraving-section div div{
  font-family: Assistant, sans-serif !important;
}

@media (min-width: 768px) and (max-width: 1024px) {

  .container {
    width: 100% !important;
  }

}

@media (max-width: 767px) {
  .container {
    width: 100% !important;
  }

  .product-view .main-section {
    flex-direction: column;
    gap:0px
  }

  .product-view .main-section .image-section,
  .product-view .main-section .content-section {
    width: 100%;
  }

  .product-view .main-section .image-section {
    margin-bottom: 30px;
  }

  .image-section .inner-gallery {
    overflow: hidden;
    border: 1px solid rgb(226, 226, 226);
    flex: 0 0 calc(50% - 8px);
    width: 100%;
    height: fit-content;
  }

  .add-button {
    width: 80%;
  }
}
.wc-popup-image{
  width: 107px;
  display:ruby-text
}

.copied-style{
display: flex;
justify-content: center;
align-items: center;
background-color: #7646d7 !important;
color: white !important;
text-decoration: none;
padding:0 2px;
}

.wc-consult-p{
  margin-bottom:0
}

.expert-section h5{
  font-size: 25px;
  margin-bottom: 8px !important;
  font-weight: 700;
  line-height: normal;
}

.drop-popup-section .modal-dialog{
  max-width: 470px;
}

.ring-size-section {
 margin-bottom: 15px;
}

.ring-size-section label {
  display: block;
  line-height: normal;
  font-size: 14px;
  color: rgba(36, 40, 51, 0.75);
  margin-bottom: 15px;
  font-family: Assistant, sans-serif !important;
}
.ring-size-section .custom-select-box {
  position: relative;
  width: 80px;
  border: 1px solid #D3D3D3DD;
  cursor: pointer;
  background-color: #fff;
  padding: 6px 30px 6px 10px;
  user-select: none;
  color: rgba(36, 40, 51, 0.75);
}

.ring-size-section .custom-select-box::after {
  content: '';
  position: absolute;
  top: 44%;
  right: 10px;
  width: 7px;
  height: 7px;
  transform: translateY(-50%) rotate(45deg);
  border: solid #000;
  border-width: 0 1px 1px 0;
  padding: 3px;
  pointer-events: none;
}

.ring-size-section .custom-select-box.open::after {
  top: 57%;
  transform: translateY(-50%) rotate(-135deg);
}

.ring-size-section .custom-options {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  border-top: none;
  position: absolute;
  width: 102%;
  background: #fff;
  z-index: 10;
  display: none;
  max-height: 200px;
  overflow-y: auto;
  left: -1%;
  top: 103%;
}

.ring-size-section .custom-options li {
  padding: 6px 8px;
  font-size: 14px;
}

.ring-size-section .custom-options li:hover,
.ring-size-section .custom-options li.active {
  background-color: #f0f0f0;
}

.ring-size-section .custom-select-box.open .custom-options {
  display: block;
}

.add-engraving-section{
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  cursor: pointer;
  align-items: center;
}
.add-engraving-section .engraving-wrapper{
  display: flex;
  gap: 8px;
  cursor: pointer;
}
.add-engraving-section .add-engraving-icon{
  background: url('../assets/images/add-engraving.svg');
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  display: block;
  background-size: 100%;
}
.add-engraving-section .btn-close{
  width: 14px;
  height: 14px;
  padding: 0;
}


.deliver-section-wrapper{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.deliver-section-wrapper .deliver-section{
  background-color: #EEEEEE;
  width: auto;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  margin-bottom: 0;
}
.deliver-section-wrapper p{
  margin-bottom: 0;
  white-space: nowrap;
}
.deliver-section-wrapper p span{
  font-weight: 700;
}

#engrave-Modal-popup .engrave-product-image, #engrave-Modal-popup .engrave-product-options{
  border: 1px solid rgba(0, 0, 0, 0.20);
  padding: 12px;
  /* margin-top: 15px; */
}
#engrave-Modal-popup .engrave-product-name{
  margin-top: 10px;
  margin-bottom: 15px;
  text-align: center;
}
#engrave-Modal-popup .save-btn{
  width: 200px;
  height: 50px;
  border: none;
  background-color: #7646D7;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#engrave-Modal-popup .engrave-product-options input{
  width: 100%;
  border: 1px solid black;
  margin-top: 15px;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 0px;
  line-height: 1.15;
}
#engrave-Modal-popup .engrave-product-options .char-count{
  color: rgba(0, 0, 0, 0.40);
  text-align: end;
}
#engrave-Modal-popup .engrave-product-options .font-options{
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}
#engrave-Modal-popup .engrave-product-options .font-options .font-option{
  background-color: #EEEEEE;
  width: 24%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4A4A4A;
  cursor: pointer;
  font-size: 14px;
}
#engrave-Modal-popup .engrave-product-options .font-options .font-option.active{
  background-color: #EBE2FB;
}
#engrave-Modal-popup .engrave-product-options .font-options .font-option[data-font="roman"]{
  font-family: Times New Roman;
}
#engrave-Modal-popup .engrave-product-options .font-options .font-option[data-font="italic"]{
  font-family: Times New Roman;
  font-weight: 700;
  font-style: italic;
}
#engrave-Modal-popup .engrave-product-options .font-options .font-option[data-font="script"]{
  font-family: Golden Hills DEMO;
}
#engrave-Modal-popup .engrave-product-options .font-options .font-option[data-font="regular"]{
  font-family: Poppins;
  font-weight: 600;
}
#engrave-Modal-popup .engrave-product-options .symbol-options{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px 7%;
}
#engrave-Modal-popup .engrave-product-options .symbol-options .symbol-outer{
  width: 22px;
  height: 22px;
  padding: 2px;
  border-radius: 50%;
  /* border: 1px solid; */
}
.symbol-options .symbol{
  background: url('../assets/images/engraving-sprite.png');
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  display: block;
  background-size: 400px;
  cursor: pointer;
}
/* #engrave-Modal-popup .engrave-product-options .symbol-options .symbol-outer.active{
  border: 1px solid #7646D7;
} */
.symbol.special-symbol-one{background-position: 6% 53%;}
.symbol.special-symbol-two{background-position: 13.6% 53%;}
.symbol.special-symbol-three{background-position: 21.5% 53%;}
.symbol.special-symbol-four{background-position: 29.5% 53%;}
.symbol.special-symbol-five{background-position: 37.5% 53%;}
.symbol.special-symbol-six{background-position: 45.5% 53%;}
.symbol.special-symbol-seven{background-position: 53.5% 53%;}
.symbol.special-symbol-eight{background-position: 61.7% 53%;}

.symbol.special-symbol-nine{background-position: 70% 53%;}
.symbol.special-symbol-ten{background-position: 78% 53%;}
.symbol.special-symbol-eleven{background-position: 86% 53%;}
.symbol.special-symbol-twelve{background-position: 94% 53%;}

.symbol.special-symbol-thirteen{background-position: 6% 80%;}
.symbol.special-symbol-fourteen{background-position: 14% 80%;}
.symbol.special-symbol-fifteen{background-position: 22% 80%;}
.symbol.special-symbol-sixteen{background-position: 30% 80%;}


.cart--wish-wrapper{
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart--wish-wrapper .entry-summary{
  width: 346px;
  margin: 0;
}
.wish--heart-icon{
  background: url('../assets/images/wish-heart.svg');
  background-repeat: no-repeat;
  width: 24px;
  height: 22px;
  display: block;
  background-size: 100%;
  margin-top: 15px;
}

.mt-15{
  margin-top: 15px;
}

.mb-15{
  margin-bottom: 15px !important;
}

.mobile-image-section{
  display: none;
}

.img-360 {
  height: 234px;
}

@media screen and (max-width:767px) {
  .cart--wish-wrapper .entry-summary{
    width: 100%;
  }

  .product-view .main-section h1{
    font-size: 20px !important;
  }
  .grid-shape {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .grid-shape::-webkit-scrollbar {
    display: none;
  }
  .shape-section .grid-shape .shape-detail-wrapper{
    flex-direction: column;
    display: flex;
    gap: 5px;
    align-items: center;
  }
  .shape-section .grid-shape{
    gap: 20px;
  }
  #engrave-Modal-popup .drop-section h5{
    font-size: 16px;
  }
  #engrave-Modal-popup .drop-section p, #engrave-Modal-popup .engrave-product-options .font-options .font-option, #engrave-Modal-popup .engrave-product-options input{
    font-size: 12px;
  }
  #engrave-Modal-popup .save-btn{
    font-size: 12px;
    width: 122px;
    height: 30px;
  }
  #engrave-Modal-popup .engrave-product-options .symbol-options{
    gap: 10px 5%;
  }

  /* hide desktop image section */
  .image-section {
    display: none;
  }

  /* mobile image section details page */

  .mobile-image-section{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
  }

  .mobile-image-section .view-360-section{
    width: 30px;
    border-radius: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px;
  }

  .mobile-image-section .view-360-section img{
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .mobile-image-section .main-image-section{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 1px solid #00000033; 
  }

  .mobile-image-section .main-image-section img{
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .img-360 {
    height: 362px;
  }

  .mobile-image-section .thumbnail-image-section{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
    overflow: auto;
    margin-bottom: 20px;
  }

  .mobile-image-section .thumbnail-image-section .thumbnail-item-div{
    width: 57px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.19px solid #D3D3D3;
    cursor: pointer;
  }

  .mobile-image-section .thumbnail-image-section .thumbnail-item-div img{
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .mobile-image-section .thumbnail-image-section .thumbnail-item-div.active{
        border: 0.19px solid #7646D7;

  }


}

#krfs_360_frame {
    width: 500px;
    height: 500px;
}


.view-360-section .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.krfs-modal-content {
    width: 560px;
    padding: 15px;
    margin: auto;
    border-radius: 0 !important;
    font-family: Assistant, sans-serif !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
}

.krfs-modal-content .btn-close {
    width: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    top: 18px;
    right: 18px;
    position: absolute;
    font-weight: 100;
    opacity: unset !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.view-360-section .pera-content {
    font-size: 14px;
    text-align: center;
    color: #232323;
    margin: auto;
    width: 90%;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-bottom: 0 !important;
}

.modal .modal-dialog {
    max-width: 100%;
}

.popup-360-screen{
  position: absolute;
  top: 16px;
  right: 18px;
}

.inner-gallery{
  position:relative;
}

#keyideas-logo-360, #keyideas-logo-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #000;
    width: 130px;
    background-color: #efefef;
    border-radius: 0 0 15px 15px;
    font-size: 4px;
    padding: 0 !important;
    margin: auto;
}

.krfs-cart-button {
    font-family: Assistant, sans-serif !important;
    background-color: #575757 !important;
    color: white !important;
    width: 90%;
    font-size: 15px !important;
    padding: 11px 0px !important;
    font-weight: 500 !important;
    border-radius: 0px !important;
    text-transform: uppercase;
    border:none !important;
}

.kirb_byor_select_ring {
    font-family: Assistant, sans-serif !important;
    background-color: var(--kirb-primary-color);
    color: white;
    width: 90%;
    font-size: 15px;
    padding: 11px 0px;
    border-radius: 0px;
    text-transform: uppercase;
    border:none;
}

header .header__heading-link p {
    line-height: normal !important;
    text-align: end !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: rgb(36, 40, 51) !important;
    padding-right: 15px !important;
    margin-right: 15px !important;
    margin: 0 !important;
}

.stripcontainer{
  margin-top:50px;
}

@media (max-width: 767px) {
  .kirb_byor_select_ring {
    width: 100%;
  }
  .cart--wish-wrapper{
    justify-content: center;
  }
  .krfs-cart-button{
    width: 100%;
  }
}