/* product-5.css — dipindah dari comp/seller-product.php (baris 13505, 26 Okt 2026) agar bisa di-cache browser. */

/* <style id="ic-storefront-v9-product-style"> */
html.ic-stf-dark #product-container,
html.ic-stf-dark .product-container,
html.ic-stf-dark .seller-product-wrap,
html.ic-stf-dark .category-container{
  color:var(--ic-stf-text) !important;
}

html.ic-stf-dark .product-card{
  background:var(--ic-stf-surface) !important;
  color:var(--ic-stf-text) !important;
  border-color:var(--ic-stf-border) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.24) !important;
}

html.ic-stf-dark .product-card .card-body,
html.ic-stf-dark .product-card .card-title,
html.ic-stf-dark .product-card .card-text,
html.ic-stf-dark .product-card p,
html.ic-stf-dark .product-card h1,
html.ic-stf-dark .product-card h2,
html.ic-stf-dark .product-card h3,
html.ic-stf-dark .product-card h4,
html.ic-stf-dark .product-card h5{
  color:var(--ic-stf-text) !important;
}

html.ic-stf-dark .product-card .text-muted,
html.ic-stf-dark .product-card small,
html.ic-stf-dark .product-card .small{
  color:var(--ic-stf-muted) !important;
}

html.ic-stf-dark .product-card hr{
  border-color:var(--ic-stf-border) !important;
  opacity:1;
}

html.ic-stf-dark .product-card .product-image-wrapper,
html.ic-stf-dark .product-card .img-ph,
html.ic-stf-dark .product-card .bg-light{
  background:var(--ic-stf-surface-soft) !important;
  color:var(--ic-stf-muted) !important;
}

html.ic-stf-dark .product-card .border,
html.ic-stf-dark .product-card .border-top,
html.ic-stf-dark .product-card .border-bottom{
  border-color:var(--ic-stf-border) !important;
}

html.ic-stf-dark .ic-cat-item,
html.ic-stf-dark .ic-cat-btn,
html.ic-stf-dark .category-item,
html.ic-stf-dark .category-button{
  color:var(--ic-stf-text) !important;
}

html.ic-stf-dark .ic-cat-label{
  color:var(--ic-stf-text) !important;
}

html.ic-stf-dark .ic-cat-icon-wrap,
html.ic-stf-dark .category-icon,
html.ic-stf-dark .category-image{
  background:var(--ic-stf-surface) !important;
  border-color:var(--ic-stf-border) !important;
}

html.ic-stf-dark .nav-pills .nav-link,
html.ic-stf-dark .category-filter,
html.ic-stf-dark .category-pill{
  background:var(--ic-stf-surface) !important;
  color:var(--ic-stf-text) !important;
  border-color:var(--ic-stf-border) !important;
}

html.ic-stf-dark .nav-pills .nav-link.active,
html.ic-stf-dark .category-filter.active,
html.ic-stf-dark .category-pill.active{
  border-color:var(--brand,#FF7A00) !important;
  box-shadow:0 0 0 1px var(--brand,#FF7A00) inset;
}

html.ic-stf-dark .form-control,
html.ic-stf-dark .form-select{
  background-color:var(--ic-stf-surface) !important;
  color:var(--ic-stf-text) !important;
  border-color:var(--ic-stf-border) !important;
}

html.ic-stf-dark .form-control::placeholder{
  color:var(--ic-stf-muted) !important;
}

html.ic-stf-dark .offcanvas,
html.ic-stf-dark .dropdown-menu{
  background:var(--ic-stf-surface) !important;
  color:var(--ic-stf-text) !important;
  border-color:var(--ic-stf-border) !important;
}

/* <style id="ic-storefront-v9-category-dark-fix"> */
/* Wrapper utama kategori */
html.ic-stf-dark #category-container,
html.ic-stf-dark .category-container,
html.ic-stf-dark .category-section,
html.ic-stf-dark .category-wrapper,
html.ic-stf-dark .category-wrap,
html.ic-stf-dark .category-bar,
html.ic-stf-dark .category-list,
html.ic-stf-dark .category-scroll,
html.ic-stf-dark .seller-category,
html.ic-stf-dark [data-stf-section="categories"]{
  background:var(--ic-stf-page) !important;
  color:var(--ic-stf-text) !important;
  border-color:var(--ic-stf-border) !important;
}

/* Hapus background Bootstrap light di dalam area kategori */
html.ic-stf-dark [data-stf-section="categories"] .bg-white,
html.ic-stf-dark [data-stf-section="categories"] .bg-light,
html.ic-stf-dark #category-container.bg-white,
html.ic-stf-dark .category-container.bg-white{
  background:var(--ic-stf-page) !important;
}

/* Category item */
html.ic-stf-dark [data-stf-section="categories"] .ic-cat-item,
html.ic-stf-dark [data-stf-section="categories"] .category-item,
html.ic-stf-dark [data-stf-section="categories"] .category-button,
html.ic-stf-dark [data-stf-section="categories"] .nav-link{
  background:transparent !important;
  color:var(--ic-stf-text) !important;
}

/* Icon kategori */
html.ic-stf-dark [data-stf-section="categories"] .ic-cat-icon-wrap,
html.ic-stf-dark [data-stf-section="categories"] .category-icon,
html.ic-stf-dark [data-stf-section="categories"] .category-image{
  background:var(--ic-stf-surface) !important;
  color:var(--ic-stf-text) !important;
  border-color:var(--ic-stf-border) !important;
}

/* Label kategori */
html.ic-stf-dark [data-stf-section="categories"] .ic-cat-label,
html.ic-stf-dark [data-stf-section="categories"] .category-label,
html.ic-stf-dark [data-stf-section="categories"] span,
html.ic-stf-dark [data-stf-section="categories"] small{
  color:var(--ic-stf-text) !important;
}

/* Category pill/text filter */
html.ic-stf-dark [data-stf-section="categories"] .category-pill,
html.ic-stf-dark [data-stf-section="categories"] .category-filter,
html.ic-stf-dark [data-stf-section="categories"] .btn-outline-secondary{
  background:var(--ic-stf-surface) !important;
  color:var(--ic-stf-text) !important;
  border-color:var(--ic-stf-border) !important;
}

/* Separator antara kategori dan produk */
html.ic-stf-dark [data-stf-section="categories"]{
  box-shadow:none !important;
}

html.ic-stf-dark [data-stf-section="categories"] + [data-stf-section="products"]{
  border-top:0 !important;
}

/* <style id="ic-storefront-v9-category-bar-exact-fix"> */
html.ic-stf-dark #categoryImageBar,
html.ic-stf-dark #categoryImageBar.bg-white{
  background:var(--ic-stf-page) !important;
  color:var(--ic-stf-text) !important;
  border-top:0 !important;
  border-bottom:0 !important;
}

html.ic-stf-dark #categoryImageBar > .d-flex{
  background:var(--ic-stf-page) !important;
}

/* Category label */
html.ic-stf-dark #categoryImageBar .ic-cat-label,
html.ic-stf-dark #categoryImageBar .category-link .small{
  color:var(--ic-stf-text) !important;
}

/* Lingkaran/icon kategori */
html.ic-stf-dark #categoryImageBar .ic-cat-ring{
  background:var(--ic-stf-surface) !important;
  border-color:var(--ic-stf-border) !important;
}

html.ic-stf-dark #categoryImageBar .ic-cat-icon{
  color:var(--ic-stf-text) !important;
}

/* Kategori aktif */
html.ic-stf-dark #categoryImageBar .ic-cat-btn[aria-pressed="true"] .ic-cat-ring,
html.ic-stf-dark #categoryImageBar .category-link[aria-pressed="true"] .ic-cat-ring{
  border-color:var(--brand) !important;
  box-shadow:0 0 0 .18rem color-mix(in srgb, var(--brand) 20%, transparent) !important;
}

/* Mode text-only */
html.ic-stf-dark #categoryImageBar.ic-catbar-noicons .ic-cat-label{
  background:var(--ic-stf-surface) !important;
  color:var(--ic-stf-text) !important;
  border-color:var(--ic-stf-border) !important;
}

html.ic-stf-dark #categoryImageBar.ic-catbar-noicons
.ic-cat-btn[aria-pressed="true"] .ic-cat-label{
  background:var(--brand) !important;
  color:#fff !important;
  border-color:var(--brand) !important;
}

/* <style id="ic-storefront-v9-category-noicon-text-fix"> */
/* Text-only category: semua item nonaktif */
html.ic-stf-dark #categoryImageBar.ic-catbar-noicons .ic-cat-btn,
html.ic-stf-dark #categoryImageBar.ic-catbar-noicons .category-link,
html.ic-stf-dark #categoryImageBar[data-cat-icons="0"] .ic-cat-btn,
html.ic-stf-dark #categoryImageBar[data-cat-icons="0"] .category-link{
  background:transparent !important;
  color:var(--ic-stf-text) !important;
}

/* Label/pill nonaktif */
html.ic-stf-dark #categoryImageBar.ic-catbar-noicons .ic-cat-label,
html.ic-stf-dark #categoryImageBar.ic-catbar-noicons .category-label,
html.ic-stf-dark #categoryImageBar.ic-catbar-noicons .small,
html.ic-stf-dark #categoryImageBar[data-cat-icons="0"] .ic-cat-label,
html.ic-stf-dark #categoryImageBar[data-cat-icons="0"] .category-label,
html.ic-stf-dark #categoryImageBar[data-cat-icons="0"] .small{
  background:var(--ic-stf-surface) !important;
  color:var(--ic-stf-text) !important;
  border:1px solid var(--ic-stf-border) !important;
  opacity:1 !important;
}

/* Paksa seluruh child text ikut terang */
html.ic-stf-dark #categoryImageBar.ic-catbar-noicons .ic-cat-btn:not([aria-pressed="true"]) *,
html.ic-stf-dark #categoryImageBar.ic-catbar-noicons .category-link:not([aria-pressed="true"]) *,
html.ic-stf-dark #categoryImageBar[data-cat-icons="0"] .ic-cat-btn:not([aria-pressed="true"]) *,
html.ic-stf-dark #categoryImageBar[data-cat-icons="0"] .category-link:not([aria-pressed="true"]) *{
  color:var(--ic-stf-text) !important;
}

/* Item aktif */
html.ic-stf-dark #categoryImageBar.ic-catbar-noicons
.ic-cat-btn[aria-pressed="true"] .ic-cat-label,
html.ic-stf-dark #categoryImageBar.ic-catbar-noicons
.category-link[aria-pressed="true"] .ic-cat-label,
html.ic-stf-dark #categoryImageBar[data-cat-icons="0"]
.ic-cat-btn[aria-pressed="true"] .ic-cat-label,
html.ic-stf-dark #categoryImageBar[data-cat-icons="0"]
.category-link[aria-pressed="true"] .ic-cat-label{
  background:var(--brand, #FF7A00) !important;
  color:#ffffff !important;
  border-color:var(--brand, #FF7A00) !important;
}

/* Child text item aktif */
html.ic-stf-dark #categoryImageBar.ic-catbar-noicons
.ic-cat-btn[aria-pressed="true"] *,
html.ic-stf-dark #categoryImageBar.ic-catbar-noicons
.category-link[aria-pressed="true"] *,
html.ic-stf-dark #categoryImageBar[data-cat-icons="0"]
.ic-cat-btn[aria-pressed="true"] *,
html.ic-stf-dark #categoryImageBar[data-cat-icons="0"]
.category-link[aria-pressed="true"] *{
  color:#ffffff !important;
}

/* <style id="ic-storefront-category-auto-responsive"> */
/* Mobile: satu baris, swipe horizontal */
#categoryImageBar{
  overflow:hidden;
}

#categoryImageBar > .d-flex{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  gap:.75rem;
  padding-left:1rem;
  padding-right:1rem;
}

#categoryImageBar > .d-flex::-webkit-scrollbar{
  display:none;
}

#categoryImageBar .ic-cat-btn,
#categoryImageBar .category-link{
  flex:0 0 auto !important;
  scroll-snap-align:start;
}

/* Desktop: otomatis wrap dan rata tengah */
@media (min-width:768px){
  #categoryImageBar{
    overflow:visible;
  }

  #categoryImageBar > .d-flex{
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    overflow-x:visible !important;
    scroll-snap-type:none;
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
}