/* ============================================================
   HINTRON DESIGN SYSTEM — hintron-core.css
   Manufacturer of Scientific Analytical Instruments since 1985

   Externalized from inline <style> for browser caching — zero
   re-download on subsequent catalogue navigation visits.

   Load order in _theme.face: placed immediately after
   {{page.stylesheets}} so our overrides cascade correctly
   above Zoho's base structural rules.

   FONT PATH CONFIRMATION (12-08-2026):
   Base template ZIP inspected directly — root contains only
   images/, js/, stylesheets/ as asset folders. No fonts/
   folder exists. All font files must be uploaded into images/,
   and all @font-face src paths below use ../images/ accordingly
   (relative from this file's location inside stylesheets/).
   ============================================================ */


/* ============================================================
   01. LOCAL BRAND FONTS — @font-face declarations
       Served from theme /images/ directory (no dedicated
       /fonts/ directory exists in this Zoho Commerce theme).
   ============================================================ */

/* Barlow Condensed — eyebrow labels, category headers, nav UI */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../images/BarlowCondensed-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../images/BarlowCondensed-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../images/BarlowCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../images/BarlowCondensed-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Source Serif 4 — display headings, hero text, product titles */
@font-face {
  font-family: 'Source Serif 4';
  src: url('../images/SourceSerif4-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../images/SourceSerif4-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../images/SourceSerif4-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../images/SourceSerif4-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../images/SourceSerif4-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../images/SourceSerif4-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Sans — body text, UI labels, form fields */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../images/IBMPlexSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../images/IBMPlexSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../images/IBMPlexSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../images/IBMPlexSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../images/IBMPlexSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../images/IBMPlexSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Mono — spec values, model numbers, measurement data */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../images/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../images/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../images/IBMPlexMono-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   02. DESIGN TOKENS — CSS Custom Properties
   ============================================================ */

:root {
  /* --- BRAND COLORS --- */
  --hintron-primary:        #003E7E;
  --hintron-primary-dark:   #002B58;
  --hintron-primary-darker: #001E3F;
  --hintron-secondary:      #F5F7FA;
  --hintron-accent:         #E63946;
  --hintron-accent-dark:    #B81E2A;

  /* --- NEUTRAL SCALE (cool slate, 9 stops) --- */
  --gray-50:  #F8FAFC;
  --gray-100: #EEF2F7;
  --gray-200: #DDE3EC;
  --gray-300: #C2CCD8;
  --gray-400: #98A4B4;
  --gray-500: #6B7888;
  --gray-600: #4A5666;
  --gray-700: #303B49;
  --gray-800: #1B2330;
  --gray-900: #0E141C;

  /* --- SEMANTIC SURFACES --- */
  --bg:            #FFFFFF;
  --bg-subtle:     var(--hintron-secondary);
  --bg-muted:      var(--gray-100);
  --bg-inverse:    var(--hintron-primary);
  --bg-spec:       #F0F4F9;

  --fg:            var(--gray-900);
  --fg-muted:      var(--gray-600);
  --fg-subtle:     var(--gray-500);
  --fg-inverse:    #FFFFFF;
  --fg-link:       var(--hintron-primary);
  --fg-link-hover: var(--hintron-accent);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus:  var(--hintron-primary);
  --divider:       var(--gray-100);

  /* --- SEMANTIC STATES --- */
  --success:        #1F8A4C;
  --success-bg:     #E5F4EC;
  --success-border: #B8DEC7;

  --warning:        #B86E00;
  --warning-bg:     #FFF4E0;
  --warning-border: #F2D599;

  --danger:         var(--hintron-accent);
  --danger-bg:      #FDECEE;
  --danger-border:  #F4B5BB;

  --info:           #0B5FB7;
  --info-bg:        #E5EEFA;
  --info-border:    #B8CDEC;

  /* --- TYPE FAMILIES --- */
  --font-display:   'Source Serif 4', 'Source Serif Pro', 'Georgia', 'Times New Roman', serif;
  --font-body:      'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-condensed: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue Condensed', Impact, sans-serif;

  /* --- TYPE SCALE --- */
  --fs-hero:    64px;  --lh-hero:    1.05;
  --fs-h1:      44px;  --lh-h1:      1.12;
  --fs-h2:      32px;  --lh-h2:      1.18;
  --fs-h3:      24px;  --lh-h3:      1.25;
  --fs-h4:      20px;  --lh-h4:      1.3;
  --fs-h5:      16px;  --lh-h5:      1.35;
  --fs-body-lg: 18px;  --lh-body-lg: 1.55;
  --fs-body:    15px;  --lh-body:    1.6;
  --fs-body-sm: 13px;  --lh-body-sm: 1.55;
  --fs-caption: 12px;  --lh-caption: 1.4;
  --fs-label:   11px;  --lh-label:   1.2;
  --fs-mono:    13px;  --lh-mono:    1.5;

  /* --- WEIGHTS --- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-display:  700;

  /* --- LETTER SPACING --- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-label:  0.12em;

  /* --- SPACING (4px base grid) --- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --- RADII (industrial — intentionally small) --- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-pill: 999px;

  /* --- BORDER WIDTHS --- */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;

  /* --- ELEVATION — Jewel Box depth system --- */
  --shadow-xs:     0 1px 2px rgba(0, 62, 126, 0.08);
  --shadow-sm:     0 2px 8px rgba(0, 62, 126, 0.12), 0 1px 2px rgba(0, 62, 126, 0.08);
  --shadow-md:     0 4px 16px rgba(0, 62, 126, 0.16), 0 2px 4px rgba(0, 62, 126, 0.08);
  --shadow-lg:     0 8px 32px rgba(0, 62, 126, 0.20), 0 4px 8px rgba(0, 62, 126, 0.10);
  --shadow-focus:  0 0 0 3px rgba(0, 62, 126, 0.22);
  --shadow-inset:  inset 0 0 0 1px var(--border);
  --highlight-top: 1px solid rgba(255, 255, 255, 0.12);

  /* --- LAYOUT --- */
  --container:        1200px;
  --container-narrow: 880px;
  --header-h:         88px;
  --tap-min:          44px;

  /* --- TIMING --- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
}


/* ============================================================
   03. BASE ELEMENT DEFAULTS
       Scoped to .hintron-site — never collides with Zoho's
       global element resets in style.css.
   ============================================================ */

html {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
}

body.hintron-site {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
}

.hintron-site h1,
.hintron-site h2,
.hintron-site h3,
.hintron-site h4,
.hintron-site h5,
.hintron-site h6 {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  color: var(--hintron-primary) !important;
  letter-spacing: var(--tracking-tight) !important;
  margin: 0;
}

/* Per-level size differentiation — ported from colors_and_type.css.
   Source defines h1-h5 only (no h6 size rule exists upstream, so
   h6 inherits browser default size here, matching the source exactly). */
.hintron-site h1, .hintron-site .h1 { font-size: var(--fs-h1) !important; line-height: var(--lh-h1) !important; }
.hintron-site h2, .hintron-site .h2 { font-size: var(--fs-h2) !important; line-height: var(--lh-h2) !important; }
.hintron-site h3, .hintron-site .h3 { font-size: var(--fs-h3) !important; line-height: var(--lh-h3) !important; }
.hintron-site h4, .hintron-site .h4 {
  font-size: var(--fs-h4) !important;
  line-height: var(--lh-h4) !important;
  font-weight: var(--fw-semibold) !important;
}
.hintron-site h5, .hintron-site .h5 {
  font-size: var(--fs-h5) !important;
  line-height: var(--lh-h5) !important;
  font-weight: var(--fw-semibold) !important;
}

/* Hero display — large-format Source Serif 4 treatment. */
.hintron-site .hero-display {
  font-family: var(--font-display) !important;
  font-size: var(--fs-hero) !important;
  line-height: var(--lh-hero) !important;
  font-weight: var(--fw-display) !important;
  letter-spacing: -0.025em !important;
  color: var(--hintron-primary) !important;
}

/* Eyebrow / uppercase label — logo wordmark, category tiles,
   nav eyebrows, spec header callouts. Icon Badges and the
   upcoming header/nav build both depend on this class. */
.hintron-site .eyebrow,
.hintron-site .label-uppercase {
  font-family: var(--font-condensed) !important;
  font-size: var(--fs-label) !important;
  line-height: var(--lh-label) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-label) !important;
  text-transform: uppercase !important;
  color: var(--fg-muted) !important;
}

/* Body copy variants. */
.hintron-site p,
.hintron-site .body { font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; }
.hintron-site .body-lg { font-size: var(--fs-body-lg) !important; line-height: var(--lh-body-lg) !important; }
.hintron-site .body-sm { font-size: var(--fs-body-sm) !important; line-height: var(--lh-body-sm) !important; }
.hintron-site .caption {
  font-size: var(--fs-caption) !important;
  line-height: var(--lh-caption) !important;
  color: var(--fg-muted) !important;
}

/* Monospace — IBM Plex Mono for all numeric/spec values.
   .spec-num additionally forces tabular figures so columns of
   numbers align — this is the class the Spec/Data Table
   component will depend on. */
.hintron-site code,
.hintron-site .mono,
.hintron-site .spec-num {
  font-family: var(--font-mono) !important;
  font-size: var(--fs-mono) !important;
  line-height: var(--lh-mono) !important;
}
.hintron-site .spec-num {
  font-feature-settings: 'tnum' 1, 'lnum' 1 !important;
  font-weight: var(--fw-medium) !important;
  color: var(--gray-900) !important;
}

.hintron-site .theme-header-topbar,
.hintron-site .theme-header-topbar * {
  font-family: var(--font-body) !important;
}

.hintron-site .theme-navigation-area,
.hintron-site .theme-navigation-area *,
.hintron-site [data-headercontainer],
.hintron-site [data-headercontainer] * {
  font-family: var(--font-body) !important;
}

.hintron-site a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.hintron-site a:hover {
  color: var(--fg-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hintron-site ::selection {
  background: var(--hintron-primary);
  color: #fff;
}

.hintron-site .zpcontainer {
  max-width: var(--container) !important;
  padding-inline-start: var(--space-6) !important;
  padding-inline-end: var(--space-6) !important;
  margin-inline: auto;
}


/* ============================================================
   04. HINTRON LAYOUT WRAPPERS (Layer B shells)
   ============================================================ */

.hintron-main-content {
  min-height: 60vh;
  background: var(--bg);
}

.hintron-footer-shell {
  width: 100%;
}


/* ============================================================
   05. GLOBAL B2B RFQ — RETAIL PRICING SUPPRESSION
       Business-model enforcement rule. No price figure of any
       kind is visible to any visitor, on any page.
   ============================================================ */

.theme-product-price,
.theme-store-product-price,
.theme-list-price,
.theme-selling-price,
.theme-label-price,
.theme-product-price-container,
.theme-product-price-section,
.theme-price-wrapper,
.theme-variant-price,
.variant-price,
.item-price,
.zpelem-price,
[data-zs-product-price],
[data-zs-selling-price],
[data-zs-label-price],
.theme-product-list-price,
.theme-product-selling-price {
  display: none !important;
}

.theme-cart-price-label,
.theme-cart-selling-price,
.theme-cart-label-price,
.theme-cart-table-data.theme-cart-price-label,
.theme-cart-details-summary-list-item,
.theme-cart-summary-details,
.theme-cart-mobile-summary-container p,
.theme-cart-mobile-summary-container span {
  display: none !important;
}

.theme-order-summary-footer,
.theme-checkout-order-summary-container .theme-chekout-ordersummar ul.theme-order-summary-list,
.theme-checkout-order-summary-container .theme-chekout-ordersummar .theme-order-summary-footer,
.theme-checkout-tab-content.order-review .theme-checkout-order-summary-container .theme-order-summary-footer {
  display: none !important;
}

.theme-product-pricing,
.theme-min-rate,
.theme-max-rate,
.theme-cart-message-prod-label-price,
.theme-cart-message-prod-selling-price,
.theme-cart-message-prices,
.theme-carat-message-item.theme-cart-message-prices,
[data-cart-add-success-selling-prod-price],
[data-cart-add-success-label-prod-price] {
  display: none !important;
}

[data-zs-currency],
.theme-currency-display,
.theme-store-currency {
  display: none !important;
}


/* ============================================================
   05B. CART CHROME SUPPRESSION — HEADER ICON & PRODUCT PAGE
       RFQ backbone is the native Zoho Quote system, not Cart.
       Cart icon is permanently unused chrome — nothing in Zoho's
       JS reads or toggles .theme-mini-cart's visibility for
       anything to function (same category as the price spans
       above), so permanent hiding is safe per the Layer C test
       in CLAUDE.md. Untouched: the 27 cart-icon style variants
       are moot once the icon itself never renders.
   ============================================================ */

.theme-mini-cart {
  display: none !important;
}

/* Add-to-Cart button on the product page (_store-product-quantity-
   add-cart-one.face, the active partial under product_details_style
   "01"). Same Layer C test as the cart icon above: .theme-cart-button
   (data-zs-add-to-cart) and .theme-quote-button (data-zs-add-to-quote)
   are independently wired siblings — nothing in the quote-add flow
   reads or toggles the cart button's visibility, so hiding it
   permanently leaves Add to Quote as the sole visible CTA without
   breaking anything.

   Verified scope (checked every real .theme-cart-button class use,
   not just the data-theme-cart-button-text/-loading attribute-value
   hooks that many unrelated buttons — wishlist "add to cart", save-
   for-later "move to cart", product-list "view details" — also
   happen to carry): store-cart.face, store-wishlist.face, save-for-
   later.face, and the product-list partials never use this class,
   so they're unaffected. The class is also present, harmlessly, on
   inactive sibling variants of this same button
   (_store-product-quantity-add-cart-two/-three/-four/-five.face,
   _store-product-ten.face) that don't render under the live
   product_details_style "01".

   Known caveat, not fixed here: this class is reused (without
   data-zs-add-to-cart) on two things that are dead code today but
   would need re-scoping if product_details_style ever changes from
   "01": the disabled "out of stock" button in
   _store-product-quantity-add-cart-four.face line 23, and the
   "more details" link pattern (data-zs-more-details) that appears
   in three sub-partials, including product_details_style == '11'
   inside this same active file. A bare-class selector is kept
   (rather than tightening to .theme-cart-button[data-zs-add-to-cart])
   specifically because the out-of-stock button lacks that attribute
   too and should stay hidden — tightening would un-hide it. */
.theme-cart-button {
  display: none !important;
}

/* Quote count badge — pill + accent fill, top-right of the icon.
   Only .theme-quote-icon (position context) and .theme-mini-quote-count
   (the badge) are targeted; data-zs-view-quote-count itself is left
   untouched so Zoho's counting JS keeps writing the number into it. */
.theme-quote-icon {
  position: relative;
}

.theme-mini-quote-count {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--hintron-accent) !important;
  color: var(--fg-inverse) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: var(--fw-semibold) !important;
  line-height: 16px !important;
  text-align: center !important;
  pointer-events: none;
}


/* ============================================================
   06. PAGE LOADER
   ============================================================ */

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hintron-primary-darker);
  transition: opacity var(--dur-slow) var(--ease-out);
}

#page-loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

#page-loader .loader {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: hintron-spin 0.75s linear infinite;
}

@keyframes hintron-spin {
  to { transform: rotate(360deg); }
}


/* ============================================================
   07. SKIP TO MAIN — Accessibility Button
   ============================================================ */

.main-content-nav-btn {
  background: var(--hintron-primary) !important;
  color: var(--fg-inverse) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-body-sm) !important;
  font-weight: var(--fw-semibold) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-2) var(--space-4) !important;
  border: var(--bw-2) solid var(--hintron-primary-dark) !important;
}


/* ============================================================
   08. PORTAL POPUP
   ============================================================ */

/* Modal panel — barely-glass, 97% opacity, NO blur.
   This is the one deliberate glass exception in the whole
   system; every other surface stays fully opaque. */
.theme-portal-popup {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--radius-md) !important;
  border-top: var(--highlight-top) !important;
}

/* Backdrop — deep navy scrim, explicitly NO blur.
   A crisp opacity change reads as more decisive than a soft
   blurred transition, consistent with the "one signal" rule. */
.theme-close-portal-overlay {
  background: rgba(0, 30, 63, 0.72) !important;
}

.theme-close-portal-button {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.theme-close-portal-button:hover {
  opacity: 1;
}


/* ============================================================
   09. GLOBAL BUTTON SYSTEM — zpbutton Hintron Override
   ============================================================ */

.hintron-site .zpbutton-type-primary {
  background: var(--hintron-primary) !important;
  color: var(--fg-inverse) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: var(--fs-body-sm) !important;
  letter-spacing: var(--tracking-wide) !important;
  min-height: var(--tap-min);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out) !important;
}

.hintron-site .zpbutton-type-primary:hover {
  background: var(--hintron-primary-dark) !important;
  box-shadow: var(--shadow-sm) !important;
}

.hintron-site .zpbutton-type-primary:focus-visible {
  outline: none !important;
  box-shadow: var(--shadow-focus) !important;
}

.hintron-site .zpbutton-type-secondary {
  background: transparent !important;
  color: var(--hintron-primary) !important;
  border: var(--bw-1) solid var(--hintron-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: var(--fs-body-sm) !important;
  min-height: var(--tap-min);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out) !important;
}

.hintron-site .zpbutton-type-secondary:hover {
  background: var(--bg-subtle) !important;
  border-color: var(--hintron-primary-dark) !important;
}


/* ============================================================
   10. FORM INPUTS — Global Hintron Override
   ============================================================ */

.hintron-site input[type='text'],
.hintron-site input[type='email'],
.hintron-site input[type='tel'],
.hintron-site input[type='number'],
.hintron-site input[type='password'],
.hintron-site input[type='address'],
.hintron-site textarea,
.hintron-site select {
  border: var(--bw-1) solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-body) !important;
  color: var(--fg) !important;
  background: var(--bg) !important;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out) !important;
}

.hintron-site input[type='text']:focus,
.hintron-site input[type='email']:focus,
.hintron-site input[type='tel']:focus,
.hintron-site input[type='number']:focus,
.hintron-site input[type='password']:focus,
.hintron-site textarea:focus,
.hintron-site select:focus {
  outline: none !important;
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
}


/* ============================================================
   11. STORE MESSAGES / TOAST NOTIFICATIONS
       All 7 Zoho message style variants covered.
       Price spans remain in DOM for Zoho JS binding but are
       invisible to visitors (suppressed in section 05 above).
       Text inside .theme-added-to-cart-msg / .theme-shopping-label
       is remapped via the Zoho Localization Dictionary — no
       client-side JS label swapping is used anywhere in this file.
   ============================================================ */

.theme-cart-add-success-message,
.theme-cart-update-success-message,
.theme-cart-delete-success-message,
.theme-wishlist-alert-update,
.theme-save-for-later-success-message,
.buyagain-cart-success-message {
  font-family: var(--font-body) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  border: var(--bw-1) solid var(--success-border) !important;
  background: var(--bg) !important;
}

.theme-cart-add-failure-message,
.theme-cart-update-failure-message,
.theme-cart-delete-failure-message,
.buyagain-cart-failure-message {
  font-family: var(--font-body) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  border: var(--bw-1) solid var(--danger-border) !important;
  background: var(--bg) !important;
}

.theme-cart-success-inner-container,
.theme-desktop-cart-inner-container {
  background: var(--bg) !important;
  font-family: var(--font-body) !important;
}

.theme-cart-message-success {
  color: var(--success) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-body-sm) !important;
}

.theme-cart-message-failure,
.theme-failure-reason {
  color: var(--danger) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-body-sm) !important;
}

.theme-cart-message-prod-name {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: var(--fs-body-sm) !important;
  color: var(--fg) !important;
}

.theme-cart-message-buttons .zpbutton {
  font-family: var(--font-body) !important;
  font-size: var(--fs-body-sm) !important;
  font-weight: var(--fw-semibold) !important;
  background: var(--hintron-primary) !important;
  color: var(--fg-inverse) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-2) var(--space-5) !important;
  min-height: var(--tap-min);
  transition: background var(--dur-base) var(--ease-out) !important;
}

.theme-cart-message-buttons .zpbutton:hover {
  background: var(--hintron-primary-dark) !important;
}

.theme-cart-message-close,
.theme-close-message {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: var(--space-1) !important;
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.theme-cart-message-close:hover,
.theme-close-message:hover {
  opacity: 1;
}

.theme-added-to-cart-msg,
.theme-added-to-quote-msg {
  font-family: var(--font-condensed) !important;
  font-size: var(--fs-body-sm) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--tracking-wide) !important;
  color: var(--success) !important;
  text-transform: uppercase;
}

.theme-shopping-label {
  font-family: var(--font-condensed) !important;
  font-size: var(--fs-h5) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--hintron-primary) !important;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}


/* ============================================================
   12. SEARCH SUGGESTIONS
   ============================================================ */

.theme-search-heading {
  font-family: var(--font-condensed) !important;
  font-size: var(--fs-label) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--tracking-label) !important;
  text-transform: uppercase !important;
  color: var(--fg-muted) !important;
  padding: var(--space-3) var(--space-4) var(--space-2) !important;
}

.theme-suggested-products {
  padding: var(--space-2) 0 !important;
}

.theme-search-product-card {
  border-bottom: var(--bw-1) solid var(--divider) !important;
  padding: var(--space-3) var(--space-4) !important;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.theme-search-product-card:hover {
  background: var(--bg-subtle) !important;
}

.theme-search-product-card .theme-product-name {
  font-family: var(--font-body) !important;
  font-size: var(--fs-body-sm) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--fg) !important;
}

.theme-search-product-card .theme-product-image {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  flex-shrink: 0;
}

.theme-no-products-error {
  font-family: var(--font-body) !important;
  font-size: var(--fs-body-sm) !important;
  color: var(--fg-muted) !important;
  padding: var(--space-6) var(--space-4) !important;
  text-align: center;
}


/* ============================================================
   13. FOOTER AREA
       Scoped to .hintron-footer-shell wrapper, defined in
       _theme.face around {{page.footer_content}}.
   ============================================================ */

.hintron-footer-shell .theme-footer-area {
  font-family: var(--font-body) !important;
}

.hintron-footer-shell .theme-footer-area.zpdark-section,
.hintron-footer-shell .theme-footer-area.zpdark-section-bg {
  background: var(--hintron-primary-darker) !important;
  border-top: var(--bw-3) solid var(--hintron-primary-dark) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.hintron-footer-shell .theme-footer-area.zpdark-section *,
.hintron-footer-shell .theme-footer-area.zpdark-section-bg * {
  font-family: var(--font-body) !important;
}

.hintron-footer-shell .theme-footer-area.zplight-section,
.hintron-footer-shell .theme-footer-area.zplight-section-bg {
  background: var(--bg-subtle) !important;
  border-top: var(--bw-1) solid var(--border) !important;
}

.hintron-footer-shell .theme-footer-area.zpdefault-section,
.hintron-footer-shell .theme-footer-area.zpdefault-section-bg {
  background: var(--bg) !important;
  border-top: var(--bw-1) solid var(--border) !important;
}


/* ============================================================
   14. DELIVERY LOCATION LOADER OVERLAY
   ============================================================ */

.theme-delivery-location-loader-overlay {
  background: rgba(0, 30, 63, 0.55) !important;
}

.theme-loader-circle {
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-top-color: #FFFFFF !important;
}


/* ============================================================
   15. SEARCH RESULTS PAGE
   ============================================================ */

.hintron-site .theme-searchresult-heading h4 {
  color: var(--hintron-primary) !important;
  font-family: var(--font-display) !important;
}

.hintron-site .theme-searchresult-heading:hover h4 {
  color: var(--hintron-accent) !important;
}

.hintron-site .theme-searchresult-pagination a {
  border-color: var(--border) !important;
  color: var(--hintron-primary) !important;
  border-radius: var(--radius-sm) !important;
}

.hintron-site .theme-searchresult-pagination a:hover {
  border-color: var(--hintron-primary) !important;
  background: var(--bg-subtle) !important;
}


/* ============================================================
   16. 404 PAGE NOT FOUND
   ============================================================ */

.hintron-site .theme-page-not-found-heading {
  font-family: var(--font-display) !important;
  color: var(--hintron-primary) !important;
}

.hintron-site .theme-page-not-found-para {
  font-family: var(--font-body) !important;
  color: var(--fg-muted) !important;
}