/* ============================================================================
   主題：shopLinerp  —  sidebar
   issue518 階段 11 CSS 模組化自動拆檔：本檔僅含相對 default(common) 的品牌差異規則，
   與 common 相同的規則由 common 層托底。載入順序：common 後、custom.css 前。
   ============================================================================ */

.product-cat ul li {
  list-style: none !important;
  padding: 0;
}

.product-side-menu {
  background: #ffffff;
  border-left: 4px solid #2C2C2C;
  padding: 24px 20px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

.section,
.gray-bg,
.black-bg,
.bg-white,
.white-bg,
.page-wrapper,
.single-product-area,
.single-product-info,
.message-box,
.shopping-cart-box,
.order-card,
.order-summary-card,
.order-header-card,
.widget-categories,
.widget-product,
.product-side-menu,
.user-side-menu,
#page-content.section,
.breadcrumbs-section,
.breadcrumbs-section.section,
.message-box-section {
  background: var(--sl-bg-1) !important;
}

.mobile-sidebar-overlay,
#mobile-sidebar-overlay {
  background-color: rgba(25, 36, 52, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mobile-sidebar,
#mobile-sidebar {
  background-color: var(--sl-bg-1);
  border-left: 1px solid var(--sl-border);
  box-shadow: -12px 0 30px rgba(37, 60, 93, 0.22);
}

.sidebar-title {
  color: var(--sl-text-muted);
}

.sidebar-divider {
  background: linear-gradient(90deg, var(--sl-accent), var(--sl-accent-2));
}

.sidebar-close-btn {
  color: var(--sl-text-secondary);
}

.sidebar-close-btn:hover {
  color: var(--sl-accent);
}

.menu-item-l1-wrapper,
.menu-item-l2-wrapper {
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-sm);
  background: var(--sl-bg-2);
}

.menu-item-l1-wrapper:hover,
.menu-item-l2-wrapper:hover {
  border-color: rgba(var(--sl-accent-rgb), 0.56);
  box-shadow: var(--sl-shadow-sm);
}

.menu-btn-l1-link,
.menu-btn-l2-link,
.menu-link-l3 {
  color: var(--sl-text-primary);
}

.menu-btn-l1-link:hover,
.menu-btn-l2-link:hover,
.menu-link-l3:hover {
  color: var(--sl-accent);
}

.menu-btn-l1-toggle,
.menu-btn-l2-toggle {
  border-left: 1px solid var(--sl-border);
  color: var(--sl-text-muted);
}

.menu-btn-l1-toggle:hover,
.menu-btn-l2-toggle:hover,
.menu-btn-l1-toggle.active,
.menu-btn-l2-toggle.active {
  background-color: rgba(var(--sl-accent-rgb), 0.14) !important;
  color: var(--sl-accent) !important;
}

.menu-item-l1-wrapper:has(.menu-btn-l1-toggle.active) {
  border-color: rgba(var(--sl-accent-rgb), 0.62);
  background: linear-gradient(90deg, rgba(var(--sl-accent-rgb), 0.18) 0%, rgba(var(--sl-accent-rgb), 0.03) 100%);
}

.menu-container-l3 {
  border-left: 2px solid rgba(var(--sl-accent-rgb), 0.32);
}

/* #548 .sidebar-footer 為 display: contents（common 托底），不產生盒模型故略過、避免設無效的 background/border；
   .logout-btn-container 為 sticky 實體盒，須覆寫背景避免捲動時露出 common 預設 #fff 白塊 */
.user-info-section,
.member-center-menu,
.logout-btn-container {
  background-color: var(--sl-bg-1);
  border-top-color: var(--sl-border);
}

.user-info-section:hover,
.user-info-section.active {
  background-color: var(--sl-bg-2);
}

.logout-btn {
  border-color: var(--sl-border);
  color: var(--sl-text-primary);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-surface-soft);
}

.logout-btn:hover {
  border-color: rgba(var(--sl-accent-rgb), 0.72);
  background: rgba(var(--sl-accent-rgb), 0.16);
  color: var(--sl-accent);
}

/* #548 補齊會員區 / 使用者卡片 / icon 品牌色（#562 收斂後留下的 default 中性灰，對齊 --sl-* 系統） */
.menu-icon-l1 {
  color: var(--sl-text-muted);
}

.user-info-section::before {
  background-color: var(--sl-bg-2);
}

.user-name {
  color: var(--sl-text-primary);
}

.user-role {
  color: var(--sl-text-muted);
}

.member-menu-list a {
  color: var(--sl-text-secondary);
}

.member-menu-list a:hover {
  color: var(--sl-accent);
  background-color: var(--sl-bg-2);
}

/* 展開連結文字/圖示用品牌強調色（權重對齊 common 的 (0,4,0)） */
.menu-item-l1-wrapper:has(.menu-btn-l1-toggle.active) .menu-btn-l1-link,
.menu-item-l1-wrapper:has(.menu-btn-l1-toggle.active) .menu-icon-l1 {
  color: var(--sl-accent);
}

.shop-content .product-item,
.widget-product .product-item,
.product-item,
.productA-item,
.productBox,
.productB-Box,
.single-product-area,
.single-product-info,
.message-box,
.shopping-cart-box,
.order-card,
.order-summary-card,
.order-header-card,
.widget-categories,
.widget-product,
.product-side-menu,
.user-side-menu {
  background: var(--sl-surface-soft) !important;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-md) !important;
  box-shadow: var(--sl-shadow-sm);
}

.product-side-menu {
  border-left: 3px solid rgba(var(--sl-accent-rgb), 0.58);
}

.product-side-menu .widget-title,
.widget-title,
.blog-section-title {
  color: var(--sl-text-primary);
}

.product-side-menu .widget-title::before,
.widget-title::before {
  background: var(--sl-accent);
}

.product-cat .product-cat-item a,
.product-side-menu .product-cat-item > a,
.btn-group-category .product-cat-item a,
.btn-group-category .dropdown-item {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--sl-border);
  color: var(--sl-text-secondary) !important;
  border-radius: var(--sl-radius-sm);
}

.product-cat .product-cat-item a:hover,
.product-side-menu .product-cat-item > a:hover,
.btn-group-category .product-cat-item a:hover,
.btn-group-category .dropdown-item:hover {
  border-color: rgba(var(--sl-accent-rgb), 0.62);
  color: var(--sl-accent) !important;
  background: rgba(var(--sl-accent-rgb), 0.1) !important;
}

.product-cat .product-cat-item.is-active > a,
.product-side-menu .product-cat > ul > .product-cat-item.is-active > a,
.product-side-menu .product-cat-item ul .product-cat-item.is-active > a {
  border-color: rgba(var(--sl-accent-rgb), 0.72);
  color: var(--sl-accent) !important;
  background: rgba(var(--sl-accent-rgb), 0.16) !important;
}