/* Shop page — extracted from shop.html; brand overrides in inftdes-redesign.css */
    .shop-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 24px;
      margin: 0;
      padding: 0;
      list-style: none;
      align-items: stretch;
      /* 六行 subgrid：同一列商品共用行高，價錢自然對齊 */
      grid-auto-rows: minmax(2.25rem, max-content) minmax(13rem, max-content) minmax(4.5rem, max-content) minmax(calc(1.35em * 3), max-content) max-content minmax(0, 1fr);
    }
    .shop-item {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
      padding: 20px;
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 6;
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
      align-content: start;
      height: auto;
      min-height: 100%;
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }
    .shop-item:hover {
      box-shadow: 0 8px 25px rgba(0,0,0,0.12);
      transform: translateY(-2px);
      border-color: var(--inftdes-accent);
    }
    .shop-item img {
      width: 100%;
      max-width: 220px;
      height: 180px;
      object-fit: contain;
      border-radius: 10px;
      margin-bottom: 0;
      background: #f8f9fa;
      padding: 8px;
      cursor: pointer;
      transition: transform 0.2s ease;
    }
    
    .shop-item img:hover {
      transform: scale(1.05);
    }
    
    .product-image-container {
      position: relative;
      cursor: pointer;
      align-self: center;
      justify-self: center;
      width: 100%;
      max-width: 220px;
      margin-left: auto;
      margin-right: auto;
      min-height: 13rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .shop-item .top-badges,
    .shop-item .meta-badges {
      align-self: center;
      width: 100%;
    }
    
    .image-count-badge {
      position: absolute;
      top: 5px;
      right: 5px;
      background: rgba(0,0,0,0.7);
      color: white;
      padding: 2px 6px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: bold;
    }
    
    /* 圖片畫廊模態框 */
    .image-gallery-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.9);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    
    .gallery-header {
      color: white;
      text-align: center;
      margin-bottom: 20px;
    }
    
    .gallery-container {
      position: relative;
      max-width: 80vw;
      max-height: 70vh;
    }
    
    .gallery-image {
      max-width: 100%;
      max-height: 70vh;
      object-fit: contain;
      border-radius: 8px;
    }
    
    .gallery-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.8);
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .gallery-nav:hover {
      background: rgba(255,255,255,1);
    }
    
    .gallery-prev {
      left: -50px;
    }
    
    .gallery-next {
      right: -50px;
    }
    
    .gallery-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(255,255,255,0.8);
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .gallery-close:hover {
      background: rgba(255,255,255,1);
    }
    
    .gallery-thumbnails {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 20px;
      flex-wrap: wrap;
    }
    
    .gallery-thumbnail {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 4px;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.2s ease;
    }
    
    .gallery-thumbnail.active {
      opacity: 1;
      border: 2px solid white;
    }
    
    .gallery-thumbnail:hover {
      opacity: 0.8;
    }
    .shop-item .category-badge {
      background: #f5ebe0;
      color: var(--inftdes-accent);
      font-size: 0.75rem;
      padding: 4px 8px;
      border-radius: 12px;
      margin-bottom: 0;
      font-weight: 500;
    }
    .shop-item .top-badges {
      grid-row: 1;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      align-content: flex-start;
      gap: 6px;
      margin-bottom: 0;
      min-height: 2.25rem;
      width: 100%;
    }
    .shop-item .product-image-container {
      grid-row: 2;
    }
    .shop-item .meta-badges {
      grid-row: 3;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      align-content: flex-start;
      gap: 6px;
      margin-bottom: 0;
      min-height: 4.5rem;
      width: 100%;
    }
    .shop-item__details {
      display: contents;
    }

    .shop-item .shop-title {
      grid-row: 4;
      font-size: 1.15rem;
      font-weight: 600;
      margin: 0;
      text-align: left;
      color: #333;
      line-height: 1.35;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      display: block;
      width: 100%;
      min-height: calc(1.35em * 3);
      height: auto;
      max-height: none;
      overflow: visible;
      align-self: start;
    }
    .shop-item .shop-title a {
      color: inherit;
      text-decoration: none;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      border-radius: 0 !important;
      display: block;
      width: 100%;
      text-align: left;
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
      word-break: break-word;
      overflow-wrap: anywhere;
      line-height: inherit;
    }
    .shop-item .shop-title a:hover {
      color: var(--inftdes-accent);
      text-decoration: underline;
    }
    .shop-item .new-badge {
      display: inline-block;
      background: #e53935;
      color: #fff;
      font-size: 0.72rem;
      border-radius: 999px;
      padding: 3px 8px;
      margin-bottom: 0;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    .shop-item .shop-card-actions {
      grid-row: 6;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: auto;
      padding-top: 12px;
      align-self: end;
    }
    .shop-item .view-detail-btn {
      width: 100%;
      border: 1px solid var(--inftdes-accent, #a16207);
      color: var(--inftdes-accent);
      background: transparent;
      border-radius: 6px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      text-decoration: none;
    }
    .shop-item .view-detail-btn:hover {
      background: #f5ebe0;
      color: var(--inftdes-accent-hover, #b45309);
    }
    .shop-item .shop-price {
      grid-row: 5;
      color: var(--inftdes-accent);
      font-size: 1.25rem;
      font-weight: 700;
      margin: 0;
      padding-top: 8px;
      align-self: start;
      position: relative;
      z-index: 1;
    }

    /* 不支援 subgrid 的瀏覽器：較高標題區，減少叠價 */
    @supports not (grid-template-rows: subgrid) {
      .shop-list {
        grid-auto-rows: unset;
      }
      .shop-item {
        grid-row: auto;
        grid-template-rows: minmax(2.25rem, auto) minmax(13rem, auto) minmax(4.5rem, auto) minmax(calc(1.35em * 4), auto) auto minmax(0, 1fr);
      }
      .shop-item .shop-title {
        min-height: calc(1.35em * 4);
      }
    }
    .shop-item .feature-tags {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 6px;
      margin: 0;
    }
    .shop-item .feature-tag {
      display: inline-flex;
      align-items: center;
      border: 1px solid #ef5350;
      color: #d32f2f;
      background: rgba(239, 83, 80, 0.08);
      border-radius: 4px;
      padding: 2px 8px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.2;
    }
    .product-page .desc-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 12px;
    }
    .product-page .desc-tags .feature-tag {
      display: inline-flex;
      align-items: center;
      border: 1px solid #ef5350;
      color: #d32f2f;
      background: rgba(239, 83, 80, 0.1);
      border-radius: 999px;
      padding: 4px 12px;
      font-size: 0.8rem;
      font-weight: 600;
      line-height: 1.25;
    }
    .shop-item .shop-desc {
      color: #666;
      font-size: 0.9rem;
      text-align: center;
      margin-bottom: 16px;
      line-height: 1.5;
    }
    .shop-item .shop-card-actions .quantity-controls {
      display: grid;
      grid-template-columns: 44px 1fr 44px;
      gap: 8px;
      width: 100%;
      margin: 0;
      align-items: stretch;
    }
    .shop-item .shop-card-actions .quantity-btn {
      background: var(--shop-qty-btn-bg, #fafaf9);
      color: var(--shop-qty-btn-fg, #404040);
      border: 1px solid var(--shop-qty-btn-border, #d6d3d1);
      border-radius: 6px;
      width: 100%;
      min-width: 0;
      height: 44px;
      cursor: pointer;
      font-size: 1.125rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      padding: 0;
      box-shadow: none;
    }
    .shop-item .shop-card-actions .quantity-btn:hover {
      background: var(--shop-qty-btn-hover-bg, #f5f5f4);
      border-color: var(--shop-qty-btn-hover-border, #a8a29e);
      color: var(--inftdes-foreground, #171717);
    }
    .shop-item .shop-card-actions .quantity-input {
      width: 100%;
      min-width: 0;
      height: 44px;
      text-align: center;
      background: var(--shop-qty-input-bg, #fff);
      color: var(--inftdes-foreground, #171717);
      border: 1px solid var(--inftdes-border, #e5e5e5);
      border-radius: 6px;
      padding: 0 6px;
      font-size: 1rem;
      font-weight: 500;
      box-sizing: border-box;
    }
    .shop-item .shop-card-actions .quantity-input:focus {
      outline: none;
      border-color: #a8a29e;
      box-shadow: 0 0 0 2px rgba(64, 64, 64, 0.12);
    }
    .shop-item .shop-card-actions .add-to-cart-btn {
      background: var(--shop-cart-btn-bg, #2563eb);
      color: var(--shop-cart-btn-fg, #fff);
      border: 1px solid var(--shop-cart-btn-border, #2563eb);
      border-radius: 6px;
      padding: 0 16px;
      cursor: pointer;
      font-size: 0.8125rem;
      font-weight: 500;
      margin: 0;
      width: 100%;
      height: 44px;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      box-shadow: none;
    }
    .shop-item .shop-card-actions .add-to-cart-btn:hover {
      background: var(--shop-cart-btn-hover-bg, #1d4ed8);
      border-color: var(--shop-cart-btn-hover-border, #1d4ed8);
      color: var(--shop-cart-btn-hover-fg, #fff);
    }
    .shop-item .shop-card-login-hint {
      min-height: 98px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--inftdes-muted, #78716c);
      font-size: 0.875rem;
      font-style: italic;
      line-height: 1.5;
    }
    /* Legacy selectors (cart modal etc.) */
    .quantity-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .quantity-btn {
      background: var(--shop-qty-btn-bg, #fafaf9);
      color: var(--shop-qty-btn-fg, #404040);
      border: 1px solid var(--shop-qty-btn-border, #d6d3d1);
      border-radius: 6px;
      width: 44px;
      height: 44px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      box-shadow: none;
    }
    .quantity-btn:hover {
      background: var(--shop-qty-btn-hover-bg, #f5f5f4);
      border-color: var(--shop-qty-btn-hover-border, #a8a29e);
      color: var(--inftdes-foreground, #171717);
    }
    .quantity-input {
      width: 55px;
      height: 44px;
      text-align: center;
      background: var(--shop-qty-input-bg, #fff);
      color: var(--inftdes-foreground, #171717);
      border: 1px solid var(--inftdes-border, #e5e5e5);
      border-radius: 6px;
      padding: 0 4px;
      font-size: 14px;
    }
    .quantity-input:focus {
      outline: none;
      border-color: #a8a29e;
      box-shadow: 0 0 0 2px rgba(64, 64, 64, 0.12);
    }
    .add-to-cart-btn {
      background: var(--shop-cart-btn-bg, #2563eb);
      color: var(--shop-cart-btn-fg, #fff);
      border: 1px solid var(--shop-cart-btn-border, #2563eb);
      border-radius: 6px;
      padding: 10px 16px;
      cursor: pointer;
      font-size: 0.8125rem;
      font-weight: 500;
      width: 100%;
      height: 44px;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      box-shadow: none;
    }
    .add-to-cart-btn:hover {
      background: var(--shop-cart-btn-hover-bg, #1d4ed8);
      border-color: var(--shop-cart-btn-hover-border, #1d4ed8);
      color: var(--shop-cart-btn-hover-fg, #fff);
    }
    .add-to-cart-btn:disabled {
      background: #a8a29e;
      border-color: #a8a29e;
      color: #f5f5f4;
      cursor: not-allowed;
      opacity: 0.85;
    }

    /* Dark mode — 商品卡數量／加入購物車（低調網店風） */
    body.dark-mode.business.shop-page,
    body.dark-mode .shop-page {
      --shop-qty-btn-bg: #262626;
      --shop-qty-btn-fg: #e7e5e4;
      --shop-qty-btn-border: #525252;
      --shop-qty-btn-hover-bg: #333333;
      --shop-qty-btn-hover-border: #78716c;
      --shop-qty-input-bg: #1c1c1c;
      --shop-cart-btn-bg: #3b82f6;
      --shop-cart-btn-fg: #fff;
      --shop-cart-btn-border: #3b82f6;
      --shop-cart-btn-hover-bg: #2563eb;
      --shop-cart-btn-hover-fg: #fff;
      --shop-cart-btn-hover-border: #2563eb;
    }

    body.dark-mode .shop-item .shop-card-actions .quantity-input,
    body.dark-mode .quantity-input {
      background: var(--shop-qty-input-bg, #1c1c1c);
      color: var(--inftdes-foreground, #fafaf9);
      border-color: var(--shop-qty-btn-border, #525252);
    }

    body.dark-mode .shop-item .shop-card-actions .quantity-input:focus,
    body.dark-mode .quantity-input:focus {
      border-color: #a8a29e;
      box-shadow: 0 0 0 2px rgba(250, 250, 249, 0.12);
    }

    body.dark-mode .add-to-cart-btn:disabled {
      background: #3f3f46;
      border-color: #52525b;
      color: #a1a1aa;
    }

    /* Dark mode 加入購物車 — 明確藍色（唔只靠 CSS 變數，避免被覆蓋） */
    body.dark-mode.business.shop-page .shop-item .shop-card-actions .add-to-cart-btn,
    body.dark-mode.shop-page .shop-item .shop-card-actions .add-to-cart-btn,
    body.dark-mode.business.shop-page .add-to-cart-btn,
    body.dark-mode.shop-page .add-to-cart-btn {
      background: #3b82f6 !important;
      border-color: #3b82f6 !important;
      color: #fff !important;
    }

    body.dark-mode.business.shop-page .shop-item .shop-card-actions .add-to-cart-btn:hover,
    body.dark-mode.shop-page .shop-item .shop-card-actions .add-to-cart-btn:hover,
    body.dark-mode.business.shop-page .add-to-cart-btn:hover,
    body.dark-mode.shop-page .add-to-cart-btn:hover {
      background: #2563eb !important;
      border-color: #2563eb !important;
      color: #fff !important;
    }

    .cart-button {
      position: fixed;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      background: var(--inftdes-accent, #d97706);
      color: white;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 18px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
      cursor: pointer;
      z-index: 1000;
      transition: all 0.3s ease;
    }
    .cart-button:hover {
      background: var(--inftdes-accent-hover, #b45309);
      box-shadow: 0 4px 18px rgba(var(--inftdes-accent-rgb, 217, 119, 6),0.18);
    }
    .cart-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background: #dc3545;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
    .login-required {
      text-align: center;
      padding: 40px 20px;
      background: #f8f9fa;
      border-radius: 8px;
      margin: 20px 0;
    }
    .login-required a {
      color: var(--inftdes-accent);
      text-decoration: none;
      font-weight: 500;
    }
    .login-required a:hover {
      text-decoration: underline;
    }
    .login-required .btn-primary {
      background-color: var(--inftdes-accent, #d97706) !important;
      border-color: var(--inftdes-accent, #d97706) !important;
      color: #ffffff !important;
      font-weight: 500 !important;
    }
    .login-required .btn-primary:hover {
      background-color: var(--inftdes-accent-hover, #b45309) !important;
      border-color: var(--inftdes-accent-hover, #b45309) !important;
      color: #ffffff !important;
    }
    /* Dark mode support for login required section */
    body.dark-mode .login-required {
      background: #2c3440 !important;
      color: #e0e0e0 !important;
    }
    body.dark-mode .login-required h4 {
      color: #e0e0e0 !important;
    }
    body.dark-mode .login-required p {
      color: #cccccc !important;
    }
    body.dark-mode .login-required .btn-primary {
      background-color: var(--inftdes-accent, #d97706) !important;
      border-color: var(--inftdes-accent, #d97706) !important;
      color: #ffffff !important;
    }
    /* Dark mode support for cart modal */
    body.dark-mode .modal-content {
      background-color: #2c3440 !important;
      color: #e0e0e0 !important;
    }
    body.dark-mode .modal-header {
      border-bottom-color: #495057 !important;
    }
    body.dark-mode .modal-footer {
      border-top-color: #495057 !important;
    }
    body.dark-mode .modal-title {
      color: #e0e0e0 !important;
    }
    body.dark-mode .btn-close {
      filter: invert(1) !important;
    }
    body.dark-mode .cart-item {
      border-bottom-color: #495057 !important;
    }
    body.dark-mode .cart-item h6 {
      color: #e0e0e0 !important;
    }
    body.dark-mode .cart-item .text-muted {
      color: #cccccc !important;
    }
    body.dark-mode .cart-item .fw-bold {
      color: #e0e0e0 !important;
    }
    body.dark-mode .btn-outline-secondary {
      color: #e0e0e0 !important;
      border-color: #6c757d !important;
      background-color: transparent !important;
    }
    body.dark-mode .btn-outline-secondary:hover {
      color: #ffffff !important;
      background-color: #6c757d !important;
      border-color: #6c757d !important;
    }
    body.dark-mode .btn-secondary {
      background-color: #6c757d !important;
      border-color: #6c757d !important;
      color: #ffffff !important;
    }
    body.dark-mode .btn-primary {
      background-color: var(--inftdes-accent, #d97706) !important;
      border-color: var(--inftdes-accent, #d97706) !important;
      color: #ffffff !important;
    }
    body.dark-mode .btn-danger {
      background-color: #dc3545 !important;
      border-color: #dc3545 !important;
      color: #ffffff !important;
    }
    .shop-item .shop-desc {
      color: #444;
      font-size: 0.98em;
      margin-bottom: 10px;
      text-align: center;
    }
    @media (max-width: 700px) {
      .shop-list {
        flex-direction: column;
        gap: 18px;
        align-items: stretch;
      }
      .shop-item {
        width: 100%;
        max-width: 100%;
      }
    }
    body.dark-mode .shop-item {
      background: #23272f !important;
      color: #eee !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    }
    body.dark-mode .shop-item .shop-desc {
      color: #bbb !important;
    }
    /* .shop-section layout: use .shop-shell in inftdes-redesign.css */
    .shop-title {
      width: 100%;
      margin-bottom: 2rem;
      padding: 0;
    }
    .shop-title h2 {
      font-size: 2.5rem; /* 與其他頁面標題字大小一致 */
      color: #333; /* Light Mode 標題顏色 */
      font-weight: 700;
      position: relative;
      text-align: center; /* 置中標題 */
      margin-bottom: 1.5rem; /* 增加標題與內容間距 */
    }
    .shop-title h2::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 4px;
      background: var(--inftdes-accent, #d97706); /* Light Mode 標題下劃線顏色 */
      border-radius: 2px;
    }
    body.dark-mode .shop-title h2 {
      color: #e0e0e0; /* Dark Mode 標題顏色 */
    }
    body.dark-mode .shop-title h2::after {
      background: var(--inftdes-accent-hover, #b45309); /* Dark Mode 標題下劃線顏色 */
    }
    
    body.dark-mode .shop-title {
      background: transparent;
    }

    /* === 篩選控制統一樣式 === */
    #shop-filters {
      background: rgba(248, 249, 250, 0.8);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 24px;
    }

    /* Flex 版 filter 佈局 */
  #shop-filters .filters-flex { display:flex; gap:12px; align-items:center; }
    #shop-filters .filter-col-category { flex:0 0 auto; }
    #shop-filters .filter-col-category select { min-width:150px; }
    #shop-filters .filter-col-search { flex:1 1 auto; min-width:260px; }
  #shop-filters .filter-col-reset { flex:0 0 60px; display:flex; align-items:center; }
  #shop-filters .filter-col-reset .filter-control { padding:0; display:flex; align-items:center; justify-content:center; height:48px; line-height:1; }
    /* 重置按鈕正方形 (桌面) */
    @media (min-width: 768px) {
  #shop-filters .filter-col-reset { flex:0 0 48px; max-width:48px; display:flex; }
  #shop-filters .filter-col-reset .filter-control { width:48px; height:48px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
      #shop-filters .filter-col-reset .filter-control i { font-size:18px; }
    }
    /* 手機維持全寬 */
    @media (max-width: 767px) {
      #shop-filters .filter-col-reset .filter-control { width:100%; }
    }
    @media (max-width: 767px) {
      #shop-filters .filters-flex { flex-direction:column; }
      #shop-filters .filter-col-reset { flex:0 0 auto; width:100%; max-width:none; }
    }

    .filter-control {
      height: 48px;
      font-size: 15px;
      border: 1px solid #ced4da;
      border-radius: 6px;
      background-color: #ffffff;
      color: #495057;
      box-sizing: border-box;
      width: 100%;
      line-height: 1.5;
    }

    .filter-control:focus {
      border-color: var(--inftdes-accent);
      box-shadow: 0 0 0 0.2rem rgba(var(--inftdes-accent-rgb, 217, 119, 6), 0.25);
      outline: none;
    }

    .filter-control.form-select {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 16px 12px;
      padding: 10px 44px 10px 14px;
    }

  /* === 統一篩選輸入組高度 / 對齊 (桌機) === */
  .filter-control.input-group { height: 48px; display:flex; align-items:stretch; padding:0; }
  .filter-control.input-group .input-group-text,
  .filter-control.input-group .form-control,
  .filter-control.input-group .btn-outline-secondary { height: 48px; box-sizing:border-box; }
  .filter-control.input-group .input-group-text { display:flex; align-items:center; justify-content:center; padding:0 12px; font-size:15px; border:1px solid #ced4da; border-right:none; background:#e9ecef; height:48px; }
  .filter-control.input-group .form-control { border:1px solid #ced4da; border-left:none; border-right:none; border-radius:0; font-size:15px; padding:0 12px; line-height:1.5; height:48px; }
  .filter-control.input-group .btn-outline-secondary { display:flex; align-items:center; justify-content:center; padding:0 16px; font-size:15px; border:1px solid #ced4da; border-left:none; border-radius:0 6px 6px 0; background:#f8f9fa; }
  .filter-control.input-group .btn-outline-secondary:hover { background:#e2e6ea; }
  body.dark-mode .filter-control.input-group .input-group-text { background:#49505a; border-color:#616b76; color:#fff; }
  body.dark-mode .filter-control.input-group .form-control { background:#49505a; border-color:#616b76; color:#fff; }
  body.dark-mode .filter-control.input-group .btn-outline-secondary { background:#49505a; border-color:#616b76; color:#fff; }
  body.dark-mode .filter-control.input-group .btn-outline-secondary:hover { background:#5a6470; }
    /* === 自訂搜尋欄（內置清除） === */
  .search-wrapper { position:relative; height:48px; display:flex; align-items:center; background:#ffffff; border:1px solid #ced4da; border-radius:6px; padding:0 14px 0 44px; box-sizing:border-box; }
  .search-wrapper .search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:16px; opacity:.75; pointer-events:none; }
  .search-wrapper input { flex:1; height:100%; border:none; outline:none; background:transparent; font-size:15px; padding:0 34px 0 0; color:#495057; }
  .search-wrapper .clear-btn { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:none; background:transparent; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; color:#666; line-height:1; }
    .search-wrapper .clear-btn:hover { background:rgba(0,0,0,0.07); }
    .search-wrapper .clear-btn:active { background:rgba(0,0,0,0.12); }
    body.dark-mode .search-wrapper { background:#49505a; border-color:#616b76; }
    body.dark-mode .search-wrapper input { color:#fff; }
    body.dark-mode .search-wrapper .clear-btn { color:#ddd; }
    body.dark-mode .search-wrapper .clear-btn:hover { background:rgba(255,255,255,0.18); }
    @media (max-width: 767px) {
  .search-wrapper { height:42px; padding:0 12px 0 40px; }
  .search-wrapper input { font-size:14px; }
  .search-wrapper .clear-btn { width:26px; height:26px; font-size:14px; }
  .search-wrapper .search-icon { font-size:15px; }
    }

    .filter-control.btn-outline-primary {
      height: 48px;
      font-size: 15px;
      font-weight: 500;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* 商品載入 skeleton */
    @keyframes shop-sk-shimmer {
      0% { background-position: 100% 0; }
      100% { background-position: 0 0; }
    }
    .shop-list.shop-list--skeleton {
      pointer-events: none;
    }
    .shop-list.shop-list--skeleton li.shop-skel {
      min-height: 280px;
    }
    .shop-skel .shop-skel-img {
      height: 140px;
      border-radius: 8px;
      margin-bottom: 12px;
      background: linear-gradient(105deg, #e9e9ec 0%, #ececf0 34%, #f4f4f8 54%, #e9e9ec 73%);
      background-size: 200% 100%;
      animation: shop-sk-shimmer 1.2s ease-in-out infinite;
    }
    body.dark-mode .shop-skel .shop-skel-img {
      background: linear-gradient(105deg, #3a4149 0%, #474e58 44%, #3a4149 100%);
      background-size: 200% 100%;
    }
    .shop-skel .shop-skel-line {
      height: 12px;
      border-radius: 6px;
      margin: 8px auto;
      background: rgba(120,130,145,0.18);
      max-width: 90%;
      animation: shop-sk-shimmer 1.35s ease-in-out infinite;
    }
    .shop-skel .shop-skel-line.short { max-width: 55%; }
    .shop-skel .shop-skel-line.tiny {
      margin-top: 18px;
      height: 30px;
      max-width: 70%;
      border-radius: 6px;
      background: rgba(var(--inftdes-accent-rgb, 217, 119, 6), 0.12);
      animation-duration: 1.45s;
    }
    @media (max-width: 768px) {
      .shop-section {
        padding: 24px 12px;
        margin: 30px auto;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
      }
      .shop-title h2 {
        font-size: 1.8rem;
      }
      /* 篩選控制響應式 */
      .filter-control {
        height: 40px !important;
        font-size: 13px !important;
        padding: 6px 10px !important;
      }
      
      .filter-control.input-group-text {
        height: 40px !important;
        padding: 0 10px !important;
      }
      
      .filter-control.btn-outline-secondary,
      .filter-control.btn-outline-primary {
        height: 40px !important;
        padding: 0 12px !important;
      }
      
      #shop-filters .col-md-3,
      #shop-filters .col-md-7,
      #shop-filters .col-md-2 {
        margin-bottom: 8px;
        padding: 0 4px !important;
      }
      
      #shop-filters {
        padding: 12px !important;
      }
      #shop-filters .input-group {
        height: 40px;
      }
    } /* <--- This closing brace was missing */
    /* 平板版樣式 (768px - 991px) */
    @media (max-width: 991px) {
      .shop-list {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
      }
      .shop-item {
        padding: 16px;
      }
      .shop-item img {
        height: 160px;
        max-width: 200px;
      }
      .shop-item .shop-title {
        font-size: 1.1rem;
      }
      .shop-item .shop-price {
        font-size: 1.2rem;
      }
    }
    
    /* 手機版樣式 (576px - 767px) */
    @media (max-width: 767px) {
      section {
        padding: 20px 16px 24px 16px !important;
        margin: 16px auto 0 auto !important;
      }
      /* 篩選控制手機版 */
      #shop-filters {
        padding: 12px;
        margin-bottom: 16px;
      }
      
      #shop-filters .col-md-3,
      #shop-filters .col-md-7,
      #shop-filters .col-md-2 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        margin-bottom: 10px;
        padding-left: 0;
        padding-right: 0;
      }
      
      #shop-filters .col-md-2:last-child {
        margin-bottom: 0;
      }
      
      .filter-control {
        height: 38px;
        font-size: 12px;
      }
      
      .filter-control.input-group {
        height: 38px;
        display: flex;
        align-items: center;
      }

      .filter-control.input-group .input-group-text {
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        font-size: 12px;
      }

      .filter-control.input-group .form-control {
        height: 38px;
        display: flex;
        align-items: center;
        font-size: 12px;
      }

      .filter-control.input-group .btn-outline-secondary {
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        font-size: 12px;
      }
      
      .filter-control.btn-outline-primary {
        height: 38px;
        font-size: 12px;
      }
      .shop-list {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
      }
      .shop-item {
        padding: 16px 12px;
        border-radius: 10px;
      }
      .shop-item img {
        height: 140px;
        max-width: 140px;
        margin-bottom: 0;
      }
      .shop-item .category-badge {
        font-size: 0.7rem;
        padding: 3px 6px;
        margin-bottom: 6px;
      }
      .shop-item .shop-title {
        font-size: 1rem;
        margin-bottom: 0;
        line-height: 1.3;
      }
      .shop-item .shop-card-actions .quantity-btn,
      .shop-item .shop-card-actions .quantity-input,
      .shop-item .shop-card-actions .add-to-cart-btn {
        height: 40px;
      }
      .shop-item .shop-card-actions .quantity-controls {
        grid-template-columns: 40px 1fr 40px;
      }
      .shop-item .shop-price {
        font-size: 1.1rem;
        margin-bottom: 6px;
      }
      .shop-item .shop-desc {
        font-size: 0.8rem;
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .quantity-controls {
        gap: 6px;
        margin: 10px 0;
      }
      .quantity-btn {
        width: 28px;
        height: 28px;
        font-size: 14px;
      }
      .quantity-input {
        width: 45px;
        height: 28px;
        font-size: 13px;
      }
      .add-to-cart-btn {
        padding: 8px 12px;
        font-size: 13px;
        height: 36px;
        margin-top: 10px;
      }
      .quantity-input {
        width: 45px;
        font-size: 14px;
      }
      .add-to-cart-btn {
        padding: 6px 12px;
        font-size: 12px;
        margin-top: 8px;
      }
      /* 購物車按鈕手機版調整 */
      .cart-button {
        right: 16px;
        top: auto;
        bottom: 80px;
        width: 50px;
        height: 50px;
        font-size: 20px;
      }
      .cart-badge {
        width: 22px;
        height: 22px;
        font-size: 11px;
      }
    }
    
    /* 小手機版樣式 (最大 575px) */
    @media (max-width: 575px) {
      .shop-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
      .shop-item {
        padding: 12px 8px;
      }
      .shop-item img {
        height: 120px;
        max-width: 120px;
        margin-bottom: 8px;
      }
      .shop-item .shop-title {
        font-size: 0.9rem;
        margin-bottom: 4px;
      }
      .shop-item .shop-price {
        font-size: 1rem;
        margin-bottom: 4px;
      }
      .shop-item .shop-desc {
        font-size: 0.75rem;
        margin-bottom: 8px;
        -webkit-line-clamp: 1;
        line-clamp: 1;
      }
      .quantity-controls {
        gap: 4px;
        margin: 8px 0;
      }
      .quantity-btn {
        width: 26px;
        height: 26px;
        font-size: 12px;
      }
      .quantity-input {
        width: 40px;
        height: 26px;
        font-size: 12px;
      }
      .add-to-cart-btn {
        padding: 6px 10px;
        font-size: 12px;
        height: 32px;
        margin-top: 8px;
      }
    }

    /* 極小螢幕適配 (320px 以下) */
    @media (max-width: 320px) {
      /* 篩選控制極小螢幕 */
      .filter-control {
        height: 36px !important;
        font-size: 11px;
        padding: 6px 8px;
      }
      #shop-filters .input-group {
        height: 36px;
      }
      #shop-filters .col-md-3,
      #shop-filters .col-md-7,
      #shop-filters .col-md-2 {
        margin-bottom: 8px;
      }
      .quantity-btn {
        width: 24px;
        height: 24px;
        font-size: 12px;
      }
      .quantity-input {
        width: 35px;
        height: 24px;
        font-size: 12px;
        padding: 2px;
      }
      .add-to-cart-btn {
        padding: 4px 8px;
        font-size: 11px;
        height: 28px;
        margin-top: 6px;
      }
      .category-badge {
        font-size: 0.65rem;
        padding: 2px 5px;
      }
      /* 篩選區域手機版優化 */
      #shop-filters .row {
        margin-bottom: 8px !important;
      }
      #shop-filters .form-select,
      #shop-filters .form-control {
        font-size: 0.9rem;
        padding: 8px 12px;
      }
      #shop-filters .input-group-text {
        font-size: 0.9rem;
        padding: 8px 10px;
      }
      #shop-filters .btn {
        font-size: 0.9rem;
        padding: 8px 12px;
      }
    }
    
    /* Dark mode support for filters */
    body.dark-mode #shop-filters {
      background: rgba(44, 52, 64, 0.8) !important;
      border: 1px solid #495057 !important;
    }

    body.dark-mode .filter-control {
      background-color: #495057 !important;
      border-color: #6c757d !important;
      color: #e0e0e0 !important;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    }

    body.dark-mode .filter-control.form-select {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
    }

    body.dark-mode .filter-control:focus {
      background-color: #495057 !important;
      border-color: var(--inftdes-accent, #d97706) !important;
      color: #e0e0e0 !important;
      box-shadow: 0 0 0 0.2rem rgba(var(--inftdes-accent-rgb, 217, 119, 6), 0.25) !important;
    }
    body.dark-mode .btn-outline-secondary,
    body.dark-mode .btn-outline-primary {
      border-color: #6c757d !important;
      color: #e0e0e0 !important;
    }
    body.dark-mode .btn-outline-secondary:hover,
    body.dark-mode .btn-outline-primary:hover {
      background-color: #495057 !important;
      border-color: #6c757d !important;
      color: #ffffff !important;
    }
    body.dark-mode #products-summary {
      color: #cccccc !important;
    }
    body.dark-mode #no-products {
      color: #cccccc !important;
    }
    body.dark-mode #no-products .text-muted {
      color: #999999 !important;
    }
    body.dark-mode .shop-item {
      background: #2c3440 !important;
      border-color: #495057 !important;
    }
    body.dark-mode .shop-item:hover {
      border-color: var(--inftdes-accent, #d97706) !important;
      background: #343a46 !important;
    }
    body.dark-mode .shop-item .shop-title {
      color: #e0e0e0 !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }
    body.dark-mode .shop-item .view-detail-btn {
      border-color: var(--inftdes-accent, #d97706);
      color: var(--inftdes-accent-hover, #b45309);
      background: rgba(100, 181, 246, 0.08);
    }
    body.dark-mode .shop-item .view-detail-btn:hover {
      background: rgba(100, 181, 246, 0.16);
      color: #bbdefb;
    }
    body.dark-mode .shop-item .shop-desc {
      color: #cccccc !important;
    }
    body.dark-mode .product-page .desc-tags .feature-tag {
      border-color: #f87171;
      color: #fecaca;
      background: rgba(248, 113, 113, 0.16);
    }
    body.dark-mode .shop-item .feature-tag {
      border-color: #ff8a80;
      color: #ffb4ab;
      background: rgba(255, 138, 128, 0.14);
    }
    body.dark-mode .shop-item .category-badge {
      background: rgba(var(--inftdes-accent-rgb, 217, 119, 6), 0.2) !important;
      color: var(--inftdes-accent, #d97706) !important;
    }
  /* 專業化：商店信任保障 */
  .shop-trust-strip {
    max-width: 1100px;
    margin: 18px auto 0;
    padding: 0 6px;
  }
  .shop-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
  }
  .shop-trust-item {
    background: #f7fbff;
    border: 1px solid #e4eef8;
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
    color: #34495e;
    font-size: 0.93rem;
    font-weight: 600;
  }
  .shop-trust-item i {
    color: var(--inftdes-accent);
    margin-right: 6px;
  }
  body.dark-mode .shop-trust-item {
    background: #273140;
    border-color: #3a4758;
    color: #d6e2f1;
  }
  body.dark-mode .shop-trust-item i {
    color: #82c4ff;
  }
  /* 版面切換過渡，統一首頁節奏 */
  html.js body.business {
    opacity: 0;
    transition: opacity 0.45s ease-out;
  }
  html.js body.business.page-reveal {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    html.js body.business {
      transition: none;
      opacity: 1;
    }
  }
  /* 移除舊重疊修正 (已整合至上方統一寫法) */
  .filter-control.input-group .btn-outline-secondary:focus { box-shadow:none; }