/* ====== Base Plugin Panels ====== */
.saballoon-store-panel {
  box-sizing: border-box;
}
.saballoon-store-left {
  /* deprecated: use .saballoon-left-panel */
}
.saballoon-store-right {
  /* deprecated: use .saballoon-right-panel */
}

/* ====== Left Panel ====== */
.saballoon-left-panel {
  width: 250px;
  max-width: 100vw;
  padding: 1rem;
  border-right: none !important;
  background: #fff;

  /* grow to content, no scrollbars */
  height: auto !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;

  box-sizing: border-box;
}

/* Search */
.saballoon-search {
  position: relative;
  margin-bottom: 1rem;
}
.saballoon-search-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.saballoon-search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 4px;
}
.hidden {
  display: none !important;
}

/* Category Navigation */
.saballoon-category-nav .saballoon-panel-heading {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.category-item {
  margin-bottom: 0.25rem;
}
.category-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.3;
}
.category-link:hover {
  background: #f5f5f5;
}
.category-toggle-icon {
  margin-left: auto;
  transition: transform 0.2s ease;
}
.category-link[aria-expanded="true"] .category-toggle-icon {
  transform: rotate(90deg);
}

/* Subcategory List */
.subcategory-list {
  list-style: none;
  padding-left: 1rem;
  margin: 0.25rem 0;
}

/* Themes Navigation */
.saballoon-theme-nav {
  margin-top: 1rem;
}
.saballoon-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}
.saballoon-theme-toggle:hover {
  background: #f5f5f5;
}
.saballoon-theme-toggle::after {
  content: '▸';
  display: inline-block;
  transition: transform 0.2s;
}
.saballoon-theme-toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}
.theme-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
}
.theme-item {
  margin-bottom: 0.25rem;
}
.theme-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.theme-link:hover {
  background: #f5f5f5;
}

/* ====== Right Panel ====== */
.saballoon-right-panel {
  flex: 1;
  padding: 1rem;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Header Controls */
.sab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.view-controls button,
.filter-controls select,
.filter-controls button {
  margin-right: 0.5rem;
  background: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s, border-color 0.2s;
}
.view-controls button:hover,
.filter-controls button:hover {
  background: #f5f5f5;
}
.filter-controls select {
  min-width: 150px;
}

/* Breadcrumbs */
.sab-breadcrumbs {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  white-space: nowrap;
}
.sab-breadcrumbs ol {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}
.sab-breadcrumbs li {
  position: relative;
}
.sab-breadcrumbs li:not(:last-child)::after {
  content: '›';
  margin: 0 0.5rem;
  color: #888;
}

/* Grid & List Layout */
.sab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(25% - 1rem), 1fr));
  gap: 1rem;
}
.sab-list .sab-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ====== Quickview Modal & Misc ====== */
/* Quickview modal overlay */
.saballoon-quickview-modal {
  z-index: 10010 !important;
  background: rgba(0,0,0,0.5);
  animation: saballoon-fade-in 0.2s;
}
@keyframes saballoon-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.saballoon-quickview-modal .saballoon-add-to-cart input[type="number"]::-webkit-inner-spin-button,
.saballoon-quickview-modal .saballoon-add-to-cart input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.saballoon-quickview-modal .saballoon-add-to-cart input[type="number"] {
  -moz-appearance: textfield;
}

/* Custom scrollbar */
.saballoon-store-panel {
  scrollbar-color: #3c0058 #ededed;
  scrollbar-width: thin;
}
.saballoon-store-panel::-webkit-scrollbar {
  width: 8px;
  background: #ededed;
}
.saballoon-store-panel::-webkit-scrollbar-thumb {
  background: #3c0058;
  border-radius: 6px;
}



/* Hover effects */
.saballoon-cat-tile:hover,
.saballoon-product-tile:hover {
  box-shadow: 0 4px 18px rgba(60,0,88,0.08);
  border-color: #3c0058;
}

/* ----- 1) Hide scrollbars on the left panel ----- */
.saballoon-left-panel {
  /* Let the panel grow with content and hide scrollbars entirely */
  height: auto !important;
  overflow: visible !important;
  scrollbar-width: none;             /* Firefox */
}
.saballoon-left-panel::-webkit-scrollbar {
  width: 0;                          /* Chrome/Safari/Edge */
  height: 0;
}

/* ----- 2) Uniform, single-line buttons with ellipsis ----- */
.category-link,
.theme-link {
  display: block;                    /* fill the available width */
  width: 100%;
  white-space: nowrap !important;    /* no wrapping */
  overflow: hidden;                  /* clip overflow */
  text-overflow: ellipsis;           /* show “…” if too long */
  box-sizing: border-box;
}

/* ----- 3) Remove the old right-edge divider ----- */
.saballoon-left-panel {
  border-right: none !important;
}

/* ====== Image containers: show full image & overlay name ====== */
.sab-image-container {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  object-fit: scale-down !important;
}

/* Overlay (hidden by default, fades in on hover) */
.sab-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.2s;
}
.sab-item:hover .sab-overlay {
  opacity: 1;
}
.sab-overlay-text {
  color: #fff;
  background: rgba(0,0,0,0.7);
  padding: 0.25rem .5rem;
  border-radius: 4px;
  font-size: 1rem;
  text-align: center;
}

/* ====== Grid spacing ====== */
.sab-grid {
  /* bump gap from 1rem to 1.5rem */
  gap: 1.5rem;
}

/* ====== Breadcrumb separator ====== */
.sab-breadcrumbs li:not(:last-child)::after {
  content: '/';
  margin: 0 0.5rem;
  color: #666;
}

/* ====== Tile Image & Overlay ====== */
.sab-image-container {
  position: relative;
  width: 180px;
  height: 180px;
  object-fit: scale-down !important;
  margin: 0 auto;
  overflow: hidden;
}


/* Permanent overlay label */
.sab-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  opacity: 1;
  transition: background 0.2s;
}

.sab-overlay-text {
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 1rem;
  text-align: center;
}

/* Darken on hover */
.sab-item:hover .sab-overlay {
  background: rgba(0,0,0,0.6);
}

/* Increase grid gap for breathing room */
.sab-grid {
  gap: 1.5rem;
}

/* Breadcrumb slashes */
.sab-breadcrumbs .breadcrumb-list li:not(:last-child)::after {
  content: '/';
  margin: 0 0.5rem;
  color: #666;
}

/* 1) Right‐panel grid: exactly 4 columns, tighter gap */
#saballoon-content-area.sab-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
}

/* 3) Overlay only behind the text label at bottom */
.sab-overlay {
  /* occupy only bottom strip */
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  padding: 0.25rem 0;
  background: none !important;     /* remove full dark layer */
}

.sab-overlay-text {
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* remove hover‐darkening of the entire overlay */
.sab-item:hover .sab-overlay {
  background: none !important;
}

/* ========== FINAL IMAGE TILES & OVERLAY ========== */

/* 1) Force 4 columns, 1rem gap */
#saballoon-content-area.sab-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
}

/* 2) Uniform 180×180 container, full‐image contain */
.sab-image-container {
  position: relative;
  width: 180px !important;
  height: 180px !important;
  object-fit: scale-down !important;
  margin: 0 auto;
  overflow: hidden;
}

/* 3) Overlay only behind text at bottom */
.sab-overlay {
  position: absolute !important;
  bottom: 0;
  left: 0;
  right: 0;
  background: none !important;     /* remove full‐image dark */
  opacity: 1 !important;
}
.sab-overlay-text {
  position: relative;
  display: inline-block;
  margin: 0.5rem auto;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  text-align: center;
}

/* 4) Disable any hover‐darkening */
.sab-item:hover .sab-overlay {
  background: none !important;
}