.row-count {display: none;}
/* Ensure category nav never falls back to UA bullets / wrong cascade when sheet loads late */
nav.primary-navigation ul.primary-navigation-list { list-style: none; margin: 0; padding-inline-start: 0; }
@media (max-width:768px){#home-link {background:rgb(180 180 180 / 45%);color:red;border-radius:28px;}}
.dark .search-box {background:#2e404e;color:white;}
.swal2-container.swal2-shown {background-color:unset;}
.swal2-popup.swal2-modal {border-radius:16px;padding:2rem 1.5rem;}
.swal2-title {font-size:1.75rem;font-weight:600;color:#1a1a1a;margin-bottom:1rem;}
.dark .swal2-title {color:#ffffff;}
.swal2-html-container {margin:1.5rem 0;font-size:1rem;line-height:1.6;}
.swal2-html-container #buy_response {margin:0;padding:1rem;background:#f8f9fa;border-radius:8px;border-left:4px solid #28a745;word-break:break-word;}
.dark .swal2-html-container #buy_response {background:#2e404e;border-left-color:#4caf50;}
.swal2-html-container a {display:inline-flex;align-items:center;gap:8px;margin-top:1rem;padding:0.75rem 1.5rem;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:white !important;text-decoration:none;border-radius:8px;font-weight:500;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(102, 126, 234, 0.4);}
.swal2-html-container a:hover {transform:translateY(-2px);box-shadow:0 6px 20px rgba(102, 126, 234, 0.6);color:white !important;}
.swal2-html-container a svg {width:20px;height:20px;stroke:white;}
.swal2-confirm {background:linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;border:none !important;border-radius:8px !important;padding:0.75rem 2rem !important;font-weight:500 !important;font-size:1rem !important;box-shadow:0 4px 15px rgba(102, 126, 234, 0.4) !important;transition:all 0.3s ease !important;}
.swal2-confirm:hover {transform:translateY(-2px) !important;box-shadow:0 6px 20px rgba(102, 126, 234, 0.6) !important;}
.swal2-icon.swal2-success {border-color:#28a745;color:#28a745;}
.swal2-icon.swal2-success [class^=swal2-success-line] {background-color:#28a745;}
.swal2-icon.swal2-success .swal2-success-ring {border-color:rgba(40, 167, 69, 0.3);}
a.selected {font-weight: bold;}
.circle-button {width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 23px; text-align: center; line-height: 1; border: none; color: #555; background: linear-gradient(145deg, #e0e0e0, #ffffff); cursor: pointer;}
.circle-button:hover {background: linear-gradient(145deg, #a5a4a4, #ffffff);}
.formatted {color: red;}
.button-row {display: flex; flex-wrap: wrap; margin-bottom: 10px;}
.table td, .table th {padding: 10px 10px;}
.filter-button {border: 1px; border-radius: 5px; cursor: pointer; transition: transform 0.01s ease-in-out;}
.filter-button:active {transform: translateY(1px); border: 1px;}
.filter-button:hover {background: rgba(52, 152, 219, 0.884); color: whitesmoke;}
.dropdown-item:focus, .dropdown-item:hover {background-color: #8e8f9c;}
.product-search-box {width: 100%; max-width: 500px; margin: 1px auto; padding: 10px 15px; border: 1px solid #3ca0e7; border-radius: 25px; font-size: 16px; outline: none; transition: all 0.3s ease; display: block;}
.product-search-box:focus {border-color: #007bff; box-shadow: 0 0 10px rgba(60, 160, 231, 0.3);}
.dark .product-search-box {background: #2e404e; color: white; border-color: #3ca0e7;}
.dark .product-search-box:focus {border-color: #007bff;}
.product-search-wrapper {text-align: center; margin: 0px 0;}
nav.primary-navigation {margin: 0 auto; text-align: center;}
nav.primary-navigation ul li {list-style: none; border-left: 1px solid #3ca0e7; border-right: 1px solid #3ca0e7; display: inline-block;padding: 0px 5px; position: relative; text-decoration: none; text-align: center;align-content: center;}
nav.primary-navigation li a {color: currentColor;}
nav.primary-navigation li:hover {color: blue;}
nav.primary-navigation li:hover {cursor: pointer;}
nav.primary-navigation ul li ul {visibility: hidden; opacity: 0; position: absolute; padding-left: 0; left: 0; display: none; background: rgba(186, 187, 205, 0.954); z-index: 1000; border-radius: 5px;}
nav.primary-navigation ul li:hover>ul,
nav.primary-navigation ul li ul:hover {visibility: visible; opacity: 1; display: block; text-align: left; padding: 3px; z-index: 1000;left:0;right:auto;}
nav.primary-navigation ul li ul li {clear: both; width: 100%; text-align: left; border-style: none; padding: 3px;}
nav.primary-navigation ul li ul li a:hover {padding-left: 10px; border-left: 2px solid #3ca0e7; transition: all 0.3s ease;}
.primary-navigation-list {display: grid;grid-template-columns: repeat(5, 1fr);grid-row-gap: 8px;}
@media (max-width: 1200px) {.primary-navigation-list {grid-template-columns: repeat(4, 1fr);}}
@media (max-width: 992px) {.primary-navigation-list {grid-template-columns: repeat(3, 1fr);}}
.primary-navigation .primary-navigation-list {padding-inline-start: 0px !important;}
@media (max-width: 768px) {
  .primary-navigation-list {grid-template-columns: repeat(2, 1fr);padding-inline-start: 0px !important;}
  .primary-navigation-list {grid-row-gap: 5px;}
  nav.primary-navigation ul li ul {
    max-width: min(calc(100vw - 24px), 320px);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  nav.primary-navigation ul li ul li {
    padding: 2px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  nav.primary-navigation ul li ul li.dropdown-item {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    font-size: 12px;
    display: flex;
  }
}
a {text-decoration: none;}
a:hover {color: #3CA0E7;}
ul li ul li a {transition: all 0.5s ease;}
#des_details {display: none;}
/* Temporarily hide supplier online/offline sup badges. */
.list-view-description sup[style*="cursor:default"],
.product-card-type sup[style*="cursor:default"] {display:none !important;}
.controls-wrapper {display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 8px 0;}
.currency-select {padding: 6px 12px; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; cursor: pointer;}
.display-options-dropdown {position: relative; display: inline-block;}
.display-options-button {background-color: unset; border: 0px solid #ddd;cursor: pointer; min-width: 150px; justify-content: space-between;}
.display-options-button span:hover {color: blue;}
.dark .display-options-content {background: rgba(186, 187, 205, 0.954); color: black;}
.display-options-content {display: none; position: absolute; background: rgba(186, 187, 205, 0.954); min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-radius: 4px; z-index: 1000; padding: 10px;}
.display-options-dropdown:hover .display-options-content {display: block;}
.option-item {display: flex; align-items: center; gap: 8px; padding: 6px; cursor: pointer; border-radius: 4px;margin-bottom: 0.1rem;}
.dark .option-item:active, .dark .option-item:hover {background-color: #8e8f9c;color: blue;}
.option-item:hover {background-color: #8e8f9c;}
.toggle-checkbox {cursor: pointer; width: 16px; height: 16px; margin: 0;}
.toggle-label {cursor: pointer; margin: 0; font-size: 16px; user-select: none;}
.option-item:hover .toggle-label {color: blue;}
.dark .option-item .toggle-label {color: black;}
.dark .option-item:hover .toggle-label {color: blue;}
.preview-button {padding: 6px 6px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: background-color 0.2s;}
.preview-button:hover {background-color: #0056b3;}

.category-nav-link.active {background-color: rgba(0, 128, 128, 0.56) !important;}
.category-section {transition: opacity 0.3s ease-in-out;}
#require_extra_text{border: 0.5px solid #80808066;border-radius: 5px;padding: 5px;width: 100%;background: cornsilk;}
.dark #require_extra_text{background: #2e404e;}
.checkout-require-dynamic {display:none;}
.checkout-require-row {display:flex;gap:2px;margin-top:3px;}
.checkout-require-field {min-width:0;}
.checkout-require-field-label {font-size:12px;opacity:0.75;display:block;margin-bottom:3px;}
.checkout-require-input-wrap {position:relative;}
.checkout-require-input-wrap .form-control {padding-right:42px;}
.checkout-require-toggle {position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:#6b7280;cursor:pointer;padding:4px;line-height:1;}
.checkout-require-toggle:hover {color:#374151;}
.dark .checkout-require-toggle {color:#d1d5db;}
.checkout-password-masked {
  -webkit-text-security: disc;
}
.view-switcher {display:inline-flex;background:#f0f0f0;border-radius:50px;padding:4px;gap:4px;transition:all 0.3s ease;}
.dark .view-switcher {background:#2e404e;}
.view-btn {width:30px;height:30px;border:none;border-radius:50%;background:transparent;color:#666;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;font-size:16px;}
.view-btn:hover {background:rgba(0,0,0,0.05);color:#333;}
.dark .view-btn {color:#ccc;}
.dark .view-btn:hover {background:rgba(255,255,255,0.1);color:#fff;}
.view-btn.active {background:#007bff;color:white;}
.view-btn.active:hover {transform:translateY(-1px);}
.products-grid-container {display:none;}
.products-grid {display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:20px;padding:20px 0;}
.product-card {background:white;border-radius:12px;padding:10px;transition:transform 0.2s, box-shadow 0.2s;display:flex;flex-direction:column;height:100%;border: 0.5px solid #87ceeb69;}
.product-card:hover {background: #ffffff75;}
.dark .product-card {background:#2e404e;color:white;box-shadow:0 2px 8px rgba(0,0,0,0.3);}
.dark .product-card:hover {box-shadow:0 4px 16px rgba(0,0,0,0.5);}
.product-card-header {display:flex;align-items:flex-start;gap:12px;margin-bottom:8px;}
.product-card-icon {width:40px;height:40px;flex-shrink:0;border-radius:8px;object-fit:contain;}
.product-card-title {flex:1;font-weight:bold;font-size:15px;line-height:1.4;color:#333;}
.dark .product-card-title {color:#fff;}
.product-card-usage-days {font-size:13px;color:#666;margin-top:4px;}
.dark .product-card-usage-days {color:#ccc;}
.product-card-warranty {font-size:13px;color:#666;margin-top:4px;}
.dark .product-card-warranty {color:#ccc;}
.product-card-info {margin-bottom:8px;}
.product-card-type {font-size:13px;color:#888;font-weight:normal;line-height:1.5;}
.dark .product-card-type {color:#aaa;}
.product-card-body {flex:1;display:flex;flex-direction:column;gap:12px;margin-top:12px;justify-content:flex-end;}
.product-card-meta {display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.product-card-stock {display:flex;align-items:center;gap:6px;font-size:14px;}
.product-card-stock:has(.fa-sad-tear) {background:#ffc107;color:#fff;padding:5px 13px;border-radius:15px;opacity: .65;}
.product-card-stock:has(.fa-sad-tear) i {color:#fff;}
.btn-outline-success {min-width: 70% !important;}
.btn-outline-success,.product-card-price {font-size:16px;font-weight:bold;color: royalblue !important;}
.btn-outline-success,.product-card-price--buy {cursor:pointer;border-radius:15px;padding:5px 13px;transition:background 0.2s,color 0.2s;background: #d3d3d342;border: 0px;}
.btn-outline-success:hover,.product-card-price--buy:hover {background:rgba(0,123,255,0.12);color:#0d5fff;border: 0px;}
.dark .btn-outline-success,.dark .product-card-price--buy {background: ghostwhite;border: 0px;}
.dark .btn-outline-success:hover,.dark .product-card-price--buy:hover {background:rgb(239, 239, 255);border: 0px;}
.product-card-price--soldout {cursor:default;opacity:0.55; padding: 5px 13px;}
.products-grid .product-card-action.buy.grid-buy-hidden {display:none !important;}
.products-grid .product-card-action.soldout.grid-soldout-hidden {display:none !important;}
.product-card-code {font-size:12px;color:#999;display:none;}
.product-card-code.show {display:block;}
.dark .product-card-code {color:#888;}
.products-grid .product-card:has(.product-card-price[data-can-buy="1"]) .product-card-title {cursor:pointer;}
.products-grid .product-card:has(.product-card-price[data-can-buy="1"]) .product-card-code {cursor:default;}
.product-card-footer {margin-top:auto;padding-top:0px;border-top:0px solid #eee;}
.dark .product-card-footer {border-top-color:#444;}
.product-card-action {width:100%;padding:10px;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px;}
.product-card-action.buy {background:#007bff;color:white;}
.product-card-action.buy:hover {background:#0d5fff;}
.product-card-action.soldout {background:#ffc107;color:#333;cursor:not-allowed;opacity:0.7;}
.view-list .products-grid-container {display:none !important;}
.view-list table.preview {display:table !important;}
.view-grid .products-grid-container {display:block !important;}
.view-grid table.preview {display:none !important;}
@media (min-width:1200px){
  .products-grid {grid-template-columns:repeat(3, 1fr);}
  .product-card-icon {width:60px !important;height:60px !important;}
}
@media (min-width:992px) and (max-width:1199px){
  .products-grid {grid-template-columns:repeat(2, 1fr);}
  .product-card-icon {width:50px !important;height:50px !important;}
}
@media (min-width:768px) and (max-width:991px){.products-grid {grid-template-columns:repeat(2, 1fr);}}
@media (min-width:768px) {.product-card {min-height:222px;}}
@media (max-width:768px){
.view-list .products-grid-container {display:none !important;}
.view-list table.preview {display:table !important;}
.view-grid .products-grid-container {display:block !important;}
.view-grid table.preview {display:none !important;}
.list-view-description>span {
    font-weight: normal !important;
  }
}
@media (max-width:767px){.products-grid {grid-template-columns:repeat(2, 1fr);gap:15px;}}
@media (max-width:480px){
  .products-grid {grid-template-columns:1fr;}
  .mr-2, .mx-2 {margin-right: .125rem !important;}
  .hide-on-mobile {
    display: none;
  }
  .list-view-action {
    max-width: 90px !important;
  }
.view-list .list-view-action .buy-btn-mobile.list-buy-hidden,
.view-list .list-view-action .sold-btn-mobile.list-soldout-hidden { display: none !important; }
.list-view-action,
.list-view-action { display: none !important; }
.list-view-stock .list-view-stock-soldout { background:#db7e06 !important; color:#fff !important; border-color:#db7e06 !important; }
.list-view-stock .list-view-stock-soldout i { color:#fff !important; }
.list-view-price.list-view-price--buy { cursor:pointer; }
.list-view-price.list-view-price--buy:hover { background: rgba(0,123,255,0.08); }
.list-view-price.list-view-price--soldout { cursor:default; opacity:0.85; }
  .buy-btn-mobile {
    padding: 5px 20px !important;
  }
  .sold-btn-mobile {
    padding: 5px 0px !important;
    max-width: 100% !important;
  }
}

.rating-votes {display: none;}
.dropdown-item {margin-bottom: 0.1rem;}

/* Checkout overlay (route-driven) */
body.checkout-open { overflow: hidden !important; }
#checkout-overlay {
  position: fixed; inset: 0; z-index: 1050; pointer-events: none;
  display: flex; align-items: stretch; justify-content: flex-end;
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s;
}
#checkout-overlay.is-open { pointer-events: auto; opacity: 1; visibility: visible; }
#checkout-overlay .checkout-overlay-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
#checkout-overlay .checkout-overlay-panel {
  position: relative; width: 100%; max-width: 520px;
  background: var(--body-bg, #fff); box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  transform: translateX(100%); transition: transform 0.3s ease-out;
  display: flex; flex-direction: column;
}
#checkout-overlay.is-open .checkout-overlay-panel { transform: translateX(0); }
.dark #checkout-overlay .checkout-overlay-panel { background: #2e404e; }
#checkout-overlay .checkout-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid #dee2e6; background: #f8f9fa;
  flex-shrink: 0;
}
.dark #checkout-overlay .checkout-header { background: #253340; border-color: #3d4f5e; }
#checkout-overlay .btn-checkout-back {
  display: inline-flex; align-items: center; justify-content: center;
  color: #6c757d; background: none; border: none; cursor: pointer; font-size: 1.25rem; padding: 6px; margin-left: auto;
  transition: color 0.2s;
}
#checkout-overlay .btn-checkout-back:hover { color: #333; }
#checkout-overlay .btn-checkout-back i { display: block; transition: transform 0.2s; }
#checkout-overlay .btn-checkout-back:hover i { transform: rotate(180deg); }
.dark #checkout-overlay .btn-checkout-back { color: #9ca3af; }
.dark #checkout-overlay .btn-checkout-back:hover { color: #e5e7eb; }
#checkout-overlay .checkout-tabs-nav { display: flex; gap: 0; border-bottom: 1px solid #dee2e6; padding: 10px; background: #f8f9fa; flex-shrink: 0; width: 100%; }
.dark #checkout-overlay .checkout-tabs-nav { background: #253340; border-color: #3d4f5e; }
#checkout-overlay .checkout-nav-toolbar {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 100%;
  padding: 6px 10px; border-bottom: 1px solid #dee2e6; background: #f8f9fa;
}
.dark #checkout-overlay .checkout-nav-toolbar { background: #253340; border-color: #3d4f5e; }
#checkout-overlay .checkout-nav-toolbar-inner {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; max-width: 100%; gap: 8px;
}
#checkout-overlay .checkout-nav-toolbar-group { display: flex; flex-direction: row; align-items: center; gap: 6px; }
#checkout-overlay .checkout-nav-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: none; border-radius: 6px;
  background: #e9ecef; color: #495057; cursor: pointer; font-size: 13px;
  transition: background 0.15s, color 0.15s;
}
#checkout-overlay .checkout-nav-icon-btn:hover:not(:disabled) {
  background: #dee2e6; color: #212529;
}
#checkout-overlay .checkout-nav-icon-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.dark #checkout-overlay .checkout-nav-icon-btn { background: #3d4f5e; color: #e5e7eb; }
.dark #checkout-overlay .checkout-nav-icon-btn:hover:not(:disabled) { background: #4d5f6e; color: #fff; }
#checkout-overlay .checkout-tab-btn {
  padding: 5px; border: none; border-bottom: 2px solid transparent; background: none;
  cursor: pointer; font-size: 14px; color: #6c757d; transition: color 0.2s, border-color 0.2s;
  width: 25%;
}
#checkout-overlay .checkout-tab-btn:hover { color: #495057; }
.dark #checkout-overlay .checkout-tab-btn { color: #9ca3af; }
.dark #checkout-overlay .checkout-tab-btn:hover { color: #d1d5db; }
#checkout-overlay .checkout-tab-btn.active { color: #0d6efd; border-bottom-color: #0d6efd; font-weight: 500; }
.dark #checkout-overlay .checkout-tab-btn.active { color: #60a5fa; border-bottom-color: #60a5fa; }
#checkout-overlay .checkout-tab-pane { display: none; }
#checkout-overlay .checkout-tab-pane.active { display: block; }
#checkout-overlay .checkout-body { padding: 10px 10px 0px 10px; flex: 1; overflow-y: auto; }
#checkout-overlay .checkout-body-zoom-root {
  --checkout-zoom: 1;
  font-size: calc(16px * var(--checkout-zoom));
  min-height: 0;
}
#checkout-overlay .checkout-body-zoom-root .checkout-zt-xl { font-size: 1.125em; font-weight: bold; line-height: 1.35; }
#checkout-overlay .checkout-body-zoom-root .checkout-zt-md { font-size: 0.9375em; }
#checkout-overlay .checkout-body-zoom-root .checkout-zt-sm { font-size: 0.8125em; }
#checkout-overlay .checkout-body-zoom-root .checkout-zt-14 { font-size: 0.875em; }
#checkout-overlay .checkout-body-zoom-root .checkout-coming-soon { font-size: 0.9375em; }
#checkout-overlay .checkout-body-zoom-root .checkout-summary-row { font-size: 0.8125em; }
#checkout-overlay .checkout-body-zoom-root .checkout-summary-row.checkout-summary-total { font-size: 0.9375em; }
#checkout-overlay .checkout-body-zoom-root .checkout-require-collapsible-header { font-size: 0.875em; }
#checkout-overlay .checkout-body-zoom-root .checkout-product-info-inner,
#checkout-overlay .checkout-body-zoom-root .checkout-reviews-inner { font-size: 0.8125em; }
#checkout-overlay .checkout-body-zoom-root .checkout-success-title { font-size: 1.125em; }
#checkout-overlay .checkout-body-zoom-root .checkout-success-content { font-size: 0.875em; }
#checkout-overlay .checkout-body-zoom-root #indexCheckoutSuccessProcessingMessage { font-size: 0.875em; margin-bottom: 1.25rem; white-space: pre-line; }
#checkout-overlay .checkout-body-zoom-root .checkout-qty-wrap .circle-button { font-size: 16px !important; }
#checkout-overlay .checkout-body-zoom-root .checkout-amount-input { font-size: 13px !important; }
#checkout-overlay .checkout-body-zoom-root .checkout-btn-buy { font-size: 15px !important; }
#checkout-overlay .checkout-body-zoom-root #base_price { font-size: 14px !important; }
#checkout-overlay .checkout-body-zoom-root .checkout-btn-order-history { font-size: 15px !important; }
#checkout-overlay .checkout-body-zoom-root .checkout-btn-copy { font-size: 13px !important; }
#checkout-overlay .checkout-body-zoom-root .checkout-quickfill-btn { font-size: 13px !important; }
#checkout-overlay .checkout-body-zoom-root .checkout-success-icon { font-size: 48px !important; }
#checkout-overlay .checkout-body-zoom-root #require_extra_value,
#checkout-overlay .checkout-body-zoom-root .checkout-require-input-wrap input.form-control { font-size: 0.875em !important; }
#checkout-overlay .checkout-body::-webkit-scrollbar { width: 6px; height: 6px; }
#checkout-overlay .checkout-body::-webkit-scrollbar-track { background: transparent; }
#checkout-overlay .checkout-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 3px; }
#checkout-overlay .checkout-body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.35); }
#checkout-overlay .checkout-coming-soon { text-align: center; padding: 2rem 1rem; color: #6c757d; font-size: 15px; }
.dark #checkout-overlay .checkout-coming-soon { color: #9ca3af; }
.dark #checkout-overlay #modal_validity_wrap,
.dark #checkout-overlay #modal_warranty_wrap { color: #9ca3af; }
/* Hide number input spinners - use custom +/- buttons only */
#checkout-overlay input#amount::-webkit-outer-spin-button,
#checkout-overlay input#amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#checkout-overlay input#amount { -moz-appearance: textfield; appearance: textfield; }
/* Checkout summary - compact */
#checkout-overlay .checkout-summary { display: flex; flex-direction: column; gap: 6px; }
#checkout-overlay .checkout-summary-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: #f8f9fa; border-radius: 6px; font-size: 13px;min-height: 40px;max-height: 40px; }
.dark #checkout-overlay .checkout-summary-row { background: #253340; }
#checkout-overlay .checkout-summary-row .label { color: #6c757d; }
.dark #checkout-overlay .checkout-summary-row .label { color: #9ca3af; }
#checkout-overlay .checkout-summary-row .value { font-weight: 500; }
#checkout-overlay .checkout-summary-row.checkout-summary-total { background: #e8f4fd; font-size: 15px; padding: 6px 10px; }
.dark #checkout-overlay .checkout-summary-row.checkout-summary-total { background: #1e3a5f; }
#checkout-overlay .checkout-summary-row.checkout-summary-total .value { color: #0d6efd; font-weight: 600; }
.dark #checkout-overlay .checkout-summary-row.checkout-summary-total .value { color: #60a5fa; }
#checkout-overlay .checkout-qty-wrap { display: flex; align-items: center; gap: 6px; }
#checkout-overlay .checkout-qty-wrap .circle-button { width: 28px; height: 28px; font-size: 16px; border-radius: 6px; color: #495057; background: #e9ecef; border: 1px solid #dee2e6; line-height: 1; }
#checkout-overlay .checkout-qty-wrap .circle-button:hover { background: #dee2e6; color: #212529; }
.dark #checkout-overlay .checkout-qty-wrap .circle-button { background: #3d4f5e; border-color: #4d5f6e; color: #d1d5db; }
.dark #checkout-overlay .checkout-qty-wrap .circle-button:hover { background: #4d5f6e; color: #fff; }
#checkout-overlay .checkout-amount-input { width: 44px; text-align: center; font-weight: 500; border-radius: 6px; border: 1px solid #dee2e6; padding: 4px 4px; font-size: 13px; }
.dark #checkout-overlay .checkout-amount-input { background: #2e404e; border-color: #3d4f5e; color: #fff; }
/* Require extra - always visible (no collapsible) */
#checkout-overlay .checkout-require-collapsible { border-radius: 8px; overflow: hidden; margin-top: 8px; }
#checkout-overlay .checkout-require-collapsible-header { display: flex; align-items: center; padding: 8px 12px; background: rgba(255, 99, 71, 0.902); color: #fff; font-size: 14px; font-weight: 500; min-height: 42px; }
#checkout-overlay .checkout-require-collapsible-content { overflow: visible; }
#checkout-overlay .checkout-require-collapsible-content-inner { padding: 10px 12px; background: #f8f9fa; border: 1px solid #dee2e6; border-top: none; border-radius: 0 0 8px 8px; }
.dark #checkout-overlay .checkout-require-collapsible-content-inner { background: #253340; border-color: #3d4f5e; }
#checkout-overlay .checkout-require-quickfill { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#checkout-overlay .checkout-quickfill-btn { padding: 6px 12px; font-size: 13px; border-radius: 6px; border: 1px solid #dee2e6; background: #fff; color: #495057; cursor: pointer; }
#checkout-overlay .checkout-quickfill-btn:hover { background: #e9ecef; border-color: #adb5bd; }
#checkout-overlay .checkout-quickfill-btn.is-active-quickfill { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.dark #checkout-overlay .checkout-quickfill-btn { background: #3d4f5e; border-color: #4d5f6e; color: #e5e7eb; }
.dark #checkout-overlay .checkout-quickfill-btn:hover { background: #4d5f6e; }
.dark #checkout-overlay .checkout-quickfill-btn.is-active-quickfill { background: #2563eb; border-color: #2563eb; color: #fff; }
#checkout-overlay .checkout-success-pane { display: none; padding: 1rem 0; text-align: center; }
#checkout-overlay .checkout-success-pane.active { display: block; }
#checkout-overlay .checkout-success-icon { font-size: 48px; color: #28a745; margin-bottom: 1rem; }
.dark #checkout-overlay .checkout-success-icon { color: #34d399; }
#checkout-overlay .checkout-success-icon--processing { color: #0d6efd; }
.dark #checkout-overlay .checkout-success-icon--processing { color: #60a5fa; }
#checkout-overlay .checkout-success-icon--cancelled { color: #dc3545; }
.dark #checkout-overlay .checkout-success-icon--cancelled { color: #f87171; }
#checkout-overlay .checkout-success-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; }
#checkout-overlay .checkout-success-content { white-space: pre-line; text-align: left; max-height: 200px; overflow-y: auto; padding: 12px; background: #f8f9fa; border-radius: 8px; font-size: 14px; margin-bottom: 1rem; }
.dark #checkout-overlay .checkout-success-content { background: #253340; }
#checkout-overlay .checkout-success-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
#checkout-overlay .checkout-btn-order-history { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: #0d6efd; color: #fff; border: none; border-radius: 8px; font-weight: 500; text-decoration: none; cursor: pointer; font-size: 15px; }
#checkout-overlay .checkout-btn-order-history:hover { background: #0b5ed7; color: #fff; }
#checkout-overlay .checkout-btn-copy { margin-top: 4px; padding: 8px 16px; font-size: 13px; border: 1px solid #dee2e6; border-radius: 6px; background: #fff; cursor: pointer; color: #495057; }
#checkout-overlay .checkout-btn-copy:hover { background: #e9ecef; }
.dark #checkout-overlay .checkout-btn-copy { background: #3d4f5e; border-color: #4d5f6e; color: #e5e7eb; }
.dark #checkout-overlay .checkout-btn-copy:hover { background: #4d5f6e; }
#checkout-overlay .checkout-tabs-nav.hidden,
#checkout-overlay .checkout-nav-toolbar.hidden { display: none; }
#checkout-overlay .checkout-header .btn-back-to-checkout { display: none; align-items: center; justify-content: center; color: #6c757d; background: none; border: none; cursor: pointer; font-size: 1.25rem; padding: 6px; margin-right: 8px; transition: color 0.2s; }
#checkout-overlay .checkout-header .btn-back-to-checkout.visible { display: inline-flex; }
#checkout-overlay .checkout-header .btn-back-to-checkout:hover { color: #333; }
.dark #checkout-overlay .checkout-header .btn-back-to-checkout { color: #9ca3af; }
.dark #checkout-overlay .checkout-header .btn-back-to-checkout:hover { color: #e5e7eb; }
/* Checkout actions - below total for easy reach */
#checkout-overlay .checkout-actions-below-total {
  display: flex; justify-content: center; margin-top: 16px;padding: 0 20%;
}
#checkout-overlay .checkout-actions-below-total .btn { padding: 10px 20px; font-size: 14px; border-radius: 8px; }
#checkout-overlay .checkout-btn-buy { min-width: 100%; padding: 12px 32px; font-size: 15px; }
#checkout-overlay.checkout-sticky-actions .checkout-actions-below-total {
  position: sticky;
  bottom: 0;
  z-index: 8;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #dee2e6;
  padding-top: 10px;
  padding-bottom: 8px;
  margin-top: 10px;
  backdrop-filter: blur(2px);
}
.dark #checkout-overlay.checkout-sticky-actions .checkout-actions-below-total {
  background: rgba(46, 64, 78, 0.96);
  border-top-color: #3d4f5e;
}
#checkout-overlay.checkout-sticky-summary .checkout-pane-bottom {
  position: sticky;
  bottom: 0;
  z-index: 8;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid #dee2e6;
  padding-top: 10px;
  padding-bottom: 8px;
  margin-top: 10px;
  backdrop-filter: blur(2px);
}
.dark #checkout-overlay.checkout-sticky-summary .checkout-pane-bottom {
  background: rgba(46, 64, 78, 0.97);
  border-top-color: #3d4f5e;
}
#checkout-overlay.checkout-success-mode .checkout-actions-below-total { display: none; }

/* Icon Filter Section */
#icon-filter-section {
  background: #f8f9fa;
  margin-bottom: 10px;
  
}

.product-filter-section, #icon-filter-section {
  margin-left: 5px;
  margin-right: 5px;
}

.dark #icon-filter-section, .dark .product-filter-section {
  background: #2e404e;
}

#icon-filter-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
  touch-action: pan-y; /* allow horizontal swipe in this area, vertical still scrolls page */
  cursor: grab;
  user-select: none;
}
#icon-filter-wrapper:active {
  cursor: grabbing;
}

#icon-filter-container {
  padding: 3px;
  min-height: 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  max-height: 156px; /* 2 rows fixed: 2*(68px+8px)-8 = 144 + padding */
  overflow: hidden;
}

/* Layout 2 rows: container is flex column, each row is flex row */
#icon-filter-container.icon-filter-two-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-wrap: nowrap;
}
#icon-filter-container.icon-filter-two-rows .icon-filter-row {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 76px; /* 68 + 8 */
  flex-wrap: nowrap;
}
#icon-filter-container.icon-filter-two-rows .icon-filter-row .icon-filter-item {
  flex: 0 0 calc((100% - (var(--ir, 15) - 1) * 8px) / var(--ir, 15));
  max-width: calc((100% - (var(--ir, 15) - 1) * 8px) / var(--ir, 15));
  width: auto;
  display: flex;
  flex-direction: column;
}

/* Fallback when no two-rows class (keep old layout for compatibility) */
#icon-filter-container .icon-filter-item {
  flex: 0 0 calc((100% - 112px) / 15);
  max-width: calc((100% - 112px) / 15);
  display: flex;
  flex-direction: column;
}

@media (max-width: 1200px) {
  #icon-filter-container .icon-filter-item {
    flex: 0 0 calc((100% - 56px) / 15);
    max-width: calc((100% - 56px) / 15);
  }
}

@media (max-width: 992px) {
  #icon-filter-container .icon-filter-item {
    flex: 0 0 calc((100% - 40px) / 11);
    max-width: calc((100% - 40px) / 11);
  }
}

@media (max-width: 768px) {
  #icon-filter-container .icon-filter-item {
    flex: 0 0 calc((100% - 32px) / 9);
    max-width: calc((100% - 32px) / 9);
  }
}

@media (max-width: 576px) {
  #icon-filter-container .icon-filter-item {
    flex: 0 0 calc((100% - 24px) / 8);
    max-width: calc((100% - 24px) / 8);
  }
}

@media (max-width: 400px) {
  #icon-filter-container .icon-filter-item {
    flex: 0 0 calc((100% - 16px) / 6);
    max-width: calc((100% - 16px) / 6);
  }
}

.icon-filter-item {
  width: 50px;
  min-width: 62px;
  height: 68px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.236);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dark .icon-filter-item {
  background: #1e2d3a;
  border-color: #444;
}

.icon-filter-item:hover {
  border-color: #007bff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

.icon-filter-item.active {
  border-color: #007bff;
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
  background: #e7f3ff;
}

.dark .icon-filter-item.active {
  background: #1e3a5f;
}

.icon-filter-item img {
  width: 100%;
  height: 80%;
  object-fit: contain;
}

.icon-filter-item-caption {
  font-size: 8px;
  line-height: unset;
  text-align: center;
  color: #666;
  max-width: 100%;
  overflow: hidden;
  /* text-overflow: ellipsis; */
  white-space: nowrap;
  margin-top: 2px;
}

.dark .icon-filter-item-caption {
  color: #aaa;
}

/* Icon Filter Navigation */
.icon-filter-nav {
  transition: all 0.2s ease;
}

.icon-filter-nav:hover:not(:disabled) {
  background: #e9ecef !important;
  border-color: #adb5bd !important;
}

.icon-filter-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed !important;
}

.dark .icon-filter-nav,
.dark #clear-filter-btn {
  background: #1e2d3a !important;
  border-color: #555 !important;
  color: #fff !important;
}

.dark .icon-filter-nav:hover:not(:disabled) {
  background: #2e404e !important;
}

.dark #icon-filter-page-info {
  color: #aaa;
}

/* List view description: click to copy product name + warranty */
.list-view-description {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

/* List view: hover both odd and even rows - high specificity + !important to override backend */
html body.view-list table.preview tbody tr:hover,
html body.view-list table.preview tbody tr:hover td {
  background-color: rgb(0 123 255 / 8%) !important;
  transition: background-color 0.2s ease !important;
}
html body.dark.view-list table.preview tbody tr:hover,
html body.dark.view-list table.preview tbody tr:hover td {
  background-color: rgb(0 123 255 / 25%) !important;
  transition: background-color 0.2s ease !important;
}

/* List view: selected row (click) - highlight row bolder than hover */
html body.view-list table.preview tbody tr.list-view-row-selected,
html body.view-list table.preview tbody tr.list-view-row-selected td {
  background-color: rgb(0 123 255 / 10%) !important;
  transition: background-color 0.2s ease !important;
}
html body.dark.view-list table.preview tbody tr.list-view-row-selected,
html body.dark.view-list table.preview tbody tr.list-view-row-selected td {
  background-color: rgb(0 123 255 / 28%) !important;
  transition: background-color 0.2s ease !important;
}

.span-recent-products-title,
.span-category-title, .span-best-selling-title {
  position: relative;
  border-radius: 12px;
  overflow: hidden; 
}

.span-recent-products-title::after,.span-best-selling-title::after,
.span-category-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, #007ffe, #00c6ff);
}

.checkout-require-field input.form-control {
  height: 32px;
  font-size: 12px;
  padding: .25rem .55rem;
}
.dark .checkout-require-field input.form-control {
  border-color: revert-layer;
}

  .lazy-product-image {
    transition: opacity 0.3s ease-in-out;
    opacity: 0.7;
    object-fit: contain;
    vertical-align: middle;
  }
  .lazy-product-image.loaded {
    opacity: 1;
  }
  .lazy-product-image.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
  }
  @keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }