main {
  min-height: 270px;
}

#content-status-1, #nav-item-path {
  margin-top: 35px;
}

#content-status-1, #content-status-2 {
  position: relative;
}

#content-status-1.error::before {
  content:    'فشل في عرض العنصر. حاول إعادة تحميل الصفحة لاحقًا!';
  position:   absolute;
  text-align: center;
  width:      100%;
}

#content-status-1.url-missing::before {
  content:    'عنوان URL العنصر غائب!';
  position:   absolute;
  text-align: center;
  width:      100%;
}

#content-status-2.error, #content-status-2.loading {
  margin-bottom: 20px;
  min-height:    200px;
}

#content-status-2.error::before {
  content:     'فشل في عرض العناصر. حاول إعادة تحميل الصفحة لاحقًا!';
  padding-top: 20px;
  position:    absolute;
  text-align:  center;
  width:       100%;
}

#content-status-1.loading::before, #content-status-2.loading::before {
  background:      url('../assets/images/preloader.svg') 0 0 no-repeat;
  background-size: 200px;
  content:         '';
  height:          200px;
  left:            calc(50% - 100px);
  position:        absolute;
  width:           200px;
}

#nav-item-path {
  --bs-breadcrumb-divider: '\\';
  color:                   #6A7998;
  font-size:               12px;
  line-height:             16px;
}

#nav-item-path .breadcrumb-item {
  display:       flex;
  padding-left:  0;
  padding-right: 8px;
}

#nav-item-path .breadcrumb-item:first-child {
  padding-right: 0;
}

#nav-item-path .breadcrumb-item::before {
  color:         #6A7998;
  padding-left:  8px;
  padding-right: 0;
}

#nav-item-path .breadcrumb-item > a {
  color:           #1C222E;
  text-decoration: none;
}

#nav-item-path .breadcrumb-item > a:active {
  color: #FF6224 !important;
}

#nav-item-path .breadcrumb-item > a:hover {
  color: #FF8658;
}

#catalog-item-wrapper {
  margin-bottom: 20px;
  margin-top:    36px;
}

#catalog-item-wrapper > .row:nth-child(2) {
  margin-bottom: 20px;
}

#catalog-item-wrapper.highlighted #cip-current-picture, #catalog-item-wrapper.highlighted #ci-primary-info,
#catalog-item-wrapper.highlighted #ci-secondary-info, #catalog-item-wrapper.highlighted #ci-comments-wrapper {
  border:             2px solid #FF8658;
  border-radius:      10px;
  -moz-box-shadow:    -2px 2px 12px 0px rgba(26, 45, 60, 0.75);
  -webkit-box-shadow: -2px 2px 12px 0px rgba(26, 45, 60, 0.75);
  box-shadow:         -2px 2px 12px 0px rgba(26, 45, 60, 0.75);
}

#catalog-item-wrapper.highlighted #ci-title {
  font-weight: 600;
}

#ci-title {
  font-size:   24px;
  font-weight: 500;
  line-height: 32px;
  margin:      0 0 20px 0;
  word-break:  break-word;
}

#ci-pictures {
  height:        544px;
  min-height:    544px;
  padding-right: 20px;
  position:      relative;
  width:         calc(58.33333333% - 10px);
}

#cip-current-picture {
  background:    #FFFFFF;
  border-radius: 8px;
  bottom:        0;
  left:          12px;
  padding:       16px;
  position:      absolute;
  right:         124px;
  top:           0;
}

#cip-current-picture.video, #cip-current-picture.audio {
  cursor: pointer;
}

#cip-current-picture.video::before, #cip-current-picture.audio::before {
  background:      #00000080 url('../assets/images/catalog-item-play.svg') 0 0 no-repeat;
  background-size: 67px !important;
  border-radius:   34px;
  content:         '';
  height:          67px;
  left:            calc(50% - 34px);
  position:        absolute;
  top:             calc(50% - 34px);
  width:           67px;
}

#cip-current-picture img, #cip-current-picture video {
  height:     100%;
  object-fit: contain;
  width:      100%;
}

#cip-current-picture video {
  cursor: pointer;
}

#cip-current-picture > span.note {
  color:       #6A7998;
  cursor:      pointer;
  display:     inline-block;
  font-size:   250px;
  line-height: 512px;
  text-align:  center;
  width:       100%;
}

#cip-thumbs {
  height:    100px;
  min-width: 544px;
  transform: rotate(90deg) translateX(221px) translateY(-224px);
  width:     544px;
}

#cip-thumbs .carousel-control-next, #cip-thumbs .carousel-control-prev {
  width: 32px !important;
}

#cip-thumbs .carousel-control-next-icon {
  background-image: url('../assets/images/category-shortcut-next.svg');
}

#cip-thumbs .carousel-control-prev-icon {
  background-image: url('../assets/images/category-shortcut-prev.svg');
}

#cip-thumbs .carousel-inner {
  height: 100px;
}

#cip-thumbs .carousel-inner .carousel-item.active,
#cip-thumbs .carousel-inner .carousel-item-next,
#cip-thumbs .carousel-inner .carousel-item-prev {
  display:        flex;
  flex-direction: row-reverse;
}

#cip-thumbs .carousel-inner .carousel-item-end.active,
#cip-thumbs .carousel-inner .carousel-item-next {
  transform: translateX(20%);
}

#cip-thumbs .carousel-inner .carousel-item-start.active,
#cip-thumbs .carousel-inner .carousel-item-prev {
  transform: translateX(-20%);
}

#cip-thumbs .carousel-inner .carousel-item.static {
  display:      block;
  margin-right: 0;
  width:        auto;
}

#cip-thumbs > .carousel-inner div.cip-thumb {
  align-items:    center;
  background:     #F5F5F5;
  display:        flex;
  flex:           1 0 auto;
  margin:         0 6px 0 4px;
  max-width:      100px;
  position:       relative;
  transform:      rotate(-90deg);
  width:          100px;
}

#cip-thumbs .cip-thumb.active::after {
  border-radius:      4px;
  -webkit-box-shadow: inset 0 0 0 2px #E4E2EB;
  -moz-box-shadow:    inset 0 0 0 2px #E4E2EB;
  box-shadow:         inset 0 0 0 2px #E4E2EB;
  bottom:             0;
  content:            '';
  left:               0;
  position:           absolute;
  right:              0;
  top:                0;
}

#cip-thumbs .cip-thumb.video::before, #cip-thumbs .cip-thumb.audio::before {
  background:      #00000080 url('../assets/images/catalog-item-play.svg') 0 0 no-repeat;
  background-size: 20px !important;
  border-radius:   10px;
  content:         '';
  height:          20px;
  left:            calc(50% - 10px);
  position:        absolute;
  top:             calc(50% - 10px);
  width:           20px;
}

#cip-thumbs .cip-thumb.audio > span {
  color:       #6A7998;
  display:     inline-block;
  font-size:   52px;
  height:      100px;
  padding-top: 24px;
  text-align:  center;
  width:       100%;
}

#cip-thumbs .cip-thumb > img, #cip-thumbs .cip-thumb > video {
  border-radius: 4px;
  height:        100px;
  object-fit:    contain;
  width:         100px;
}

#ci-primary-info {
  background:    #FFFFFF;
  border-radius: 8px;
  height:        544px;
  min-height:    544px;
  padding:       16px;
}

#ci-primary-info #cipi-price {
  color:         #1C222E;
  margin-bottom: 0;
}

#ci-primary-info #cipi-favorite {
  font-size:     25px;
  margin-bottom: 8px;
  margin-left:   12px;
  padding:       0 3px;
}

#ci-primary-info #cipi-favorite[aria-pressed=true] > svg > path {
  fill: #FF0000;
}

#ci-primary-info #cipi-in-cart {
  font-size:     23px;
  margin-bottom: 8px;
  padding:       0 3px;
  transform:     scaleX(-1);
}

#ci-primary-info #cipi-in-cart[aria-pressed=true] > svg > path {
  fill: #198754;
}

#ci-primary-info #cipi-title-bar, #ci-primary-info #cipi-buttons {
  margin-bottom: 20px;
}

#ci-primary-info #cipi-seller-card {
  margin-bottom: 8px;
}

#ci-primary-info #cipi-seller-avatar {
  margin-left: 8px;
  position:    relative;
}

#ci-primary-info #cipi-seller-avatar.online::after {
  background:    #7CBC68;
  border:        2px solid #FFFFFF;
  border-radius: 7px;
  content:       '';
  height:        14px;
  left:          8px;
  position:      absolute;
  top:           8px;
  width:         14px;
}

#ci-primary-info #cipi-seller-avatar > img {
  background:    #FFFFFF;
  border-radius: 40px;
  height:        80px;
  object-fit:    cover;
  width:         80px;
}

#ci-primary-info #cipi-seller-info > #cipi-seller-name {
  border:        none;
  font-weight:   500;
  line-height:   24px;
  margin-bottom: 8px;
  padding:       0;
}

#ci-primary-info #cipi-seller-info > #cipi-seller-joined-at {
  color:         #6A7998;
  font-size:     14px;
  line-height:   16px;
  margin-bottom: 8px;
}

#ci-primary-info #cipi-seller-info > #cipi-seller-reviews {
  color:         #6A7998;
  font-size:     14px;
  line-height:   16px;
  margin-bottom: 0;
}

#ci-primary-info #cipi-seller-info > #cipi-seller-reviews #cipi-seller-rating {
  margin-left: 20px;
}

#ci-primary-info #cipi-seller-info > #cipi-seller-reviews #cipi-seller-rating.rating {
  display:  inline-block;
  height:   12px;
  position: relative;
  width:    87px;
}

#ci-primary-info #cipi-seller-info > #cipi-seller-reviews #cipi-seller-rating.rating::before {
  background:      url('../assets/images/star-background-icon.svg') 0 0 repeat-x;
  background-size: 12px;
  content:         '';
  height:          12px;
  left:            27px;
  position:        absolute;
  top:             2px;
  width:           60px;
}

#ci-primary-info #cipi-seller-info > #cipi-seller-reviews #cipi-seller-rating.rating.rating-1::after {
  background:      url('../assets/images/star-foreground-icon.svg') 0 0 repeat-x;
  background-size: 12px;
  content:         '';
  height:          12px;
  left:            27px;
  position:        absolute;
  top:             2px;
  width:           12px;
}

#ci-primary-info #cipi-seller-info > #cipi-seller-reviews #cipi-seller-rating.rating.rating-2::after {
  background:      url('../assets/images/star-foreground-icon.svg') 0 0 repeat-x;
  background-size: 12px;
  content:         '';
  height:          12px;
  left:            27px;
  position:        absolute;
  top:             2px;
  width:           24px;
}

#ci-primary-info #cipi-seller-info > #cipi-seller-reviews #cipi-seller-rating.rating.rating-3::after {
  background:      url('../assets/images/star-foreground-icon.svg') 0 0 repeat-x;
  background-size: 12px;
  content:         '';
  height:          12px;
  left:            27px;
  position:        absolute;
  top:             2px;
  width:           36px;
}

#ci-primary-info #cipi-seller-info > #cipi-seller-reviews #cipi-seller-rating.rating.rating-4::after {
  background:      url('../assets/images/star-foreground-icon.svg') 0 0 repeat-x;
  background-size: 12px;
  content:         '';
  height:          12px;
  left:            27px;
  position:        absolute;
  top:             2px;
  width:           48px;
}

#ci-primary-info #cipi-seller-info > #cipi-seller-reviews #cipi-seller-rating.rating.rating-5::after {
  background:      url('../assets/images/star-foreground-icon.svg') 0 0 repeat-x;
  background-size: 12px;
  content:         '';
  height:          12px;
  left:            27px;
  position:        absolute;
  top:             2px;
  width:           60px;
}

#ci-primary-info #cipi-subscribe-to-seller {
  border:      none;
  color:       #6C56B0;
  font-size:   16px;
  font-weight: 500;
  line-height: 20px;
  padding:     8px 0;
  width:       fit-content;
}

#ci-primary-info #cipi-complain-about-item {
  border:      none;
  color:       #AF052F;
  font-size:   16px;
  font-weight: 500;
  line-height: 20px;
  padding:     8px 0;
  width:       fit-content;
}

#ci-secondary-info, #ci-comments-wrapper {
  background: #FFFFFF;
  padding:    16px;
}

#catalog-items-wrapper {
  margin-bottom: 20px;
}

#catalog-items-wrapper > h2, #ci-comments-wrapper > h3 {
  font-size:     24px;
  font-weight:   500;
  line-height:   32px;
  margin-bottom: 10px;
}

#ci-comments-wrapper {
  margin-top: 20px;
}

#ci-comments-wrapper #ci-no-comment-items {
  margin-bottom: 12px;
  text-align:    center;
}

#ci-comments-wrapper #ci-comment-items > .ci-comment-item {
  padding: 8px;
}

#ci-comments-wrapper #ci-comment-items .ci-user-avatar {
  margin-left: 8px;
}

#ci-comments-wrapper #ci-comment-items .ci-user-avatar > img {
  background:    #FFFFFF;
  border-radius: 22px;
  height:        44px;
  object-fit:    cover;
  width:         44px;
}

#ci-comments-wrapper #ci-comment-items .ci-comment-title > .ci-comment-author {
  color:         #1C222E;
  font-weight:   500;
  margin-bottom: 8px;
}

#ci-comments-wrapper #ci-comment-items .ci-comment-title > .ci-item-rating .jq-star {
  cursor: default;
}

#ci-comments-wrapper #ci-add-comment {
  border:        2px solid #7155C6;
  border-radius: 8px;
  margin-top:    12px;
}

#ci-comments-wrapper #ci-add-comment #ci-rating {
  align-items: center;
  margin:      12px 14px 6px 0;
}

#ci-comments-wrapper #ci-add-comment #ci-rating > p {
  margin: auto 0 auto 5px;
}

#ci-comments-wrapper #ci-add-comment #ci-comment-text {
  border:     none;
  font-size:  16px;
  height:     24px;
  margin:     6px 14px 12px 0;
  max-height: 144px;
  min-height: 24px;
  outline:    none;
  padding:    0;
  resize:     none;
  width:      calc(100% - 12px);
}

#ci-comments-wrapper #ci-add-comment #ci-send-comment {
  box-shadow: none;
  height:     24px;
  margin:     auto 12px 12px 12px;
  max-height: 24px;
  max-width:  24px;
  min-height: 24px;
  min-width:  24px;
  padding:    0;
  transform:  rotate(180deg);
  transition: none;
  width:      24px;
}

#ci-comments-wrapper #ci-add-comment #ci-send-comment:hover > img {
  filter: brightness(0) saturate(100%) invert(71%) sepia(91%) saturate(2916%) hue-rotate(324deg) brightness(107%) contrast(101%);
}

.btn.btn-primary.var {
  font-size:      18px;
  font-weight:    500;
  line-height:    22px;
  padding-bottom: 8px;
  padding-top:    8px;
}

.btn.btn-outline-primary.var {
  font-size:      18px;
  font-weight:    500;
  line-height:    22px;
  padding-bottom: 6px;
  padding-top:    6px;
}

.btn.btn-primary.var > small, .btn.btn-outline-primary.var > small {
  font-size:   14px;
  font-weight: 400;
  line-height: 16px;
}

.btn.btn-primary.var#cipi-show-phone, .btn.btn-outline-primary.var#cipi-write-message {
  margin-bottom: 8px;
}

.btn.btn-primary#cipi-buy-with-delivering {
  font-size:      18px;
  font-weight:    500;
  line-height:    24px;
  margin-bottom:  8px;
  padding-bottom: 18px;
  padding-top:    18px;
}

.btn.btn-primary#cipi-buy-with-delivering + p {
  font-size:     14px;
  line-height:   16px;
  margin-bottom: 8px;
}

.btn.btn-link#cipi-delivering-terms {
  border:      none;
  color:       #6C56B0;
  font-size:   16px;
  font-weight: 500;
  line-height: 20px;
  padding:     8px 0;
  width:       fit-content
}

.cisi-item {
  color:         #1C222E;
  display:       flex;
  margin-bottom: 20px;
  padding-left:  0;
  padding-right: 0;
}

.cisi-item.grayed {
  margin-bottom: 40px;
}

.cisi-item > .cisi-item-title {
  display:     inline-block;
  margin-left: 20px;
  max-width:   180px;
  min-width:   180px;
  width:       180px;
}

.cisi-item.grayed > .cisi-item-title {
  color:       #6A7998;
  font-size:   14px;
  line-height: 16px;
}

.cisi-item > .cisi-item-data {
  display:    inline-block;
  width:      100%;
  word-break: break-word;
}

.cisi-item.item-description > .cisi-item-data > p {
  text-indent: .75em;
}

.cisi-item.item-description > .cisi-item-data > p:last-child {
  margin-bottom: 0;
}

.cisi-item > .cisi-item-data#cisi-region {
  padding-left: 166px;
  position:     relative;
}

.cisi-item > .cisi-item-data#cisi-region > #cisi-show-location {
  color:       #6C56B0;
  font-weight: 500;
  left:        0;
  padding:     8px 0;
  position:    absolute;
  top:         -8px;
}

.cisi-item > .cisi-item-data#cisi-socials a:nth-child(2) {
  margin: 0 20px;
}

.cisi-item > .cisi-item-data > .btn.btn-outline-primary {
  font-size:   14px;
  font-weight: 500;
  line-height: 20px;
  margin-left: 6px;
  padding:     6px 0;
  width:       135px;
}

.ya-share2__item {
  margin-left:  4px !important;
  margin-right: 0 !important;
}

@media(hover: none) {

  #nav-item-path .breadcrumb-item > a:hover {
    color: #1C222E;
  }

}

@media(max-width: 991px) {

  #catalog-item-wrapper > .row:nth-child(2) {
    flex-direction: column;
  }

  #ci-pictures {
    margin-bottom: 20px;
    padding-right: 12px;
    width:         100%;
  }

  #ci-primary-info {
    margin-right: 12px;
    width:        calc(100% - 24px);
  }

}

@media(max-width: 767px) {

  .cisi-item {
    flex-direction: column;
  }

  .cisi-item > .cisi-item-title {
    margin-bottom: 6px;
    margin-right:  0;
    max-width:     200px;
    min-width:     200px;
    width:         200px;
  }

  .cisi-item > .cisi-item-data#cisi-region {
    padding-right: 0;
  }

  .cisi-item > .cisi-item-data#cisi-region > #cisi-show-location {
    top: -37px;
  }

}

@media(max-width: 556px) {

  #ci-pictures {
    margin-bottom: 20px;
    padding-right: 12px;
  }

  #cip-current-picture {
    left:  12px;
    right: 12px;
    top:   112px;
  }

  #cip-thumbs {
    min-width: unset;
    transform: none;
    width:     100%;
  }

  #cip-thumbs > .carousel-inner div.cip-thumb {
    align-items:    center;
    background:     #F5F5F5;
    display:        flex;
    flex:           1 0 auto;
    flex-direction: column;
    margin:         0;
    max-width:      none;
    transform:      none;
    width:          100px;
  }

  #cip-thumbs > .carousel-inner .carousel-item.static > div.cip-thumb {
    width: 132px;
  }

  #cip-thumbs .cip-thumb.active::after {
    right: 8px;
    width: calc(100% - 16px);
  }

  #cip-thumbs .carousel-inner .carousel-item-end.active,
  #cip-thumbs .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }

  #cip-thumbs .carousel-inner .carousel-item-start.active,
  #cip-thumbs .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }

}

@media(max-width: 494px) {

  #cip-thumbs > .carousel-inner .carousel-item.static > div.cip-thumb {
    width: 136px;
  }

  #cip-thumbs .cip-thumb.active::after {
    right: 16px;
    width: calc(100% - 32px);
  }

  #cip-thumbs .carousel-inner .carousel-item-end.active,
  #cip-thumbs .carousel-inner .carousel-item-next {
    transform: translateX(33.333333%);
  }

  #cip-thumbs .carousel-inner .carousel-item-start.active,
  #cip-thumbs .carousel-inner .carousel-item-prev {
    transform: translateX(-33.333333%);
  }

  #ci-comments-wrapper #ci-comment-items > .ci-comment-item .ci-comment-title {
    flex-direction: column;
  }

  #ci-comments-wrapper #ci-comment-items .ci-comment-title > .ci-comment-author {
    margin-bottom: 2px;
  }

  #ci-comments-wrapper #ci-comment-items .ci-comment-title > .ci-item-rating {
    margin-bottom: 8px;
  }

  #ci-comments-wrapper #ci-add-comment #ci-rating {
    align-items:    start;
    flex-direction: column;
    margin:         12px 14px 8px 0;
  }

  #ci-comments-wrapper #ci-add-comment #ci-rating > p {
    margin: 0 0 2px 0;
  }

}

@media(max-width: 426px) {

  #cip-thumbs .cip-thumb.active::after {
    right: 14px;
    width: calc(100% - 28px);
  }

}

@media(max-width: 415px) {

  #cip-thumbs .carousel-inner .carousel-item-end.active,
  #cip-thumbs .carousel-inner .carousel-item-next {
    transform: translateX(50%);
  }

  #cip-thumbs .carousel-inner .carousel-item-start.active,
  #cip-thumbs .carousel-inner .carousel-item-prev {
    transform: translateX(-50%);
  }

}

#cip-thumbs .carousel-inner .carousel-item-end,
#cip-thumbs .carousel-inner .carousel-item-start {
  transform: translateX(0);
}