/* Shop Page Styles – Tri-Star Theme
   Matches Figma node 11:31 (Browse page) */

/* ===== SHOP WRAPPER ===== */
body.wp-theme-tri-star .ts-shop {
  max-width: 1440px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 21px 0 30px !important;
}

/* ===== BREADCRUMB ===== */
body.wp-theme-tri-star .ts-shop__breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  margin-bottom: 20px !important;
}

body.wp-theme-tri-star .ts-shop__breadcrumb a {
  color: #bdc5cd !important;
}

body.wp-theme-tri-star .ts-shop__breadcrumb-sep {
  color: #bdc5cd !important;
}

body.wp-theme-tri-star .ts-shop__breadcrumb-current {
  color: #3a566e !important;
}

/* ===== TWO-COLUMN LAYOUT ===== */
body.wp-theme-tri-star .ts-shop__body {
  display: flex !important;
  gap: 50px !important;
  align-items: flex-start !important;
}

/* ===== SIDEBAR ===== */
body.wp-theme-tri-star .ts-shop__sidebar {
  width: 261px !important;
  flex-shrink: 0 !important;
  background-color: #f56c0b !important;
  border-radius: 5px !important;
  padding: 20px !important;
  position: sticky;
  top: 95px;
}

body.wp-theme-tri-star .ts-shop__sidebar-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
}

body.wp-theme-tri-star .ts-shop__sidebar-heading {
  font-family: "Roboto", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  line-height: normal !important;
}

body.wp-theme-tri-star .ts-shop__sidebar-divider {
  height: 1px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  width: 100% !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* Category item wrapper */
body.wp-theme-tri-star .ts-shop__cat-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
}

body.wp-theme-tri-star .ts-shop__cat-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 220px !important;
}

body.wp-theme-tri-star .ts-shop__cat-link {
  font-family: "Roboto", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.wp-theme-tri-star .ts-shop__cat-link:hover {
  opacity: 0.85 !important;
}

body.wp-theme-tri-star .ts-shop__cat-toggle {
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease !important;
}

body.wp-theme-tri-star .ts-shop__cat-toggle svg {
  width: 24px !important;
  height: 24px !important;
}

body.wp-theme-tri-star
  .ts-shop__cat-item.is-expanded
  > .ts-shop__cat-row
  > .ts-shop__cat-toggle {
  transform: rotate(180deg) !important;
}

/* Subcategory children – hidden by default */
body.wp-theme-tri-star .ts-shop__cat-children {
  display: none !important;
  flex-direction: column !important;
  padding-left: 10px !important;
}

body.wp-theme-tri-star .ts-shop__cat-item.is-expanded > .ts-shop__cat-children {
  display: flex !important;
}

body.wp-theme-tri-star .ts-shop__cat-child {
  font-family: "Roboto", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  line-height: 24px !important;
  white-space: nowrap !important;
}

body.wp-theme-tri-star .ts-shop__cat-child:hover {
  opacity: 0.85 !important;
}

body.wp-theme-tri-star .ts-shop__cat-child.is-current {
  text-decoration: underline !important;
}

body.wp-theme-tri-star .ts-shop__view-all {
  font-family: "Roboto", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: normal !important;
  white-space: nowrap !important;
}

body.wp-theme-tri-star .ts-shop__view-all:hover {
  opacity: 0.85 !important;
}

/* ===== MAIN PRODUCT AREA ===== */
body.wp-theme-tri-star .ts-shop__main {
  width: calc(100% - 311px) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* Heading */
body.wp-theme-tri-star .ts-shop__heading {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body.wp-theme-tri-star .ts-shop__heading-parent {
  font-family: "Roboto", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #3a566e !important;
  line-height: normal !important;
}

body.wp-theme-tri-star .ts-shop__heading-title {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 50px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  color: #3a566e !important;
  line-height: 100% !important;
  letter-spacing: normal !important;
}

/* ===== CONTROLS (count + sort) ===== */
body.wp-theme-tri-star .ts-shop__controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

body.wp-theme-tri-star .ts-shop__count {
  font-family: "Roboto", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #3a566e !important;
  line-height: normal !important;
}

body.wp-theme-tri-star .ts-shop__sort-wrap {
  position: relative !important;
  width: 250px !important;
  height: 50px !important;
}

body.wp-theme-tri-star .ts-shop__sort-icon {
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

body.wp-theme-tri-star .ts-shop__sort-select {
  width: 250px !important;
  height: 50px !important;
  padding: 10px 20px 10px 54px !important;
  border: 1px solid #e3e3e3 !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #3a566e !important;
  line-height: 100% !important;
  cursor: pointer !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

body.wp-theme-tri-star .ts-shop__sort-select:focus {
  border-color: #f56c0b !important;
}

/* ===== PRODUCT GRID ===== */
body.wp-theme-tri-star .ts-shop__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  column-gap: 54px !important;
  row-gap: 20px !important;
}

body.wp-theme-tri-star .ts-shop__product-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 30px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.2s ease !important;
}

body.wp-theme-tri-star .ts-shop__product-card:hover {
  transform: translateY(-4px) !important;
}

body.wp-theme-tri-star .ts-shop__product-image {
  width: 100% !important;
  height: 240px !important;
  border: 0.5px solid #e3e3e3 !important;
  border-radius: 2.5px !important;
  overflow: hidden !important;
}

body.wp-theme-tri-star .ts-shop__product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body.wp-theme-tri-star .ts-shop__product-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body.wp-theme-tri-star .ts-shop__product-name {
  font-family: "Roboto", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #3a566e !important;
  line-height: normal !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

body.wp-theme-tri-star .ts-shop__product-price {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.wp-theme-tri-star .ts-shop__price-current {
  font-family: "Roboto", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #3a566e !important;
  text-transform: uppercase !important;
  line-height: normal !important;
}

body.wp-theme-tri-star .ts-shop__price-original {
  font-family: "Roboto", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #768c9f !important;
  text-decoration: line-through !important;
  text-transform: uppercase !important;
  line-height: normal !important;
}

/* ===== EMPTY STATE ===== */
body.wp-theme-tri-star .ts-shop__empty {
  padding: 80px 0 !important;
  text-align: center !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 18px !important;
  color: #768c9f !important;
}

/* ===== PAGINATION ===== */
body.wp-theme-tri-star .ts-shop__pagination-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 77px !important;
  padding-top: 20px !important;
}

body.wp-theme-tri-star .ts-shop__pagination {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

body.wp-theme-tri-star .ts-shop__page-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #3a566e !important;
  background: #ffffff !important;
  border: 1px solid #f1f1f1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  line-height: normal !important;
  transition:
    background-color 0.15s,
    color 0.15s !important;
}

body.wp-theme-tri-star .ts-shop__page-btn.is-active {
  background-color: #f56c0b !important;
  color: #ffffff !important;
  border-color: #f56c0b !important;
}

body.wp-theme-tri-star .ts-shop__page-btn.is-disabled {
  opacity: 0.4 !important;
  cursor: default !important;
  pointer-events: none !important;
}

body.wp-theme-tri-star
  .ts-shop__page-btn:hover:not(.is-active):not(.is-disabled) {
  background-color: #f9f9f9 !important;
}

body.wp-theme-tri-star .ts-shop__page-ellipsis {
  border: none !important;
  background: transparent !important;
  cursor: default !important;
}

body.wp-theme-tri-star .ts-shop__page-ctrl svg {
  width: 16px !important;
  height: 16px !important;
}

/* Per-page select */
body.wp-theme-tri-star .ts-shop__per-page {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.wp-theme-tri-star .ts-shop__per-page-label {
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #3a566e !important;
  line-height: normal !important;
  white-space: nowrap !important;
}

body.wp-theme-tri-star .ts-shop__per-page-select {
  width: 70px !important;
  height: 42px !important;
  padding: 8px 30px 8px 15px !important;
  border: 1px solid #dddddd !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #3a566e !important;
  line-height: normal !important;
  cursor: pointer !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233A566E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

body.wp-theme-tri-star .ts-shop__per-page-select:focus {
  border-color: #f56c0b !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1540px) {
  body.wp-theme-tri-star .ts-shop {
    padding-left: 50px !important;
    padding-right: 50px !important;
    max-width: 100% !important;
  }
}
@media (max-width: 1440px) {
  body.wp-theme-tri-star .ts-shop__main {
    width: auto !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  body.wp-theme-tri-star .ts-shop__grid {
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: 30px !important;
  }

  body.wp-theme-tri-star .ts-shop__product-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

@media (max-width: 1200px) {
  body.wp-theme-tri-star .ts-shop__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 30px !important;
  }
}

@media (max-width: 1024px) {
  body.wp-theme-tri-star .ts-shop__body {
    gap: 30px !important;
  }

  body.wp-theme-tri-star .ts-shop__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 30px !important;
  }

  body.wp-theme-tri-star .ts-shop__pagination-wrap {
    gap: 30px !important;
    flex-wrap: wrap !important;
  }

  body.wp-theme-tri-star .ts-shop__heading-title {
    font-size: 40px !important;
  }
}
@media (max-width: 992px) {
  body.wp-theme-tri-star .ts-shop {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  body.wp-theme-tri-star .ts-shop__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 20px !important;
  }
}
@media (max-width: 768px) {
  body.wp-theme-tri-star .ts-shop__pagination-wrap {
    justify-content: center !important;
  }

  body.wp-theme-tri-star .ts-shop {
    padding: 15px 20px 40px !important;
  }

  body.wp-theme-tri-star .ts-shop__body {
    flex-direction: column !important;
  }

  body.wp-theme-tri-star .ts-shop__sidebar {
    width: 100% !important;
    position: relative;
    top: 0;
  }

  body.wp-theme-tri-star .ts-shop__main {
    width: 100% !important;
  }

  body.wp-theme-tri-star .ts-shop__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 20px !important;
  }

  body.wp-theme-tri-star .ts-shop__heading-title {
    font-size: 36px !important;
  }

  body.wp-theme-tri-star .ts-shop__sort-wrap {
    width: 100% !important;
  }

  body.wp-theme-tri-star .ts-shop__sort-select {
    width: 100% !important;
  }

  body.wp-theme-tri-star .ts-shop__controls {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 579px) {
  body.wp-theme-tri-star .ts-shop__grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}