/* ==========================================================================
   GOKU MUSIC - SHOP & ARCHIVE PRODUCT STYLESHEET
   Adheres 100% to design/product-category.html & design-tokens.css
   Container: 1425px max-width | Font: Roboto / System Sans
   ========================================================================== */

:root {
  --et-brand-green:        #4caf50;
  --et-brand-green-dark:   #43a047;
  --et-brand-green-hover:  #388e3c;
  --et-brand-green-deep:   #2e7d32;
  --et-brand-green-light:  #e8f5e9;
  --et-brand-green-border: #a5d6a7;
  --et-dark-color:         #222222;
  --et-dark-secondary:     #444444;
  --et-muted-color:        #777777;
  --et-border-color:       #e1e1e1;
  --et-border-light:       #eeeeee;
  --et-bg-light:           #f8f9fa;
  --et-white:              #ffffff;
  --et-price-color:        #d32f2f;
  --et-price-regular:      #888888;
  --et-sale-badge:         #e53935;
  --et-hot-badge:          #ff9800;
  --et-rating-gold:        #ffb300;
  --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* Disable XStore Preloader overlay to eliminate page fade & spinners */
.et-preloader,
.et-loader,
div[class*="preloader"],
.et-preloader-on > .et-preloader {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.et-preloader-on {
  opacity: 1 !important;
}

/* Header Consistency on Shop & Archives */
.archive .header-wrapper,
.woocommerce-page .header-wrapper,
.tax-product_cat .header-wrapper,
.tax-product_tag .header-wrapper,
.tax-brand .header-wrapper {
  background: transparent !important;
}

.archive .header-top,
.woocommerce-page .header-top,
.tax-product_cat .header-top,
.tax-product_tag .header-top,
.tax-brand .header-top {
  background: #4caf50 !important;
  background-color: #4caf50 !important;
  color: #ffffff !important;
}

.archive .header-top a,
.woocommerce-page .header-top a,
.tax-product_cat .header-top a,
.tax-product_tag .header-top a,
.tax-brand .header-top a {
  color: #ffffff !important;
}

.archive .header-main,
.woocommerce-page .header-main,
.tax-product_cat .header-main,
.tax-product_tag .header-main,
.tax-brand .header-main {
  background: #43a047 !important;
  background-color: #43a047 !important;
  color: #ffffff !important;
}

.archive .header-main a,
.woocommerce-page .header-main a,
.tax-product_cat .header-main a,
.tax-product_tag .header-main a,
.tax-brand .header-main a,
.archive .header-main .menu > li > a,
.woocommerce-page .header-main .menu > li > a,
.tax-product_cat .header-main .menu > li > a {
  color: #ffffff !important;
}

.archive .header-bottom,
.woocommerce-page .header-bottom,
.tax-product_cat .header-bottom,
.tax-product_tag .header-bottom,
.tax-brand .header-bottom {
  background: #4caf50 !important;
  background-color: #4caf50 !important;
}

/* Remove default XStore page banner or clutter if any */
.woocommerce-shop .et-page-banner,
.archive.post-type-archive-product .page-heading,
.archive.post-type-archive-product .et-header-overlap {
  display: none !important;
}

/* Base Container & Scoped Shop Wrapper */
.goku-shop-archive {
  width: 100%;
  background-color: #ffffff;
  font-family: var(--font-family-system);
  color: #333333;
  line-height: 1.6;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.goku-shop-archive .container {
  width: 100%;
  max-width: 1425px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

.goku-shop-archive .container::before,
.goku-shop-archive .container::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.goku-shop-archive .breadcrumb-row {
  background: #f7f7f7;
  border-bottom: 1px solid #e5e5e5;
  padding: 11px 0;
  font-size: 12.5px;
  color: #777777;
}

.goku-shop-archive .breadcrumb-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.goku-shop-archive .breadcrumb-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.goku-shop-archive .breadcrumb-nav a {
  color: #555555;
  text-decoration: none;
  transition: color 0.15s ease;
}

.goku-shop-archive .breadcrumb-nav a:hover {
  color: #4caf50;
}

.goku-shop-archive .breadcrumb-sep {
  margin: 0 6px;
  color: #bbb;
}

.goku-shop-archive .breadcrumb-current {
  color: #222222;
  font-weight: 600;
}

.goku-shop-archive .breadcrumb-back {
  font-size: 12px;
  color: #777777;
  text-decoration: none;
  transition: color 0.15s ease;
}

.goku-shop-archive .breadcrumb-back:hover {
  color: #4caf50;
}

/* ==========================================================================
   ARCHIVE MAIN LAYOUT (2 Columns)
   ========================================================================== */
.goku-shop-archive .archive-page-layout {
  padding: 24px 0 60px 0;
}

.goku-shop-archive .archive-grid-layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 30px;
  align-items: start;
}

/* ==========================================================================
   SIDEBAR WIDGETS
   ========================================================================== */
.goku-shop-archive .archive-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.goku-shop-archive .sidebar-widget {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: #ffffff;
  padding: 18px 20px;
  box-sizing: border-box;
}

.goku-shop-archive .widget-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #222222;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding-bottom: 10px;
  border-bottom: 2px solid #4caf50;
  margin: 0 0 14px 0;
}

/* Category list */
.goku-shop-archive .category-list-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  margin: 0;
}

.goku-shop-archive .category-list-nav li {
  margin: 0;
  padding: 0;
}

.goku-shop-archive .category-list-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #444444;
  font-size: 13.5px;
  padding: 4px 0;
  text-decoration: none;
  transition: color 0.15s ease;
}

.goku-shop-archive .category-list-nav li.active > a,
.goku-shop-archive .category-list-nav li a:hover {
  color: #4caf50;
  font-weight: 700;
}

.goku-shop-archive .cat-count-badge {
  color: #888888;
  font-size: 12px;
}

/* Price Filter */
.goku-shop-archive .price-filter-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.goku-shop-archive .price-slider-wrap input[type="range"] {
  width: 100%;
  accent-color: #4caf50;
  cursor: pointer;
}

.goku-shop-archive .price-values-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: #555555;
}

.goku-shop-archive .btn-filter-price {
  background: #4caf50;
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s ease;
}

.goku-shop-archive .btn-filter-price:hover {
  background: #388e3c;
  color: #ffffff;
}

/* Featured Products in Sidebar */
.goku-shop-archive .side-products-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.goku-shop-archive .side-product-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.goku-shop-archive .side-product-thumb {
  width: 60px;
  height: 60px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
  background: #fafafa;
}

.goku-shop-archive .side-product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.goku-shop-archive .side-product-title {
  font-size: 13px;
  font-weight: 600;
  color: #333333;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  transition: color 0.15s ease;
}

.goku-shop-archive .side-product-title:hover {
  color: #4caf50;
}

.goku-shop-archive .side-product-price {
  font-size: 13px;
  font-weight: 700;
  color: #d32f2f;
}

/* Technical Support Card */
.goku-shop-archive .sidebar-support-card {
  background: #f4fbf5;
  border: 1px solid #a5d6a7;
  border-radius: 4px;
  padding: 16px;
  box-sizing: border-box;
}

.goku-shop-archive .support-card-head {
  font-size: 14px;
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.goku-shop-archive .support-card-text {
  font-size: 12.5px;
  color: #555555;
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.goku-shop-archive .btn-support-zalo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #4caf50;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease;
}

.goku-shop-archive .btn-support-zalo:hover {
  background: #388e3c;
  color: #ffffff;
}

/* ==========================================================================
   MAIN COLUMN & TOOLBAR
   ========================================================================== */
.goku-shop-archive .archive-main-column {
  min-width: 0;
}

.goku-shop-archive .archive-header-title {
  font-size: 24px;
  font-weight: 700;
  color: #222222;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.goku-shop-archive .archive-description-text {
  font-size: 13.5px;
  color: #666666;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.goku-shop-archive .archive-toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 22px;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  flex-wrap: wrap;
  gap: 12px;
}

.goku-shop-archive .results-count {
  font-size: 13px;
  color: #777777;
}

.goku-shop-archive .toolbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.goku-shop-archive .sort-dropdown {
  height: 34px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding: 0 10px;
  font-size: 13px;
  color: #444444;
  background: #ffffff;
  outline: none;
  cursor: pointer;
}

.goku-shop-archive .sort-dropdown:focus {
  border-color: #4caf50;
}

/* ==========================================================================
   4-COLUMN PRODUCTS GRID
   ========================================================================== */
.goku-shop-archive .products-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.goku-shop-archive .product-grid-item {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: #ffffff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  box-sizing: border-box;
}

.goku-shop-archive .product-grid-item:hover {
  border-color: #4caf50;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.goku-shop-archive .product-thumb-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 12px;
  background: #fafafa;
  border-radius: 3px;
}

.goku-shop-archive .product-thumb-link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.goku-shop-archive .product-thumb-frame img {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
  display: block;
}

.goku-shop-archive .product-grid-item:hover .product-thumb-frame img {
  transform: scale(1.06);
}

.goku-shop-archive .badge-sale-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #e53935;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  z-index: 2;
  text-transform: uppercase;
}

.goku-shop-archive .product-details-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.goku-shop-archive .product-category-crumb {
  font-size: 11px;
  text-transform: uppercase;
  color: #888888;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  display: block;
}

.goku-shop-archive .product-title-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 8px 0;
  min-height: 38px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.goku-shop-archive .product-title-text a {
  color: #222222;
  text-decoration: none;
  transition: color 0.15s ease;
}

.goku-shop-archive .product-title-text a:hover {
  color: #4caf50;
}

.goku-shop-archive .product-card-price {
  font-size: 15px;
  font-weight: 700;
  color: #d32f2f;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.goku-shop-archive .price-current {
  color: #d32f2f;
}

.goku-shop-archive .price-old {
  font-size: 12px;
  color: #999999;
  text-decoration: line-through;
  font-weight: 400;
}

.goku-shop-archive .product-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: auto;
}

.goku-shop-archive .btn-product-detail {
  border: 1px solid #cccccc;
  background: #fdfdfd;
  color: #333333;
  padding: 7px 0;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  border-radius: 3px;
  transition: all 0.15s ease;
  text-decoration: none;
  display: block;
}

.goku-shop-archive .btn-product-detail:hover {
  border-color: #4caf50;
  color: #4caf50;
  background: #f0fdf4;
}

.goku-shop-archive .btn-product-zalo {
  border: 1px solid #4caf50;
  background: #4caf50;
  color: #ffffff;
  padding: 7px 0;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.15s ease;
  text-decoration: none;
}

.goku-shop-archive .btn-product-zalo:hover {
  background: #388e3c;
  color: #ffffff;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.goku-shop-archive .archive-pagination-wrap {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}

.goku-shop-archive .archive-pagination-wrap ul.page-numbers {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0;
  align-items: center;
}

.goku-shop-archive .archive-pagination-wrap .page-numbers li {
  margin: 0;
  padding: 0;
}

.goku-shop-archive .archive-pagination-wrap .page-numbers li a,
.goku-shop-archive .archive-pagination-wrap .page-numbers li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #333333;
  text-decoration: none;
  background: #ffffff;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.goku-shop-archive .archive-pagination-wrap .page-numbers li span.current {
  background: #4caf50;
  color: #ffffff;
  border-color: #4caf50;
}

.goku-shop-archive .archive-pagination-wrap .page-numbers li a:hover {
  border-color: #4caf50;
  color: #4caf50;
  background: #f0fdf4;
}

.goku-shop-archive .no-products-found-box {
  padding: 40px 20px;
  text-align: center;
  background: #fdfdfd;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
}

.goku-shop-archive .no-products-found-box p {
  font-size: 15px;
  color: #666666;
  margin-bottom: 16px;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1100px) {
  .goku-shop-archive .products-archive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .goku-shop-archive .archive-grid-layout {
    grid-template-columns: 240px 1fr;
    gap: 20px;
  }
}

@media (max-width: 850px) {
  .goku-shop-archive .archive-grid-layout {
    grid-template-columns: 1fr;
  }
  .goku-shop-archive .products-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .goku-shop-archive .products-archive-grid {
    grid-template-columns: 1fr;
  }
}