.widgets-container {

  margin: 60px 0 30px 0;

}





.widget-title {

  color: var(--heading-color);

  font-size: 20px;

  font-weight: 600;

  padding: 0 0 0 10px;

  margin: 0 0 20px 0;

  border-left: 4px solid var(--accent-color);

}



.widget-item {

  margin-bottom: 30px;

  background-color: color-mix(in srgb, var(--default-color), transparent 98%);

  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

  padding: 30px;

  border-radius: 5px;

}



.widget-item:last-child {

  margin-bottom: 0;

}



.product-categories-widget .category-tree {

  margin-top: 1rem;

}



.product-categories-widget .category-tree .category-item {

  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

  padding: 0.75rem 0;

}



.product-categories-widget .category-tree .category-item:last-child {

  border-bottom: none;

}



.product-categories-widget .category-tree .category-item .category-header {

  cursor: pointer;

  transition: all 0.3s;

}



.product-categories-widget .category-tree .category-item .category-header:hover .category-link {

  color: var(--accent-color);

}



.product-categories-widget .category-tree .category-item .category-header:hover .category-toggle {

  color: var(--accent-color);

}



.product-categories-widget .category-tree .category-item .category-link {

  color: var(--default-color);

  font-weight: 500;

  text-decoration: none;

  transition: color 0.3s;

}



.product-categories-widget .category-tree .category-item .category-toggle {

  display: flex;

  align-items: center;

  justify-content: center;

  color: color-mix(in srgb, var(--default-color), transparent 40%);

  transition: color 0.3s;

}



.product-categories-widget .category-tree .category-item .category-toggle .bi-chevron-up {

  display: none;

}



.product-categories-widget .category-tree .category-item .category-header:not(.collapsed) .category-toggle .bi-chevron-down {

  display: none;

}



.product-categories-widget .category-tree .category-item .category-header:not(.collapsed) .category-toggle .bi-chevron-up {

  display: inline;

}



.product-categories-widget .category-tree .category-item .subcategory-list li {

  padding: 0.5rem 0;

}



.product-categories-widget .category-tree .category-item .subcategory-list li:first-child {

  padding-top: 0.75rem;

}



.product-categories-widget .category-tree .category-item .subcategory-list li:last-child {

  padding-bottom: 0;

}



.product-categories-widget .category-tree .category-item .subcategory-list .subcategory-link {

  color: color-mix(in srgb, var(--default-color), transparent 20%);

  text-decoration: none;

  font-size: 0.95rem;

  transition: color 0.3s;

}



.product-categories-widget .category-tree .category-item .subcategory-list .subcategory-link:hover {

  color: var(--accent-color);

}



@media (max-width: 767.98px) {

  .product-categories-widget .category-tree .category-item {

    padding: 0.625rem 0;

  }



  .product-categories-widget .category-tree .category-item .subcategory-list li {

    padding: 0.4rem 0;

  }

}



/*--------------------------------------------------------------

# Category Header Section

--------------------------------------------------------------*/

.category-header {

  padding-bottom: 0;

}



.category-header .filter-container {

  background-color: var(--surface-color);

  border-radius: 12px;

  padding: 1.75rem;

  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);

  margin-bottom: 2rem;

}



.category-header .filter-container .filter-item {

  margin-bottom: 0.75rem;

}



.category-header .filter-container .filter-item .form-label {

  font-weight: 600;

  font-size: 0.875rem;

  margin-bottom: 0.5rem;

  color: var(--heading-color);

  letter-spacing: 0.01em;

}



.category-header .filter-container .filter-item.search-form .input-group {

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);

  overflow: hidden;

}



.category-header .filter-container .filter-item.search-form .input-group .form-control {

  border-right: none;

  padding: 0.5rem 1rem;

  font-size: 0.95rem;

  height: 44px;

  color: var(--default-color);

  background-color: var(--surface-color);

  border-color: color-mix(in srgb, var(--default-color), transparent 85%);

  border-radius: 8px 0 0 8px;

}



.category-header .filter-container .filter-item.search-form .input-group .form-control:focus {

  border-color: var(--accent-color);

  box-shadow: none;

}



.category-header .filter-container .filter-item.search-form .input-group .form-control::placeholder {

  color: color-mix(in srgb, var(--default-color), transparent 60%);

  font-size: 0.9rem;

}



.category-header .filter-container .filter-item.search-form .input-group .search-btn {

  background-color: var(--accent-color);

  color: var(--contrast-color);

  border: none;

  padding: 0.5rem 1rem;

  transition: all 0.3s ease;

}



.category-header .filter-container .filter-item.search-form .input-group .search-btn:hover {

  background-color: color-mix(in srgb, var(--accent-color), var(--heading-color) 15%);

}



.category-header .filter-container .filter-item.search-form .input-group .search-btn i {

  font-size: 1rem;

}



.category-header .filter-container .filter-item .form-select {

  color: var(--default-color);

  background-color: var(--surface-color);

  font-size: 0.95rem;

  border-color: color-mix(in srgb, var(--default-color), transparent 85%);

  padding: 0.625rem 2.25rem 0.625rem 1rem;

  height: 46px;

  border-radius: 8px;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233690e7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

}



.category-header .filter-container .filter-item .form-select:focus {

  border-color: var(--accent-color);

  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-color), transparent 85%);

}



.category-header .filter-container .filter-item .form-select.form-select-sm {

  height: 38px;

  font-size: 0.85rem;

  padding: 0.4rem 2rem 0.4rem 0.75rem;

}



.category-header .filter-container .filter-item .view-options {

  display: flex;

  gap: 0.5rem;

}



.category-header .filter-container .filter-item .view-options .view-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

  border-radius: 6px;

  background-color: var(--surface-color);

  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);

  color: var(--default-color);

  transition: all 0.3s ease;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);

}



.category-header .filter-container .filter-item .view-options .view-btn:hover {

  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);

  border-color: var(--accent-color);

  color: var(--accent-color);

}



.category-header .filter-container .filter-item .view-options .view-btn.active {

  background-color: var(--accent-color);

  border-color: var(--accent-color);

  color: var(--contrast-color);

  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color), transparent 60%);

}



.category-header .filter-container .filter-item .view-options .view-btn i {

  font-size: 1.1rem;

}



.category-header .filter-container .filter-item .items-per-page {

  min-width: 110px;

}



.category-header .filter-container .active-filters {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 0.75rem;

  margin-top: 1.25rem;

  padding-top: 1.25rem;

  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

}



.category-header .filter-container .active-filters .active-filter-label {

  font-weight: 600;

  font-size: 0.875rem;

  color: var(--heading-color);

  letter-spacing: 0.01em;

}



.category-header .filter-container .active-filters .filter-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  flex: 1;

}



.category-header .filter-container .active-filters .filter-tag {

  display: inline-flex;

  align-items: center;

  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);

  color: var(--accent-color);

  font-size: 0.875rem;

  padding: 0.35rem 0.85rem;

  border-radius: 50px;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);

  font-weight: 500;

}



.category-header .filter-container .active-filters .filter-tag .filter-remove {

  background: none;

  border: none;

  color: var(--accent-color);

  margin-left: 0.35rem;

  padding: 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.3s ease;

  width: 20px;

  height: 20px;

  border-radius: 50%;

}



.category-header .filter-container .active-filters .filter-tag .filter-remove:hover {

  color: color-mix(in srgb, var(--accent-color), var(--heading-color) 30%);

  background-color: color-mix(in srgb, var(--accent-color), transparent 80%);

  transform: scale(1.1);

}



.category-header .filter-container .active-filters .clear-all-btn {

  background: none;

  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);

  color: var(--accent-color);

  font-size: 0.875rem;

  font-weight: 600;

  padding: 0.35rem 0.85rem;

  cursor: pointer;

  transition: all 0.3s ease;

  margin-left: auto;

  border-radius: 50px;

}



.category-header .filter-container .active-filters .clear-all-btn:hover {

  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);

  color: color-mix(in srgb, var(--accent-color), var(--heading-color) 15%);

  border-color: var(--accent-color);

}



@media (max-width: 767.98px) {

  .category-header .filter-container {

    padding: 1rem;

  }



  .category-header .filter-container .active-filters {

    flex-direction: column;

    align-items: flex-start;

  }



  .category-header .filter-container .active-filters .filter-tags {

    width: 100%;

  }



  .category-header .filter-container .active-filters .clear-all-btn {

    margin-left: 0;

    margin-top: 0.5rem;

  }

}



/*--------------------------------------------------------------

# Category Product List Section

--------------------------------------------------------------*/

.category-product-list {

  padding-top: 30px;

  padding-bottom: 60px;

}



.category-product-list .product-card {

  position: relative;

  background: var(--surface-color);

  border-radius: 12px;

  overflow: hidden;

  transition: transform 0.3s ease;

}



.category-product-list .product-card:hover {

  transform: translateY(-4px);

}



.category-product-list .product-card:hover .product-overlay {

  opacity: 1;

  visibility: visible;

}



.category-product-list .product-card:hover .hover-image {

  transform: scale(1);

  opacity: 1;

}



.category-product-list .product-card:hover .main-image {

  transform: scale(1.1);

  opacity: 0;

}



.category-product-list .product-image {

  position: relative;

  padding-top: 85%;

  background: color-mix(in srgb, var(--surface-color), transparent 97%);

  overflow: hidden;

}



.category-product-list .product-image img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: all 0.5s ease;

}



.category-product-list .product-image .main-image {

  transform: scale(1);

  opacity: 1;

}



.category-product-list .product-image .hover-image {

  transform: scale(1.1);

  opacity: 0;

}



.category-product-list .product-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: color-mix(in srgb, var(--background-color), transparent 75%);

  opacity: 0;

  visibility: hidden;

  transition: all 0.3s ease;

}



.category-product-list .product-actions {

  position: absolute;

  right: 1rem;

  top: 50%;

  transform: translateY(-50%);

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}



.category-product-list .product-actions .action-btn {

  width: 3rem;

  height: 3rem;

  border-radius: 50%;

  background: var(--surface-color);

  border: none;

  color: var(--accent-color);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

  transform: translateX(20px);

  animation: slideIn 0.3s ease forwards;

  opacity: 0;

}



.category-product-list .product-actions .action-btn:nth-child(2) {

  animation-delay: 0.1s;

}



.category-product-list .product-actions .action-btn:hover {

  background: var(--accent-color);

  color: var(--contrast-color);

  transform: translateY(-2px);

}



.category-product-list .product-actions .action-btn i {

  font-size: 1.25rem;

}



.category-product-list .product-badge {

  position: absolute;

  top: 1rem;

  left: 1rem;

  padding: 0.35rem 0.75rem;

  border-radius: 6px;

  font-size: 0.875rem;

  font-weight: 500;

  text-transform: uppercase;

  z-index: 1;

}



.category-product-list .product-badge.new {

  background: var(--accent-color);

  color: var(--contrast-color);

}



.category-product-list .product-badge.sale {

  background: #ffa007;

  color: var(--contrast-color);

}



.category-product-list .product-details {

  padding: 1.5rem;

  background: var(--surface-color);

}



.category-product-list .product-category {

  font-size: 0.875rem;

  color: color-mix(in srgb, var(--default-color), transparent 40%);

  margin-bottom: 0.5rem;

}



.category-product-list .product-title {

  font-size: 1.125rem;

  margin-bottom: 1rem;

}



.category-product-list .product-title a {

  color: var(--heading-color);

  text-decoration: none;

  transition: color 0.3s ease;

}



.category-product-list .product-title a:hover {

  color: var(--accent-color);

}



.category-product-list .product-meta {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.category-product-list .product-price {

  font-weight: 600;

  font-size: 1.325rem;

  color: var(--accent-color);

  display: flex;

  gap: 0.5rem;

  align-items: center;

}



.category-product-list .product-price .original-price {

  font-size: 0.875rem;

  color: color-mix(in srgb, var(--default-color), transparent 40%);

  text-decoration: line-through;

  font-weight: normal;

}



.category-product-list .product-rating {

  display: flex;

  align-items: center;

  gap: 0.25rem;

  color: var(--heading-color);

  font-weight: 500;

}



.category-product-list .product-rating i {

  color: #ffc107;

  margin-right: 0.25rem;

}



.category-product-list .product-rating span {

  color: color-mix(in srgb, var(--default-color), transparent 40%);

  font-size: 0.875rem;

  font-weight: normal;

}



@keyframes slideIn {

  to {

    transform: translateX(0);

    opacity: 1;

  }

}



@media (max-width: 991.98px) {

  .category-product-list .product-image {

    padding-top: 100%;

  }



  .category-product-list .product-details {

    padding: 1.25rem;

  }



  .category-product-list .product-title {

    font-size: 1rem;

    margin-bottom: 0.75rem;

  }



  .category-product-list .product-price {

    font-size: 1rem;

  }



  .category-product-list .product-actions .action-btn {

    width: 2.5rem;

    height: 2.5rem;

  }



  .category-product-list .product-actions .action-btn i {

    font-size: 1.125rem;

  }

}





/*--------------------------------------------------------------

# Category Pagination Section

--------------------------------------------------------------*/

.category-pagination {

  padding-top: 0;

}



.category-pagination nav {

  position: relative;

}



.category-pagination ul {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 0;

  margin: 0;

  list-style: none;

}



.category-pagination li {

  margin: 0;

  transition: all 0.3s ease-in-out;

}



.category-pagination li.ellipsis {

  color: color-mix(in srgb, var(--default-color), transparent 40%);

  padding: 8px 16px;

  user-select: none;

}



.category-pagination li a {

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 40px;

  height: 40px;

  padding: 8px 16px;

  color: var(--default-color);

  background-color: var(--surface-color);

  border-radius: 8px;

  text-decoration: none;

  transition: all 0.3s ease-in-out;

  box-shadow: 0 2px 4px color-mix(in srgb, var(--default-color), transparent 90%);

}



.category-pagination li a.active {

  background-color: var(--accent-color);

  color: var(--contrast-color);

  transform: translateY(-2px);

  box-shadow: 0 4px 8px color-mix(in srgb, var(--accent-color), transparent 70%);

}



.category-pagination li a:hover:not(.active) {

  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);

  transform: translateY(-1px);

  box-shadow: 0 3px 6px color-mix(in srgb, var(--default-color), transparent 85%);

}



.category-pagination li a i {

  font-size: 14px;

}



.category-pagination li a span {

  margin: 0 4px;

}



@media (max-width: 575px) {

  .category-pagination ul {

    gap: 4px;

  }



  .category-pagination li a {

    min-width: 36px;

    height: 36px;

    padding: 8px 12px;

    font-size: 14px;

  }

}







/*--------------------------------------------------------------

# Product Details Section

--------------------------------------------------------------*/

.product-details .product-gallery .main-showcase {

  position: relative;

  margin-bottom: 1.5rem;

  border-radius: 16px;

  overflow: hidden;

  background: linear-gradient(145deg, var(--surface-color), color-mix(in srgb, var(--surface-color), #f8f9fa 50%));

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

}



.product-details .product-gallery .main-showcase .image-zoom-container {

  position: relative;

  aspect-ratio: 1;

  overflow: hidden;

}



.product-details .product-gallery .main-showcase .image-zoom-container .main-product-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;

  cursor: crosshair;

}



.product-details .product-gallery .main-showcase .image-zoom-container .main-product-image:hover {

  transform: scale(1.05);

}



.product-details .product-gallery .main-showcase .image-navigation {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  transform: translateY(-50%);

  display: flex;

  justify-content: space-between;

  padding: 0 1rem;

  opacity: 0;

  transition: opacity 0.3s ease;

}



.product-details .product-gallery .main-showcase .image-navigation .nav-arrow {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.95);

  border: none;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

  color: var(--heading-color);

  transition: all 0.3s ease;

}



.product-details .product-gallery .main-showcase .image-navigation .nav-arrow:hover {

  background: var(--accent-color);

  color: var(--contrast-color);

  transform: scale(1.1);

}



.product-details .product-gallery .main-showcase .image-navigation .nav-arrow i {

  font-size: 1.25rem;

}



.product-details .product-gallery .main-showcase:hover .image-navigation {

  opacity: 1;

}



.product-details .product-gallery .thumbnail-grid {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 0.75rem;

}



@media (max-width: 768px) {

  .product-details .product-gallery .thumbnail-grid {

    grid-template-columns: repeat(4, 1fr);

  }

}



.product-details .product-gallery .thumbnail-grid .thumbnail-wrapper {

  aspect-ratio: 1;

  border-radius: 12px;

  overflow: hidden;

  border: 2px solid transparent;

  cursor: pointer;

  transition: all 0.3s ease;

  background: var(--surface-color);

}



.product-details .product-gallery .thumbnail-grid .thumbnail-wrapper:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);

}



.product-details .product-gallery .thumbnail-grid .thumbnail-wrapper.active {

  border-color: var(--accent-color);

  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color), transparent 70%);

}



.product-details .product-gallery .thumbnail-grid .thumbnail-wrapper img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.product-details .product-details {

  padding: 0 1rem;

}



@media (min-width: 992px) {

  .product-details .product-details {

    padding: 0 1.5rem;

  }

}



.product-details .product-details .product-badge-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 1rem;

}



.product-details .product-details .product-badge-container .badge-category {

  display: inline-block;

  padding: 0.5rem 1rem;

  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 20%));

  color: var(--contrast-color);

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  border-radius: 20px;

}



.product-details .product-details .product-badge-container .rating-group {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.product-details .product-details .product-badge-container .rating-group .stars {

  display: flex;

}



.product-details .product-details .product-badge-container .rating-group .stars i {

  color: #ffd700;

  font-size: 1rem;

  margin-right: 1px;

}



.product-details .product-details .product-badge-container .rating-group .review-text {

  font-size: 0.875rem;

  color: color-mix(in srgb, var(--default-color), transparent 40%);

}



.product-details .product-details .product-name {

  font-size: 1.875rem;

  font-weight: 700;

  line-height: 1.3;

  margin-bottom: 1.5rem;

  color: var(--heading-color);

}



@media (min-width: 768px) {

  .product-details .product-details .product-name {

    font-size: 2.25rem;

  }

}



.product-details .product-details .pricing-section {

  margin-bottom: 1.5rem;

}



.product-details .product-details .pricing-section .price-display {

  display: flex;

  align-items: baseline;

  gap: 1rem;

  margin-bottom: 0.5rem;

}



.product-details .product-details .pricing-section .price-display .sale-price {

  font-size: 2rem;

  font-weight: 700;

  color: var(--accent-color);

}



.product-details .product-details .pricing-section .price-display .regular-price {

  font-size: 1.25rem;

  text-decoration: line-through;

  color: color-mix(in srgb, var(--default-color), transparent 50%);

}



.product-details .product-details .pricing-section .savings-info {

  display: flex;

  align-items: center;

  gap: 0.75rem;

}



.product-details .product-details .pricing-section .savings-info .save-amount {

  color: #28a745;

  font-weight: 600;

  font-size: 0.875rem;

}



.product-details .product-details .pricing-section .savings-info .discount-percent {

  background: linear-gradient(135deg, #dc3545, #a72024);

  color: var(--contrast-color);

  padding: 0.25rem 0.5rem;

  border-radius: 12px;

  font-size: 0.75rem;

  font-weight: 600;

}



.product-details .product-details .product-description {

  margin-bottom: 1.5rem;

}



.product-details .product-details .product-description p {

  color: color-mix(in srgb, var(--default-color), transparent 20%);

  line-height: 1.6;

  font-size: 1rem;

}



.product-details .product-details .availability-status {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 1rem;

  background: linear-gradient(135deg, color-mix(in srgb, #28a745, transparent 90%), color-mix(in srgb, #28a745, transparent 95%));

  border-radius: 12px;

  margin-bottom: 2rem;

  border: 1px solid color-mix(in srgb, #28a745, transparent 80%);

}



.product-details .product-details .availability-status .stock-indicator {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.product-details .product-details .availability-status .stock-indicator i {

  color: #28a745;

  font-size: 1.125rem;

}



.product-details .product-details .availability-status .stock-indicator .stock-text {

  font-weight: 600;

  color: var(--heading-color);

}



.product-details .product-details .availability-status .quantity-left {

  font-size: 0.875rem;

  color: color-mix(in srgb, var(--default-color), transparent 30%);

}



.product-details .product-details .variant-section {

  margin-bottom: 2rem;

}



.product-details .product-details .variant-section .color-selection .variant-label {

  display: block;

  font-weight: 600;

  color: var(--heading-color);

  margin-bottom: 0.75rem;

}



.product-details .product-details .variant-section .color-selection .color-grid {

  display: flex;

  gap: 0.75rem;

  margin-bottom: 0.75rem;

}



.product-details .product-details .variant-section .color-selection .color-grid .color-chip {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  cursor: pointer;

  position: relative;

  border: 2px solid transparent;

  transition: all 0.3s ease;

}



.product-details .product-details .variant-section .color-selection .color-grid .color-chip:hover {

  transform: scale(1.15);

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

}



.product-details .product-details .variant-section .color-selection .color-grid .color-chip.active {

  border-color: var(--contrast-color);

  transform: scale(1.1);

  box-shadow: 0 0 0 3px var(--accent-color);

}



.product-details .product-details .variant-section .color-selection .color-grid .color-chip.active .selection-check {

  opacity: 1;

}



.product-details .product-details .variant-section .color-selection .color-grid .color-chip .selection-check {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  color: var(--contrast-color);

  font-size: 1rem;

  opacity: 0;

  transition: opacity 0.3s ease;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

}



.product-details .product-details .variant-section .color-selection .selected-variant {

  font-size: 0.875rem;

  color: color-mix(in srgb, var(--default-color), transparent 30%);

}



.product-details .product-details .variant-section .color-selection .selected-variant span {

  font-weight: 600;

  color: var(--heading-color);

}



.product-details .product-details .purchase-section {

  margin-bottom: 2rem;

}



.product-details .product-details .purchase-section .quantity-control {

  display: flex;

  align-items: center;

  gap: 1rem;

  margin-bottom: 1.5rem;

}



.product-details .product-details .purchase-section .quantity-control .control-label {

  font-weight: 600;

  color: var(--heading-color);

  margin: 0;

}



.product-details .product-details .purchase-section .quantity-control .quantity-selector {

  display: flex;

  align-items: center;

  background: var(--surface-color);

  border-radius: 12px;

  border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);

  overflow: hidden;

}



.product-details .product-details .purchase-section .quantity-control .quantity-selector .quantity-btn {

  width: 40px;

  height: 40px;

  background: none;

  border: none;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--heading-color);

  transition: all 0.3s ease;

  cursor: pointer;

}



.product-details .product-details .purchase-section .quantity-control .quantity-selector .quantity-btn:hover {

  background: color-mix(in srgb, var(--accent-color), transparent 90%);

  color: var(--accent-color);

}



.product-details .product-details .purchase-section .quantity-control .quantity-selector .quantity-btn i {

  font-size: 1rem;

}



.product-details .product-details .purchase-section .quantity-control .quantity-selector .quantity-input {

  width: 60px;

  height: 40px;

  text-align: center;

  border: none;

  background: none;

  color: var(--heading-color);

  font-weight: 600;

}



.product-details .product-details .purchase-section .quantity-control .quantity-selector .quantity-input:focus {

  outline: none;

}



.product-details .product-details .purchase-section .action-buttons {

  display: flex;

  gap: 0.75rem;

}



@media (max-width: 576px) {

  .product-details .product-details .purchase-section .action-buttons {

    flex-direction: column;

  }

}



.product-details .product-details .purchase-section .action-buttons .btn {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  padding: 0.875rem 1.5rem;

  border-radius: 12px;

  font-weight: 600;

  font-size: 0.95rem;

  transition: all 0.3s ease;

  border: 2px solid transparent;

}



.product-details .product-details .purchase-section .action-buttons .btn.primary-action {

  flex: 2;

  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 15%));

  color: var(--contrast-color);

}



.product-details .product-details .purchase-section .action-buttons .btn.primary-action:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 60%);

}



.product-details .product-details .purchase-section .action-buttons .btn.secondary-action {

  flex: 2;

  background: var(--surface-color);

  color: var(--accent-color);

  border-color: var(--accent-color);

}



.product-details .product-details .purchase-section .action-buttons .btn.secondary-action:hover {

  background: var(--accent-color);

  color: var(--contrast-color);

  transform: translateY(-2px);

}



.product-details .product-details .purchase-section .action-buttons .btn.icon-action {

  width: 50px;

  padding: 0.875rem;

  background: var(--surface-color);

  color: color-mix(in srgb, var(--default-color), transparent 30%);

  border-color: color-mix(in srgb, var(--default-color), transparent 80%);

}



.product-details .product-details .purchase-section .action-buttons .btn.icon-action:hover {

  background: #dc3545;

  color: var(--contrast-color);

  border-color: #dc3545;

  transform: translateY(-2px);

}



.product-details .product-details .purchase-section .action-buttons .btn.icon-action i {

  font-size: 1.125rem;

}



.product-details .product-details .benefits-list {

  padding: 1.5rem;

  background: var(--surface-color);

  border-radius: 16px;

  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

}



.product-details .product-details .benefits-list .benefit-item {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  margin-bottom: 0.75rem;

}



.product-details .product-details .benefits-list .benefit-item:last-child {

  margin-bottom: 0;

}



.product-details .product-details .benefits-list .benefit-item i {

  color: var(--accent-color);

  font-size: 1.125rem;

  flex-shrink: 0;

}



.product-details .product-details .benefits-list .benefit-item span {

  font-size: 0.875rem;

  color: color-mix(in srgb, var(--default-color), transparent 20%);

}



.product-details .info-tabs-container {

  margin-top: 3rem;

}



.product-details .info-tabs-container .tabs-navigation {

  display: flex;

  background: var(--surface-color);

  border-radius: 16px;

  padding: 0.5rem;

  margin-bottom: 2rem;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

}



.product-details .info-tabs-container .tabs-navigation .nav-link {

  flex: 1;

  padding: 1rem 1.5rem;

  background: none;

  border: none;

  border-radius: 12px;

  font-weight: 600;

  color: color-mix(in srgb, var(--default-color), transparent 40%);

  transition: all 0.3s ease;

  cursor: pointer;

}



.product-details .info-tabs-container .tabs-navigation .nav-link:hover {

  color: var(--accent-color);

}



.product-details .info-tabs-container .tabs-navigation .nav-link.active {

  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 15%));

  color: var(--contrast-color);

  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 60%);

}



.product-details .info-tabs-container .tab-content .tab-pane {

  padding: 2rem 0;

}



.product-details .info-tabs-container .overview-content .content-section h3 {

  color: var(--heading-color);

  font-size: 1.5rem;

  margin-bottom: 1rem;

  font-weight: 700;

}



.product-details .info-tabs-container .overview-content .content-section h4 {

  color: var(--heading-color);

  font-size: 1.25rem;

  margin: 2rem 0 1rem;

  font-weight: 600;

}



.product-details .info-tabs-container .overview-content .content-section p {

  color: color-mix(in srgb, var(--default-color), transparent 20%);

  line-height: 1.6;

  margin-bottom: 1.5rem;

}



.product-details .info-tabs-container .overview-content .highlights-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 1.5rem;

  margin-top: 1.5rem;

}



.product-details .info-tabs-container .overview-content .highlights-grid .highlight-card {

  padding: 1.5rem;

  background: var(--surface-color);

  border-radius: 16px;

  text-align: center;

  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

  transition: all 0.3s ease;

}



.product-details .info-tabs-container .overview-content .highlights-grid .highlight-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);

}



.product-details .info-tabs-container .overview-content .highlights-grid .highlight-card i {

  font-size: 2.5rem;

  color: var(--accent-color);

  margin-bottom: 1rem;

}



.product-details .info-tabs-container .overview-content .highlights-grid .highlight-card h5 {

  color: var(--heading-color);

  font-weight: 600;

  margin-bottom: 0.5rem;

}



.product-details .info-tabs-container .overview-content .highlights-grid .highlight-card p {

  color: color-mix(in srgb, var(--default-color), transparent 30%);

  font-size: 0.875rem;

  margin: 0;

}



.product-details .info-tabs-container .overview-content .package-contents {

  padding: 2rem;

  background: linear-gradient(135deg, var(--surface-color), color-mix(in srgb, var(--surface-color), #f8f9fa 50%));

  border-radius: 16px;

  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

}



.product-details .info-tabs-container .overview-content .package-contents h4 {

  color: var(--heading-color);

  font-weight: 700;

  margin-bottom: 1.5rem;

}



.product-details .info-tabs-container .overview-content .package-contents .contents-list {

  list-style: none;

  padding: 0;

  margin: 0;

}



.product-details .info-tabs-container .overview-content .package-contents .contents-list li {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding: 0.75rem 0;

  color: color-mix(in srgb, var(--default-color), transparent 20%);

}



.product-details .info-tabs-container .overview-content .package-contents .contents-list li i {

  color: #28a745;

  font-size: 1rem;

}



.product-details .info-tabs-container .technical-content .tech-group {

  margin-bottom: 2rem;

}



.product-details .info-tabs-container .technical-content .tech-group h4 {

  color: var(--heading-color);

  font-weight: 700;

  margin-bottom: 1rem;

  padding-bottom: 0.5rem;

  border-bottom: 2px solid var(--accent-color);

}



.product-details .info-tabs-container .technical-content .tech-group .spec-table {

  background: var(--surface-color);

  border-radius: 12px;

  overflow: hidden;

  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

}



.product-details .info-tabs-container .technical-content .tech-group .spec-table .spec-row {

  display: flex;

  padding: 0.875rem 1.25rem;

  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);

}



.product-details .info-tabs-container .technical-content .tech-group .spec-table .spec-row:last-child {

  border-bottom: none;

}



.product-details .info-tabs-container .technical-content .tech-group .spec-table .spec-row .spec-name {

  flex: 1;

  font-weight: 600;

  color: var(--heading-color);

}



.product-details .info-tabs-container .technical-content .tech-group .spec-table .spec-row .spec-value {

  flex: 1;

  color: color-mix(in srgb, var(--default-color), transparent 20%);

  text-align: right;

}



.product-details .info-tabs-container .reviews-content .reviews-header {

  display: flex;

  gap: 3rem;

  margin-bottom: 3rem;

  padding: 2rem;

  background: var(--surface-color);

  border-radius: 16px;

  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

}



@media (max-width: 768px) {

  .product-details .info-tabs-container .reviews-content .reviews-header {

    flex-direction: column;

    gap: 2rem;

  }

}



.product-details .info-tabs-container .reviews-content .reviews-header .rating-overview {

  flex: 1;

}



.product-details .info-tabs-container .reviews-content .reviews-header .rating-overview .average-score {

  text-align: center;

}



.product-details .info-tabs-container .reviews-content .reviews-header .rating-overview .average-score .score-display {

  font-size: 3.5rem;

  font-weight: 700;

  color: var(--heading-color);

  line-height: 1;

  margin-bottom: 0.5rem;

}



.product-details .info-tabs-container .reviews-content .reviews-header .rating-overview .average-score .score-stars {

  margin-bottom: 0.5rem;

}



.product-details .info-tabs-container .reviews-content .reviews-header .rating-overview .average-score .score-stars i {

  color: #ffd700;

  font-size: 1.5rem;

  margin: 0 1px;

}



.product-details .info-tabs-container .reviews-content .reviews-header .rating-overview .average-score .total-reviews {

  color: color-mix(in srgb, var(--default-color), transparent 40%);

  font-size: 0.875rem;

}



.product-details .info-tabs-container .reviews-content .reviews-header .rating-overview .rating-distribution {

  margin-top: 2rem;

}



.product-details .info-tabs-container .reviews-content .reviews-header .rating-overview .rating-distribution .rating-row {

  display: flex;

  align-items: center;

  gap: 1rem;

  margin-bottom: 0.75rem;

}



.product-details .info-tabs-container .reviews-content .reviews-header .rating-overview .rating-distribution .rating-row .stars-label {

  width: 30px;

  font-size: 0.875rem;

  color: color-mix(in srgb, var(--default-color), transparent 30%);

}



.product-details .info-tabs-container .reviews-content .reviews-header .rating-overview .rating-distribution .rating-row .progress-container {

  flex: 1;

  height: 8px;

  background: color-mix(in srgb, var(--default-color), transparent 92%);

  border-radius: 4px;

  overflow: hidden;

}



.product-details .info-tabs-container .reviews-content .reviews-header .rating-overview .rating-distribution .rating-row .progress-container .progress-fill {

  height: 100%;

  background: linear-gradient(90deg, #ffd700, #ffed4e);

  border-radius: 4px;

  transition: width 0.3s ease;

}



.product-details .info-tabs-container .reviews-content .reviews-header .rating-overview .rating-distribution .rating-row .count-label {

  width: 30px;

  text-align: right;

  font-size: 0.875rem;

  color: color-mix(in srgb, var(--default-color), transparent 30%);

}



.product-details .info-tabs-container .reviews-content .reviews-header .write-review-cta {

  flex: 1;

  text-align: center;

}



.product-details .info-tabs-container .reviews-content .reviews-header .write-review-cta h4 {

  color: var(--heading-color);

  font-weight: 700;

  margin-bottom: 0.5rem;

}



.product-details .info-tabs-container .reviews-content .reviews-header .write-review-cta p {

  color: color-mix(in srgb, var(--default-color), transparent 30%);

  margin-bottom: 1.5rem;

}



.product-details .info-tabs-container .reviews-content .reviews-header .write-review-cta .review-btn {

  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 15%));

  color: var(--contrast-color);

  border: none;

  padding: 0.875rem 2rem;

  border-radius: 12px;

  font-weight: 600;

  transition: all 0.3s ease;

}



.product-details .info-tabs-container .reviews-content .reviews-header .write-review-cta .review-btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 60%);

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card {

  background: var(--surface-color);

  border-radius: 16px;

  padding: 2rem;

  margin-bottom: 1.5rem;

  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

  transition: all 0.3s ease;

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card:hover {

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);

  transform: translateY(-2px);

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card .reviewer-profile {

  display: flex;

  align-items: center;

  gap: 1rem;

  margin-bottom: 1rem;

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card .reviewer-profile .profile-pic {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 80%);

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card .reviewer-profile .profile-details {

  flex: 1;

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card .reviewer-profile .profile-details .customer-name {

  font-weight: 600;

  color: var(--heading-color);

  margin-bottom: 0.25rem;

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card .reviewer-profile .profile-details .review-meta {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card .reviewer-profile .profile-details .review-meta .review-stars i {

  color: #ffd700;

  font-size: 0.875rem;

  margin-right: 1px;

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card .reviewer-profile .profile-details .review-meta .review-date {

  font-size: 0.875rem;

  color: color-mix(in srgb, var(--default-color), transparent 40%);

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card .review-headline {

  color: var(--heading-color);

  font-weight: 600;

  margin-bottom: 1rem;

  font-size: 1.125rem;

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card .review-text p {

  color: color-mix(in srgb, var(--default-color), transparent 20%);

  line-height: 1.6;

  margin-bottom: 1.5rem;

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card .review-actions {

  display: flex;

  gap: 1rem;

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card .review-actions .action-btn {

  background: none;

  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);

  color: color-mix(in srgb, var(--default-color), transparent 30%);

  padding: 0.5rem 1rem;

  border-radius: 8px;

  font-size: 0.875rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

  transition: all 0.3s ease;

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card .review-actions .action-btn:hover {

  border-color: var(--accent-color);

  color: var(--accent-color);

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .load-more-section {

  text-align: center;

  margin-top: 2rem;

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .load-more-section .load-more-reviews {

  background: var(--surface-color);

  border: 2px solid var(--accent-color);

  color: var(--accent-color);

  padding: 0.875rem 2rem;

  border-radius: 12px;

  font-weight: 600;

  transition: all 0.3s ease;

}



.product-details .info-tabs-container .reviews-content .customer-reviews-list .load-more-section .load-more-reviews:hover {

  background: var(--accent-color);

  color: var(--contrast-color);

}



.product-details .drift-zoom-pane {

  background: var(--surface-color);

  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);

  border-radius: 12px;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);

}



.product-details .drift-zoom-pane.drift-opening {

  animation: driftFadeIn 200ms ease-out;

}



.product-details .drift-zoom-pane.drift-closing {

  animation: driftFadeOut 200ms ease-in;

}



@keyframes driftFadeIn {

  0% {

    transform: scale(0.9);

    opacity: 0;

  }



  100% {

    transform: scale(1);

    opacity: 1;

  }

}



@keyframes driftFadeOut {

  0% {

    transform: scale(1);

    opacity: 1;

  }



  100% {

    transform: scale(0.9);

    opacity: 0;

  }

}