/* === HiForce — Custom theme-adjacent styles — added 2026-07-02 === */
/* Governed file. Loaded via template.conf "stylesheets" manifest. */
/* Features migrated out of sub-style.scss (governance Phase 2). */

/* === HiForce — Price Formatter — migrated from sub-style.scss 2026-07-02 === */
/* Custom fix: modern price formatting (Amazon-style). Big bold whole number in brand navy, small superscript decimals, small currency after. Works with the price-formatter JS in Footer Code. */
.theme-product-detail-price-area .theme-product-price.hf-formatted,
.theme-product-detail-price-area .theme-product-old-price.hf-formatted {
  color: #0d3853 !important; }

.hf-price-whole {
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  color: inherit !important; }

.hf-price-decimals {
  font-size: 0.5em !important;
  font-weight: 700 !important;
  vertical-align: 0.55em !important;
  margin-left: 1px !important;
  color: inherit !important; }

.hf-price-currency {
  font-size: 0.5em !important;
  font-weight: 600 !important;
  vertical-align: 0.55em !important;
  margin-left: 5px !important;
  letter-spacing: 0.5px !important;
  color: #1f5f5b !important; }

.theme-product-old-price.hf-formatted .hf-price-currency {
  color: inherit !important; }

/* Custom fix: keep strikethrough on the discounted (old) price after formatting. */
.theme-product-old-price.hf-formatted .hf-price-whole,
.theme-product-old-price.hf-formatted .hf-price-decimals,
.theme-product-old-price.hf-formatted .hf-price-currency {
  text-decoration: line-through !important; }
/* === end HiForce — Price Formatter === */

/* === HiForce — Category Read-More Clamp — migrated from sub-style.scss 2026-07-02 === */
/* NOTE: max-height:320px here is the value the Footer JS initCategoryReadMore depends on. */
/* Custom fix: Read more / Read less collapse on category description */
.theme-category-name-description {
  position: relative;
  max-height: 320px;
  overflow: hidden;
  transition: max-height 0.4s ease; }

.theme-category-name-description.expanded {
  max-height: none; }

.theme-category-name-description::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
  pointer-events: none;
  transition: opacity 0.3s ease; }

.theme-category-name-description.expanded::after {
  opacity: 0; }

.theme-desc-readmore-btn {
  display: inline-block;
  margin: 10px 0 0;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #48b592;
  background: transparent;
  border: 1px solid #48b592;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  z-index: 1; }

.theme-desc-readmore-btn:hover {
  background: #48b592;
  color: #fff; }
/* === end HiForce — Category Read-More Clamp === */

/* === HiForce — Specifications Datasheet Layout v6 — migrated from sub-style.scss 2026-07-02 === */
/* === Specifications tab — datasheet layout v6 (22 June 2026) ============== */
/* Two-column field (auto-fit, no mid-row collisions), left rail with green tick. */
/* Brand tokens: Avenir stack, teal #1f5f5b titles, #171f37 labels, navy #0d3853 values, #48b592 tick. */
/* Adapted onto theme markup: .table = wrapper, h5+ul pair = section, ul = data grid, li = row. */
.theme-prod-specification-table {
  display: grid !important;
  grid-template-columns: 200px 1fr !important;
  column-gap: 40px !important;
  row-gap: 0 !important;
  align-items: start !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-top: 6px !important;
  font-family: 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  color: #171f37 !important; }

.theme-prod-specification-table .theme-prod-specification-group {
  grid-column: 1 !important;
  margin: 0 !important;
  padding: 26px 0 !important;
  font-family: 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #1f5f5b !important;
  border-top: 1px solid #e4e8ec !important; }

.theme-prod-specification-table .theme-prod-specification-group::before {
  content: "" !important;
  display: block !important;
  width: 28px !important;
  height: 3px !important;
  margin: 0 0 14px 0 !important;
  background: #48b592 !important; }

.theme-prod-specification-table > ul {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  column-gap: 48px !important;
  row-gap: 0 !important;
  align-content: start !important;
  margin: 0 !important;
  padding: 26px 0 !important;
  border-top: 1px solid #e4e8ec !important; }

.theme-prod-specification-table > ul > li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 24px !important;
  width: auto !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 11px 0 !important;
  line-height: 1.4 !important;
  border-bottom: 1px solid #e9edf0 !important; }

.theme-prod-specification-table > ul > li:last-child {
  border-bottom: 1px solid #e9edf0 !important; }

.theme-prod-specification-table .theme-prod-specification-field {
  flex: 1 1 auto !important;
  width: auto !important;
  font-family: 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #171f37 !important; }

.theme-prod-specification-table .theme-prod-specification-value {
  flex: 0 0 auto !important;
  width: auto !important;
  font-family: 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: right !important;
  white-space: nowrap !important;
  color: #0d3853 !important; }

/* Phones: rail stacks above its rows, single data column. */
@media (max-width: 768px) {
  .theme-prod-specification-table {
    grid-template-columns: 1fr !important; }
  .theme-prod-specification-table .theme-prod-specification-group {
    padding-bottom: 0 !important; }
  .theme-prod-specification-table > ul {
    grid-template-columns: 1fr !important;
    padding-top: 14px !important;
    border-top: 0 !important; } }
/* === end HiForce — Specifications Datasheet Layout v6 === */

/* === HiForce — Search Suggestion Overlay Scroll Fix — migrated from sub-style.scss 2026-07-02 === */
/* ===== Search suggestion overlay scroll fix (23 Jun 2026, updated) ===== */
/* Problem: the search results overlay used position:absolute anchored to the
   page header. When the user scrolled down then searched, the overlay stayed
   glued to the document-top header position (appearing as a black page) and
   results were only visible after scrolling back up.
   Fix: pin the overlay to the viewport with position:fixed, offset just below
   the floating header so the search box stays visible above the results. The
   exact offset (--hf-search-top) is set dynamically by the footer JS to match
   the floating header height; 94px is a safe fallback. The footer JS also
   wires up Esc and click-on-backdrop to dismiss the overlay. */
.theme-search-suggestion-overlay {
  position: fixed !important;
  left: 0 !important;
  top: var(--hf-search-top, 94px) !important;
  height: calc(100vh - var(--hf-search-top, 94px)) !important; }
/* === end HiForce — Search Suggestion Overlay Scroll Fix === */

/* === HiForce — Filter Text Weight and Size — added 2026-07-02 === */
.theme-product-filter-text {
  font-weight: 500 !important;
  font-size: 13px !important;
}
/* === end === */

/* === HiForce — Category Tree Text Weight — added 2026-07-02 === */
/* Visible label is the inner button.zpbutton-type-link (300/12px), not .theme-product-filter-text. A native high-specificity !important rule forces 300/12px; :not(#zzz) adds one ID-level of specificity to win. */
fieldset.theme-product-filter-box .theme-product-filter-option-container .zpbutton-type-link:not(#zzz) {
  font-weight: 500 !important;
  font-size: 13px !important;
}
/* === end === */

/* === HiForce — Filter Header Divider — added 2026-07-02, live-toggle fix 2026-07-02 === */
/* Divider under each open group header. The old rule keyed off the static SVG icon
   classes (.theme-filter-close-icon:not(.theme-filter-expclose-default-hide)), which Zoho
   never updates on live click — so the divider always showed, even on collapsed groups.
   Zoho actually collapses by setting inline display:none on the classless child <div>
   (and adds .theme-filter-expand-toggle / .theme-filter-close-toggle to the legend after
   first interaction). So: show the divider by default (groups render open), then remove it
   when the group is collapsed — detected via the child div inline display:none (present from
   the instant of collapse) with the legend toggle class as a fallback. Tracks live clicks. */
fieldset.theme-product-filter-box .theme-product-filter-type {
  border-bottom: 1px solid var(--secondary-color-2) !important;
  padding-bottom: 10px !important;
  margin-bottom: 6px !important;
}
fieldset.theme-product-filter-box:has(> div[style*="display: none"]) .theme-product-filter-type,
fieldset.theme-product-filter-box:has(.theme-product-filter-type.theme-filter-expand-toggle) .theme-product-filter-type {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* === end === */

/* === HiForce — Category Tree Left Alignment — added 2026-07-02 === */
/* Category tree container has no .theme-product-filter-select-option, so the
   Custom CSS checkbox inset (padding-inline-start:12px) never matched it. This
   applies the same 12px inset to the category tree only. */
.theme-product-filter-option-container:not(:has(.theme-product-filter-select-option)) {
  padding-inline-start: 12px !important;
}
/* === end === */

/* === HiForce — Root Category List: show all main categories — added 2026-07-02 === */
/* The empty-category hide rule (li without .theme-product-filter-count) is correct for
   nested sub-category lists but wrong on the root "Browse All Products" list, where main
   categories always have a direct count of 0 (products live only in sub-categories).
   Root list is identified structurally: its top-level <ul> holds a single <li> (the root
   node), whose child <ul> holds the main categories. Nested lists have 2 top-level <li>,
   so :only-child fails there and their empty sub-categories stay correctly hidden. */
fieldset.theme-product-filter-box .theme-product-filter-option-container
  ul:has(> li:only-child) > li > ul > li:not(:has(.theme-product-filter-count)) {
  display: list-item !important;
}
/* === end === */

/* === HiForce — Hide redundant "Show more" on root Category list — added 2026-07-02 === */
/* On the root "Browse All Products" list every main category is now shown (see the root
   visibility fix above), so the native "Show more" toggle has nothing left to reveal.
   Scoped to the root fieldset only via the same single-top-level-li signature; nested
   category lists (2 top-level li) keep their "Show more". Other filter groups unaffected. */
fieldset.theme-product-filter-box:has(.theme-product-filter-option-container ul > li:only-child)
  a.theme-product-filter-show-more {
  display: none !important;
}
/* === end === */