/* ── Categories Section ── */

.categories-section {

  padding: 40px 0 60px;

  background: var(--gray-bg);

  margin-top: 32px;

}



.categories-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 24px;

}



.categories-header h2 {

  font-size: 22px;

  font-weight: 700;

  color: var(--text-dark);

}



.categories-header__actions {

  display: flex;

  align-items: center;

  gap: 12px;

}



.categories-nav-btn {

  width: 36px;

  height: 36px;

  border: 1px solid #d1d5db;

  background: var(--white);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  color: var(--text-dark);

  font-size: 14px;

  transition: background 0.2s, border-color 0.2s;

}



.categories-nav-btn:hover {

  background: var(--blue-mid);

  border-color: var(--blue-mid);

  color: var(--white);

}



.categories-view-all {

  color: var(--white);

  background: black;

  font-size: 14px;

  font-weight: 600;

  border-radius: 25px;

  padding: 8px 18px;

  transition: background 0.2s, color 0.2s;

  border: none;

  display: inline-block;

  cursor: pointer;

}



.categories-view-all:hover {

  background: var(--blue-dark);

  color: var(--white);

  text-decoration: underline;

}



.categories-track-wrapper {

  overflow: hidden;

}



.categories-track {

  display: flex;

  gap: 20px;

  overflow-x: auto;

  scroll-behavior: smooth;

  scrollbar-width: none;

  padding: 4px 0;

}



.categories-track::-webkit-scrollbar {

  display: none;

}



.category-card {

  flex: 0 0 140px;

  text-align: center;

  cursor: pointer;

  transition: transform 0.2s;

}



.category-card:hover {

  transform: translateY(-4px);

}



.category-card__img {

  width: 140px;

  height: 140px;

  background: var(--gray-card);

  border-radius: var(--radius);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  margin-bottom: 10px;

  box-shadow: var(--shadow);

}



.category-card__img img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.category-card__icon {

  font-size: 48px;

  color: var(--blue-mid);

}



.category-card__name {

  font-size: 13px;

  font-weight: 600;

  color: var(--text-dark);

}



/* ── Products Section ── */

.products-section {

  padding: 48px 0 64px;

  background: var(--white);

}



.section-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 28px;

}



.section-header h2 {

  font-size: 22px;

  font-weight: 700;

  color: var(--text-dark);

}



.section-view-all {

  color: var(--white);

  background: #000;

  font-size: 14px;

  font-weight: 600;

  border-radius: 25px;

  padding: 8px 18px;

  transition: background 0.2s;

}



.section-view-all:hover {

  background: var(--blue-dark);

}



.products-grid {

  display: grid;

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

  gap: 16px;

}



.product-card {

  background: var(--white);

  border: none;

  border-radius: var(--radius);

  overflow: hidden;

  transition: transform 0.2s;

  display: flex;

  flex-direction: column;

}



.product-card:hover {

  transform: translateY(-4px);

}



.product-card__img {

  position: relative;

  background: #fff;

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

  aspect-ratio: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  padding: 0;

  width: 100%;

  border: 1px solid #e8edf3;

  border-radius: var(--radius);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.product-card__img img {

  width: 90%;

  height: 90%;

  object-fit: cover;

  transition: transform 0.3s;

}



.product-card:hover .product-card__img img {

  transform: scale(1.05);

}



.product-card__placeholder {

  font-size: 48px;

  color: #c5cdd8;

}



.product-card__badge {

  position: absolute;

  top: 10px;

  left: 10px;

  background: var(--yellow);

  color: var(--text-dark);

  font-size: 11px;

  font-weight: 700;

  padding: 4px 10px;

  border-radius: 4px;

  z-index: 2;

}



.product-card__badge--discount {

  background: #012AC4;

  color: var(--white);

}



.product-card__badge--right {

  left: auto;

  right: 10px;

}



.product-card__badge--out {

  background: #012AC4;

  color: var(--white);

}



.product-card__body {

  padding: 10px 4px 0;

  display: flex;

  flex-direction: column;

  flex: 1;

  gap: 4px;

}



.product-card__title {

  font-size: 13px;

  font-weight: 600;

  color: var(--text-dark);

  line-height: 1.4;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.product-card__prices {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}



.product-card__actual-price {

  font-size: 13px;

  font-weight: 500;

  color: var(--text-muted);

  text-decoration: line-through;

}



.product-card__price {

  font-size: 15px;

  font-weight: 700;

  color: #FF472D;



.products-empty {

  grid-column: 1 / -1;

  text-align: center;

  color: var(--text-muted);

  padding: 40px 0;

  font-size: 15px;

}



/* ── Product Page ── */

.product-page {

  padding-top: 32px;

}



.product-page-categories {

  margin-top: 24px;

  margin-bottom: 0;

}



.category-card--filter {

  border: none;

  background: none;

  padding: 0;

  font: inherit;

  cursor: pointer;

}



.category-card--filter.active .category-card__img {

  border: 2px solid var(--blue-mid);

  box-shadow: 0 0 0 2px rgba(26, 79, 160, 0.15);

}



.category-card--filter.active .category-card__name {

  color: var(--blue-mid);

}



.product-page__layout {

  display: grid;

  grid-template-columns: 260px 1fr;

  gap: 32px;

  align-items: start;

}



.product-sidebar {

  background: var(--white);

  border: 1px solid #e8edf3;

  border-radius: var(--radius);

  padding: 20px;

  position: sticky;

  top: 20px;

}



.product-sidebar__header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 20px;

  padding-bottom: 14px;

  border-bottom: 1px solid #e8edf3;

}



.product-sidebar__header h3 {

  font-size: 16px;

  font-weight: 700;

  color: var(--text-dark);

}



.product-sidebar__clear {

  background: none;

  border: none;

  color: var(--blue-mid);

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

  padding: 0;

}



.product-sidebar__clear:hover {

  text-decoration: underline;

}



.product-sidebar__group {

  margin-bottom: 20px;

}



.product-sidebar__label {

  display: block;

  font-size: 13px;

  font-weight: 700;

  color: var(--text-dark);

  margin-bottom: 10px;

}



.product-sidebar__input,

.product-sidebar__select {

  width: 100%;

  padding: 10px 12px;

  border: 1px solid #e8edf3;

  border-radius: 8px;

  font-size: 14px;

  outline: none;

  transition: border-color 0.2s;

}



.product-sidebar__input:focus,

.product-sidebar__select:focus {

  border-color: var(--blue-mid);

}



.product-sidebar__options {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.product-sidebar__check {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 13px;

  color: var(--text-muted);

  cursor: pointer;

}



.product-sidebar__check input {

  accent-color: var(--blue-mid);

  cursor: pointer;

}



.product-sidebar__check span {

  line-height: 1.3;

}



.product-sidebar__check--toggle {

  font-weight: 600;

  color: var(--text-dark);

}



.product-page__main {

  min-width: 0;

}



.product-page__count {

  font-size: 14px;

  color: var(--text-muted);

}



.product-filters {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 28px;

}



.product-filter-btn {

  padding: 8px 18px;

  border: 1px solid #e8edf3;

  background: var(--white);

  border-radius: 25px;

  font-size: 13px;

  font-weight: 600;

  color: var(--text-dark);

  cursor: pointer;

  transition: background 0.2s, color 0.2s, border-color 0.2s;

}



.product-filter-btn:hover,

.product-filter-btn.active {

  background: var(--blue-mid);

  border-color: var(--blue-mid);

  color: var(--white);

}