/* Updated: 21-Dec-2025 - 3 Column Layout */
body{
  position: relative;
}

/* Stoğa Gelince Haber Ver Butonu */
.stock-notify-btn {
  background: #3fcb30;
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.stock-notify-btn:hover {
  background: #36b528;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(63, 203, 48, 0.3);
}

.stock-notify-btn:active {
  transform: translateY(0);
}

.stock-notify-btn.loading {
  background: #95d88f;
  cursor: not-allowed;
  pointer-events: none;
}

.stock-notify-btn.success {
  background: #4caf50;
}

.stock-notify-btn.already-subscribed {
  background: #6c757d;
  cursor: not-allowed;
  opacity: 0.8;
}

.stock-notify-btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.8;
}

.stock-notify-btn.already-subscribed:hover {
  background: #6c757d;
  transform: none;
  box-shadow: none;
}

.stock-notify-info {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.stock-notify-info i {
  font-size: 13px;
  color: #3fcb30;
}

/* Mobilde sabit alt bar için içeriğe padding ekle */
@media screen and (max-width: 991px) {
  main {
    padding-bottom: 80px !important;
  }
  
  .stock-notify-btn {
    height: 48px;
    font-size: 15px;
  }
  
  .stock-notify-info {
    font-size: 11px;
    margin-top: 6px;
  }
  
  /* Product title altındaki quantity container'ı mobilde gizle */
  .count-container {
    display: none !important;
  }
  
  /* Mobil Quantity Container */
  .mobile-qty-wrapper {
    flex-shrink: 0;
  }
  
  .mobile-quantity-controls {
    display: flex;
    align-items: center;
    gap: 0;
  }
  
  #bottom-shop .qty-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
    border: 1px solid #959595 !important;
  }
  
  #bottom-shop .qty-btn:not(.disabled) {
    border: 1px solid #959595 !important;
  }
  
  #bottom-shop .qty-count {
    width: 40px;
    height: 36px;
    font-size: 16px;
  }
  
  /* Mobil sepete ekle butonunu yeşil yap */
  #bottom-shop .add-to-card-btn {
    background: #3fcb30 !important;
    border-color: #3fcb30 !important;
    color: #fff !important;
  }
  
  #bottom-shop .add-to-card-btn.loading {
    background: #f5f5f5 !important;
    border: 1px solid #959595 !important;
    color: #000 !important;
  }
  
  #bottom-shop .add-to-card-btn.added-to-cart {
    background: #f5f5f5 !important;
    border: 1px solid #959595 !important;
    color: #000 !important;
  }
  
  /* Spinner animasyonu */
  #bottom-shop .spinner-icon {
    animation: spin 0.8s linear infinite;
    color: #000;
  }
  
  /* Success Container Butonları */
  #mobile-success-container {
    display: flex;
    width: 100%;
    align-items: center;
  }
  
  .mobile-continue-btn {
    flex: 1;
    height: 48px;
    background: #fff;
    border: 1px solid #959595;
    border-radius: 8px;
    color: #000;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
  }
  
  .mobile-continue-btn:active {
    background: #f5f5f5;
  }
  
  .mobile-goto-cart-btn {
    flex: 1;
    height: 48px;
    background: #3fcb30;
    border: 1px solid #3fcb30;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
  }
  
  .mobile-goto-cart-btn:active {
    background: #35b829;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.img-container {
  max-width: 320px;
  max-height: 320px;
}

.product-detail-title {
  font-weight: 400;
  width: 100%;
  padding-block: 10px;
  font-size: 20px;
}
.product-detail-price {
  font-size: 24px;
  font-weight: 700;
}

.product-detail-info {
  margin-top: 3px;
  font-size: 14px;
}

.product-detail-size {
  margin-top: 3px;
  font-size: 12px;
  color: #d97e1e;
  font-weight: 600;
}

.count-container {
  height: 52px;
  border: 1px solid #cdcdcd;
  margin-block: 10px;
  background: #fafafa;
  background: -moz-linear-gradient(top, #fafafa 0, #f0f0f0 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #fafafa),
    color-stop(100%, #f0f0f0)
  );
  background: -webkit-linear-gradient(top, #fafafa 0, #f0f0f0 100%);
  background: -o-linear-gradient(top, #fafafa 0, #f0f0f0 100%);
  background: -ms-linear-gradient(top, #fafafa 0, #f0f0f0 100%);
  background: linear-gradient(to bottom, #fafafa 0, #f0f0f0 100%);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.count-container p {
  font-size: 17px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.count-container button {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  background-color: var(--white);
  width: 25px;
  height: 25px;
  font-size: 28px;
  color: #c7c7c7 !important;
  border: 1px solid #c7c7c7;
}
.count-container div p {
  background-color: var(--white);
  width: 40px;
  height: 25px;
  text-align: center;
  border: 1px solid #c7c7c7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.properties img:hover {
  filter: invert(60%) sepia(13%) saturate(2193%) hue-rotate(58deg)
    brightness(100%) contrast(82%);
}

.title-box {
  font-size: 14px;
  color: #000;
  background: #f0f0f0;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  padding: 10px 10px 5px;
  margin-block: 10px;
}


.delivery-details p {
  color: grey;
  font-weight: 400;
  font-size: 13px;
  margin-right: 5px;
  margin-bottom: 7px;
}

.product-description {
  color: #747474;
  font-size: 13px;
  line-height: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #c8c8c8;
}

.product-description p {
  margin-bottom: 20px;
}

.product-description b,strong {
  font-weight: bold;
  font-size: 13px;
}

.product-description .subtitle {
  font-weight: bold;
  font-size: 14px;
}

.product-reviews .no-comments {
  font-size: 0.7em;
  margin-right: 10px;
  color: #bfbbb9;
}

.product-reviews .icon-container i,
.user-comments .icon-container i {
  color: rgb(219, 219, 56);
}

.user-comments .line{
  flex: 1;
  height: 12px;
  background: rgba(128, 128, 128, 0.329);
}

.user-comments .line.active{
  background: rgb(219, 219, 56);
}
.user-comments #comment .comment-title{
  font-weight: bolder;
}
.user-comments #comment .comment-desc{
  font-weight: 500;
}
 #useful-container .useful{
 color: var(--card-title);
 font-size: 15px;
}
#useful-container i{
  font-size: 20px;
 }
 #useful-container .useful-text{
 font-size: 13px;
 }





.recommended-products a {
  border: 1px solid #ededed;
  border-radius: 38px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  height: 32px;
  line-height: 47px;
  padding: 10px;
  margin: 0 10px 10px 0;
  box-sizing: border-box;
  box-shadow: 0 1px 3px #00000008;
  transition: color 0.3s, border-color 0.3s;
}

.recommended-products-swiper {
  max-width: 600px;
}
.recommended-products-swiper .swiper-card {
  max-width: 160px;
  height: 232px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e5e5;
  background: var(--white);
  padding: 20px;
  border-radius: 12px;
  vertical-align: top;
}
.recommended-products-swiper .swiper-card img {
  width: 120px;
  height: 120px;
  margin-inline: auto;
}
@media screen and (max-width:768px) {
    .recommended-products-swiper .swiper-card img {
        width: 100px;
        height: 100px;
        margin-inline: auto;
      }  
}

.recommended-products-swiper .swiper-card .title {
  color: var(--card-title);
  margin-top: 2rem;
}

.recommended-products-swiper .swiper-card .price {
  color: var(--card-price);
  font-size: 11px;
}

/* Swiper içindeki product-card için özel stiller */
.recommended-products-swiper .product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 160px !important;
  height: 270px;
  margin: 0;
}

@media screen and (max-width: 830px) {
  .recommended-products-swiper .product-card {
    width: 145px !important;
    height: 260px;
  }
  
  .recommended-products-swiper .product-card img {
    width: 110px;
    height: 130px;
  }
}



  #image-viewer{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

  }

  #image-viewer.active{
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1455;
  }

  .image-viewer-header{
    background-color: var(--header-bg);
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: red;
    padding-left: 10px;
  }
  #image-viewer-button{
    text-align: start;
  }

  #image-viewer.active button{
    padding-top: 0 !important;
    width: 100% !important;
    height: 100%;
  }
  #image-viewer.active button img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100vh !important;
    max-height: 100vh !important;
  }

  #image-viewer #image-viewer-content{
    height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
  }

  .popup-corousel-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0px 10px;
    background: #fff;
    overflow-x: scroll;
    overflow-y: visible;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: thin;
    justify-content: flex-start;
    cursor: grab;
  }
  
  .popup-corousel-bottom.grabbing {
    cursor: grabbing;
    scroll-behavior: auto;
  }
  
  .popup-corousel-bottom.grabbing .popup-slide-item {
    pointer-events: none;
  }
  
  /* Popup pagination - thumbnail serisinin üstünde beyaz alanda */
  #popup-swiper .swiper-pagination {
    position: fixed !important;
    bottom: 165px !important; /* desktop thumbnail yüksekliği (150px + padding) */
    top: auto !important;
    left: 0;
    right: 0;
    background: #fff;
    padding: 10px 0;
    z-index: 1460;
  }
  .popup-corousel-bottom::-webkit-scrollbar {
    height: 4px;
  }
  .popup-corousel-bottom::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
  }

  .popup-slide-item{
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    touch-action: pan-x;
    user-select: none;
    -webkit-user-drag: none;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    border: 3px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
  }
  
  .popup-slide-item.active {
    border-color: #ccc !important;
  }
  .popup-slide-item img, .popup-slide-item video{
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    background: #f5f5f5;
  }
  .popup-slide-item.video-item .popup-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    pointer-events: none;
  }
  
  @media screen and (max-width:768px) {
    .popup-slide-item {
      width: 70px !important;
      height: 70px !important;
      min-width: 70px !important;
      min-height: 70px !important;
      position: relative !important;
      display: block !important;
    }
    .popup-slide-item img, .popup-slide-item video{
      width: 70px !important;
      height: 70px !important;
      min-width: 70px !important;
      min-height: 70px !important;
      position: relative !important;
    }
    .popup-slide-item.video-item {
      position: relative !important;
    }
    .popup-slide-item.video-item .popup-play-icon {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      font-size: 18px;
      z-index: 10;
    }
  }

  /* Popup video dinamik yükseklik */
  .popup-video,
  #popup-swiper .swiper-slide video {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 50px - 160px - 40px); /* header - thumbnails - pagination/margin */
    object-fit: contain;
    background: #000;
  }
  
  /* Popup içindeki görselleri yatay ortala, dikey yukarıdan başlat */
  #popup-swiper {
    height: calc(100vh - 50px - 165px - 35px) !important; /* header - thumbnails - pagination */
  }
  
  #popup-swiper .swiper-wrapper {
    align-items: flex-start !important;
    height: 100% !important;
  }
  
  #popup-swiper .swiper-slide {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 10px !important;
    height: 100% !important;
  }
  
  #popup-swiper .swiper-slide img {
    margin: 0 auto;
    display: block;
    max-height: calc(100vh - 50px - 165px - 50px); /* header - thumbnails - pagination/padding */
    object-fit: contain;
  }
  
  @media screen and (max-width:768px) {
    /* Image viewer content mobil */
    #image-viewer #image-viewer-content {
      position: absolute !important;
      top: 50px !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      height: auto !important;
      overflow: hidden !important;
    }
    
    .popup-video,
    #popup-swiper .swiper-slide video {
      /* Mobilde video */
      width: 100% !important;
      height: auto !important;
      max-height: 100% !important;
      object-fit: contain;
      background: #000;
    }
    
    /* Popup swiper mobil */
    #popup-swiper {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 120px !important; /* thumbnails + pagination için alan */
      height: auto !important;
      overflow: hidden !important;
    }
    
    /* Popup swiper wrapper mobil ayarı */
    #popup-swiper .swiper-wrapper {
      align-items: center;
      height: 100% !important;
    }
    
    #popup-swiper .swiper-slide {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      height: 100% !important;
      padding: 10px !important;
      overflow: hidden !important;
    }
    
    #popup-swiper .swiper-slide img {
      margin: 0 auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    
    /* Popup pagination - thumbnail serisinin hemen üstünde */
    #popup-swiper .swiper-pagination {
      position: fixed !important;
      bottom: 90px !important;
      top: auto !important;
      left: 0;
      right: 0;
      width: 100%;
      padding: 8px 0;
      background: #fff;
      z-index: 1460;
    }
    
    /* Mobilde thumbnail container düzeltmesi */
    .popup-corousel-bottom {
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      height: 90px !important;
      padding: 8px 10px !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      background: #fff !important;
      z-index: 1461 !important;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
    }
    
    /* Mobilde thumbnail boyutları */
    .popup-slide-item {
      width: 70px !important;
      height: 70px !important;
    }
  }

/* ============================================
   PRODUCT PAGE - MAIN SWIPER & IMAGE CONTAINER
   ============================================ */
.img-container {
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  min-height: 390px;
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 768px) {
  .img-container {
    min-height: 360px;
  }
}

#main-swiper {
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 400px;
  position: relative;
}

@media (max-width: 768px) {
  #main-swiper {
    min-height: 370px;
  }
}

#main-swiper .swiper-wrapper {
  max-width: 100% !important;
  align-items: flex-start;
  box-sizing: border-box;
}

#main-swiper .swiper-slide {
  width: 100% !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;
  display: block !important;
  text-align: center;
  background: transparent !important;
  border: none !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

#main-swiper .swiper-slide .slide-image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
  display: inline-block;
  border-radius: 12px;
}

/* ============================================
   VIDEO CARD STYLES
   ============================================ */
.video-card {
  padding: 0 !important;
  padding-top: 10px !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.video-thumbnail-wrapper {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  margin: 0 auto;
}

.video-thumbnail {
  width: auto;
  height: auto;
  max-width: 400px;
  max-height: 350px;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}

@media (max-width: 768px) {
  .video-thumbnail {
    max-width: 100%;
    max-height: 300px;
    min-height: 250px;
    width: auto;
    height: auto;
    object-fit: cover;
  }
  .video-thumbnail-wrapper {
    width: auto;
    max-width: 90%;
    margin-top: 5px;
  }
}

@media screen and (max-width: 480px) {
  .video-card img {
    width: 300px;
    max-height: 315px;
  }
}

.play-icon-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.play-icon-wrapper i {
  font-size: 60px;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.video-card:hover .play-icon-wrapper {
  transform: translate(-50%, -50%) scale(1.15);
}

.video-card:hover .play-icon-wrapper i {
  color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
  .video-thumbnail-wrapper {
    min-height: 280px;
  }
  .video-thumbnail {
    min-height: 280px;
  }
  .play-icon-wrapper i {
    font-size: 50px;
  }
}

/* İlginizi Çekebilir - Mobil düzeltme */
@media screen and (max-width: 768px) {
  #recommended-swiper .product-card {
    width: 100% !important;
    height: auto;
    min-height: 281px;
  }
}

/* ============================================
   DISCOUNT & PRICE STYLES
   ============================================ */
.discount-badge {
  background-color: var(--discount);
  color: var(--white);
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  padding: 5px 10px;
  font-size: 13px;
  font-weight: bold;
}

.old-price-text {
  text-decoration: line-through !important;
  color: #999 !important;
  font-size: 14px;
  position: relative;
}

.price-properties-wrapper {
  display: block;
}

.offer-section {
  width: 100%;
}

.properties-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

/* Sadece Kategori 1 (Luxio) için yan yana düzen */
.price-properties-wrapper.category-luxio {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.price-properties-wrapper.category-luxio .offer-section {
  flex: 1;
  min-width: 200px;
}

@media screen and (max-width: 768px) {
  .price-properties-wrapper.category-luxio {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .price-properties-wrapper.category-luxio .offer-section {
    width: 60%;
    flex: none;
  }
  .price-properties-wrapper.category-luxio .properties-section {
    width: 40%;
    flex: none;
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    padding: 15px 0;
  }
  /* Mobilde sadece hema_free veya tpo_free göster */
  .price-properties-wrapper.category-luxio .properties-section .veganFree,
  .price-properties-wrapper.category-luxio .properties-section .crueltyFree {
    display: none !important;
  }
}

/* ============================================
   QUANTITY CONTROLS
   ============================================ */
.quantity-controls {
  gap: 0;
}

.qty-btn {
  width: 44px;
  height: 44px;
  font-size: 22px;
  font-weight: 700;
  border: 2px solid #333;
  background: #fff;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  outline: none;
}

.qty-btn:first-child {
  border-radius: 8px 0 0 8px;
}

.qty-btn:last-child {
  border-radius: 0 8px 8px 0;
}

.qty-btn:hover:not(.disabled) {
  background: #f5f5f5;
  border-color: #000;
  transform: translateY(-1px);
}

.qty-btn:active:not(.disabled) {
  background: #e8e8e8;
  transform: scale(0.95);
}

.qty-btn.disabled {
  pointer-events: none;
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  background: #fafafa !important;
  border: 1px solid #ddd !important;
  color: #ccc !important;
  font-weight: 400 !important;
}

.qty-count {
  width: 50px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: #fff;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

@media (max-width: 480px) {
  .qty-btn {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }
  .qty-count {
    width: 55px;
    height: 48px;
    font-size: 20px;
  }
}

/* ============================================
   PRODUCT PROPERTIES (VEGAN, HEMA, TPO, CRUELTY)
   ============================================ */
.properties-below {
  gap: 10px;
  padding: 10px 0;
}

.veganFree {
  background: #000;
  -webkit-mask: url(/images/product-propertions.png?v1.0.1) -135px 0px;
  mask: url(/images/product-propertions.png?v1.0.1) -135px 0px;
  height: 55px;
  width: 41px;
}

.hemaFree {
  background: #000;
  -webkit-mask: url(/images/product-propertions.png?v1.0.1) 0px 0px;
  mask: url(/images/product-propertions.png?v1.0.1) 0px 0px;            
  height: 55px;
  width: 51px;
}

.tpoFree {
  background: #000;
  -webkit-mask: url(/images/product-propertions.png?v1.0.1) -190px 0px;
  mask: url(/images/product-propertions.png?v1.0.1) -190px 0px;
  height: 55px;
  width: 51px;
}

.crueltyFree {
  background: #000;
  -webkit-mask: url(/images/product-propertions.png?v1.0.1) 177px 0px;
  mask: url(/images/product-propertions.png?v1.0.1) 177px 0px;
  height: 55px;
  width: 51px;
}

.veganFree:hover { background: #299115; }
.hemaFree:hover { background: #299115; }
.tpoFree:hover { background: #4866ca; }
.crueltyFree:hover { background: #299115; }

/* ============================================
   TAGS STYLES
   ============================================ */
.tags .tagcloud .tag-link {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 20px;
  color: #495057;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.tags .tagcloud .tag-link:hover {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  border-color: #dc3545;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* ============================================
   DESKTOP LAYOUT - 3 SÜTUNLU
   Min 992px ekranlar için
   ============================================ */
@media screen and (min-width: 992px) {
  
  /* Ana container genişliği */
  .product-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 30px;
  }
  
  /* Ana row - 3 sütunlu layout */
  #product-main-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  
  /* Sol sütun - Galeri */
  .desktop-left {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    padding-right: 15px !important;
    align-self: flex-start;
  }
  
  .desktop-left .img-container {
    max-width: 100% !important;
    max-height: none !important;
  }
  
  .desktop-left #main-swiper {
    min-height: 500px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e5e5;
  }
  
  .desktop-left #main-swiper .slide-image {
    max-width: 100% !important;
    max-height: 480px !important;
  }
  
  .desktop-left .video-thumbnail {
    max-width: 100% !important;
    max-height: 450px !important;
  }
  
  /* Orta sütun - Ürün bilgileri */
  .desktop-right {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .desktop-right .price-properties-wrapper {
    background: #fff;
    padding: 0px 10px 0px 0px;
    margin-bottom: 15px;
  }
  
  .desktop-right .product-detail-title {
    font-size: 20px;
    color: #333;
  }
  
  .desktop-right .product-detail-price {
    font-weight: 700;
    color: #000;
  }
  
  .desktop-right .count-container {
    border-radius: 8px;
    margin-bottom: 0;
  }
  
  /* Özellikler düzeni */
  .desktop-right .price-properties-wrapper.category-luxio {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .desktop-right .price-properties-wrapper.category-luxio .offer-section {
    flex: 1;
    min-width: 150px;
  }
  
  .desktop-right .price-properties-wrapper.category-luxio .properties-section {
    display: flex;
    gap: 5px;
    padding: 10px 0;
  }
  
  /* Sağ Sidebar */
  .desktop-sidebar {
    flex: 0 0 16.666% !important;
    max-width: 16.666% !important;
    padding-left: 15px !important;
    align-self: flex-start;
  }
  
  /* Alt bölümler - tam genişlik */
  #product-main-row > .col-md-12:not(.desktop-left):not(.desktop-right):not(.desktop-sidebar),
  #product-main-row > .title-box,
  #product-main-row > div:not(.desktop-left):not(.desktop-right):not(.desktop-sidebar):not(.col-lg-4):not(.col-lg-6):not(.col-lg-2) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Koleksiyon ve benzer ürünler */
  .product-container .title-box {
    margin-top: 30px;
  }
  
  /* Ürün açıklaması */
  .product-description {
    font-size: 15px;
    line-height: 1.7;
  }
}

/* 1400px üzeri ekranlar için */
@media screen and (min-width: 1400px) {
  .product-container {
    max-width: 1400px;
  }
  
  .desktop-left {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
  
  .desktop-right {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  
  .desktop-left #main-swiper .slide-image {
    max-height: 550px !important;
  }
  
  .desktop-right .product-detail-title {
    font-size: 26px;
  }
  
}

/* ============================================
   MAIN SWIPER THUMBNAILS (Masaüstü)
   ============================================ */
.main-thumbnails-wrapper {
  padding: 0 40px;
  position: relative;
}

#thumbsSwiper {
  overflow: hidden;
  padding: 5px 0;
}

#thumbsSwiper .swiper-wrapper {
  display: flex;
  align-items: center;
}

#thumbsSwiper .swiper-slide {
  width: 80px !important;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-thumbnail-item {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  background: #f5f5f5;
}

.main-thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.main-thumbnail-item:hover {
  border-color: #999;
  transform: translateY(-2px);
}

.main-thumbnail-item.active {
  border-color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.main-thumbnail-item.video-thumb .thumb-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* Navigation Arrows */
.thumb-nav-prev,
.thumb-nav-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.thumb-nav-prev {
  left: 0;
}

.thumb-nav-next {
  right: 0;
}

.thumb-nav-prev:hover i,
.thumb-nav-next:hover i {
  transform: scale(1.2);
}

.thumb-nav-prev i,
.thumb-nav-next i {
  font-size: 24px;
  color: #333;
  transition: all 0.2s ease;
}

.thumb-nav-prev.swiper-button-disabled,
.thumb-nav-next.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Mobilde gizle */
@media screen and (max-width: 991px) {
  .main-thumbnails-wrapper {
    display: none !important;
  }
}

/* Image viewer popup - aktif değilken tamamen gizle */
#image-viewer:not(.active) {
  display: none !important;
}

#image-viewer.active {
  display: block !important;
}

/* ============================================
   DESKTOP QUANTITY & BUTTONS YAN YANA
   ============================================ */
/* Mobilde: Alt alta düzen */
.desktop-qty-buttons-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}

.desktop-qty-buttons-wrapper .count-container {
  margin-bottom: 0 !important;
  margin-top: 10px;
}

.desktop-buttons-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Masaüstünde: Yan yana düzen */
@media screen and (min-width: 992px) {
  .desktop-qty-buttons-wrapper {
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 10px;
  }
  
  .desktop-qty-buttons-wrapper .count-container {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 200px !important;
    margin: 0 !important;
  }
  
  .desktop-buttons-container {
    flex: 1 !important;
    flex-direction: row !important;
    gap: 10px !important;
  }
}

/* Mobilde desktop butonları gizle */
@media screen and (max-width: 991px) {
  .desktop-buttons-container {
    display: none !important;
  }
}

.desktop-buttons-container .order-btn {
  display: none; /* Gizle */
}

.desktop-buttons-container .add-to-card-btn {
  flex: 1;
  height: 48px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  background: #3fcb30;
  border: 1px solid #3fcb30;
  color: #fff;
  transition: all 0.2s ease;
}


.desktop-buttons-container .add-to-card-btn.loading {
  background: #f5f5f5 !important;
  border: 1px solid #959595 !important;
  color: #000 !important;
}

.desktop-buttons-container .add-to-card-btn.added-to-cart {
  background: #f5f5f5 !important;
  border: 1px solid #959595 !important;
  color: #000 !important;
  pointer-events: none;
}

.desktop-buttons-container .spinner-icon {
  animation: spin 0.8s linear infinite;
  color: #000;
}

/* ============================================
   DESKTOP KOLEKSIYON LİSTESİ (KOMPAKT)
   ============================================ */
#desktop-collection {
  margin-top: 20px !important;
}

/* Mobilde gizle */
@media screen and (max-width: 991px) {
  #desktop-collection {
    display: none !important;
  }
}

#desktop-collection .desktop-collection-cover {
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#desktop-collection .desktop-collection-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#desktop-collection .desktop-collection-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

#desktop-collection .desktop-collection-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

#desktop-collection .desktop-collection-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  background: #fafafa !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

#desktop-collection .desktop-collection-item:hover {
  background: #fff !important;
  border-color: #ddd !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

#desktop-collection .desktop-collection-item.no-stock {
  opacity: 0.5 !important;
}

#desktop-collection .dc-item-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  flex: 1 !important;
  min-width: 0 !important;
}

#desktop-collection .dc-item-img {
  width: 45px !important;
  height: 45px !important;
  min-width: 45px !important;
  min-height: 45px !important;
  max-width: 45px !important;
  max-height: 45px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 1px solid #eee !important;
}

#desktop-collection .dc-item-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

#desktop-collection .dc-item-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #333 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#desktop-collection .dc-item-price {
  font-size: 12px !important;
  font-weight: 600 !important;
}

#desktop-collection .dc-add-btn {
  flex-shrink: 0 !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #666 !important;
  background: #fff !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

#desktop-collection .dc-add-btn:hover {
  background: #3fcb30 !important;
  border-color: #3fcb30 !important;
  color: #fff !important;
}

/* Stokta Yok Badge - Kompakt */
.out-of-stock-badge-compact {
  flex-shrink: 0 !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #999 !important;
  background: #f5f5f5 !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}

/* 1 sütun için daha dar ekranlar */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  #desktop-collection .desktop-collection-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   SAĞ SIDEBAR STİLLERİ (Masaüstü)
   ============================================ */
.desktop-sidebar {
  top: 20px;
}

.sidebar-box {
  background: #fafafa;
  padding: 15px;
}

.sidebar-section {
  padding: 12px 0;
  border-bottom: 1px solid #e8e8e8;
}

.sidebar-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-section:first-child {
  padding-top: 0;
}

/* Değerlendirme */
.sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.sidebar-rating {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-rating-link {
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 8px;
  padding: 8px;
  margin: -8px;
}

.sidebar-rating-link:hover {
  background: rgba(245, 166, 35, 0.1);
}

.sidebar-rating .rating-stars {
  display: flex;
  gap: 2px;
}

.sidebar-rating .rating-stars i {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.sidebar-rating .rating-stars i.bi-star-fill {
  color: #f5a623;
}

.sidebar-rating .rating-stars i.bi-star {
  color: #ddd;
}

.sidebar-rating-link:hover .rating-stars i {
  transform: scale(1.1);
}

.sidebar-rating .rating-score {
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.sidebar-rating .rating-count {
  font-size: 12px;
  color: #666;
  text-decoration: none;
}

.sidebar-rating-link:hover .rating-count {
  text-decoration: underline;
}

.sidebar-rating .rating-no-review {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  font-style: italic;
}

/* Smooth scroll için */
html {
  scroll-behavior: smooth;
}

/* Teslimat Bilgisi */
.delivery-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.delivery-info > i {
  font-size: 20px;
  color: #17b156;
  margin-top: 2px;
}

.delivery-info > div {
  display: flex;
  flex-direction: column;
}

.delivery-label {
  font-size: 12px;
  color: #666;
}

.delivery-date {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* Ürün Kodu */
.product-code {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

/* Barkod Bilgisi */
.barcode-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.barcode-info i {
  font-size: 20px;
  color: #666;
}

.barcode-info span {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

/* Mağaza Durumu */
.store-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.store-status i {
  font-size: 18px;
  color: #666;
}

.store-status span {
  font-size: 12px;
  font-weight: 600;
  color: #333;
}

/* SachaClub Box */
.sacha-club-box {
  background: #fff;
  border-radius: 8px;
  padding: 12px !important;
  margin-top: 5px;
  border: 1px solid #e8e8e8 !important;
}

.sacha-club-header {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 8px;
}

.sacha-logo {
  font-size: 16px;
  font-weight: 800;
  color: #333;
  letter-spacing: -0.5px;
}

.sacha-club-text {
  font-size: 10px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
}

.sacha-info {
  font-size: 11px;
  color: #666;
  line-height: 1.5;
  margin: 0;
}

.sacha-info strong {
  color: #f5a623;
  font-weight: 700;
}

/* Sidebar Responsive */
@media screen and (max-width: 991px) {
  .desktop-sidebar {
    display: none !important;
  }
}

@media screen and (min-width: 1200px) {
  .sidebar-box {
    padding: 18px;
  }
  
  .sidebar-rating .rating-stars i {
    font-size: 18px;
  }
  
  .sidebar-rating .rating-score {
    font-size: 20px;
  }
  
  .sidebar-rating .rating-no-review {
    font-size: 13px;
  }
  
  .sidebar-rating-link {
    padding: 10px;
    margin: -10px;
  }
}

/* Son Yorum Widget - Masaüstü */
.last-comment-widget {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 16px;
  transition: all 0.3s ease;
}

.last-comment-widget:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.last-comment-widget h5 {
  color: #333;
}

.last-comment-widget .comment-widget-content {
  margin-top: 8px;
}

.last-comment-widget a {
  transition: color 0.2s ease;
}

.last-comment-widget a:hover {
  color: #0056b3 !important;
}

@media screen and (max-width: 991px) {
  .last-comment-widget {
    display: none !important;
  }
}

/* Yorum Yap Butonu */
.yorum-yap-btn {
  background: #28a745;
  border: none;
  color: white;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.yorum-yap-btn:hover {
  background: #218838;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
  color: white;
}

.yorum-yap-btn:active {
  transform: translateY(0);
}

.yorum-yap-btn i {
  font-size: 14px;
}

/* Masaüstü için büyük buton */
.yorum-yap-btn.w-100 {
  padding: 12px 24px;
  font-size: 15px;
}

.yorum-yap-btn.w-100 i {
  font-size: 16px;
}

/* Bilgi mesajları için stil */
.product-reviews p.text-muted a {
  text-decoration: underline;
  font-weight: 600;
}

.product-reviews p.text-muted a:hover {
  color: #0056b3 !important;
}