/* ICC.Web overrides — internalize the Gibson body font (skin loads it via the developer's
   Typekit kit; we self-host the Font Squirrel files already in /fonts/web-fonts and alias them
   to the family name the skin's style.css expects). */
@font-face {
  font-family: 'canada-type-gibson';
  src: url('/fonts/web-fonts/gibson-regular-webfont.woff2') format('woff2'),
       url('/fonts/web-fonts/gibson-regular-webfont.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'canada-type-gibson';
  src: url('/fonts/web-fonts/gibson-bold-webfont.woff2') format('woff2'),
       url('/fonts/web-fonts/gibson-bold-webfont.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'canada-type-gibson';
  src: url('/fonts/web-fonts/gibson-regularitalic-webfont.woff2') format('woff2'),
       url('/fonts/web-fonts/gibson-regularitalic-webfont.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* Minor helpers for the data-driven views (kept intentionally light — do not alter the skin). */
.icc-pager { text-align:center; padding:24px 0; }
.icc-pager a, .icc-pager span { display:inline-block; min-width:34px; padding:6px 10px; margin:2px; border:1px solid #ddd; border-radius:4px; text-decoration:none; color:#181641; }
.icc-pager .current { background:#181641; color:#fff; border-color:#181641; }
.icc-empty { padding:40px 0; text-align:center; color:#818181; }
.icc-flash { background:#e9f7ec; border:1px solid #b7e0c0; color:#256b37; padding:12px 16px; border-radius:6px; margin:16px 0; }
.field-validation-error { color:#c0392b; font-size:13px; }
.input-validation-error { border-color:#c0392b !important; }

/* Results grid (market / search / listing) — product-name links must adopt the design
   colour instead of the browser-default blue, and the row must lay out cleanly.
   The skin styles .product_categories_* but assumed plain-text names; our names are links. */
.product_categories_name a { color:#252525; text-decoration:none; }
.product_categories_name a:hover { color:#F6813A; text-decoration:underline; }
.product_categories_table_head .product_categories_name a { color:#9E9E9E; }
/* Guard against any residual whitespace collapse when a market has a single group. */
.product_categories_section:empty { display:none; }
.product_categories_section .product_categories_table:last-child { margin-bottom:20px; }
/* Screen-reader-only utility (results header actions label). Bootstrap ships .sr-only;
   redeclare defensively so the label never renders visually if bootstrap load order changes. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.product_table_row > div { box-sizing:border-box; }

/* Results grid — small screens: name + CAS on the first line, actions on their own full-width
   line so the "Get a Quote" button never overflows/clips (skin's fixed % columns overflow < ~520px). */
@media (max-width: 600px) {
  .product_categories_name { width:60% !important; padding-left:14px; }
  .product_categories_cas_no { width:38% !important; text-align:right; padding-right:6px; }
  .product_categories_buttons { width:100% !important; text-align:left; padding:10px 12px 2px; }
  .product_categories_details_btn, .product_categories_quote_btn { display:inline-block; }
  .product_categories_details_btn a, .product_categories_quote_btn a { display:inline-block; padding:8px 18px; margin:0 8px 0 0; }
  .product_categories_table_head .product_categories_buttons { display:none; }
  .product_categories_table_head .product_categories_name { width:60% !important; }
  .product_categories_table_head .product_categories_cas_no { width:38% !important; text-align:right; }
}

/* Small-screen guard: keep the market/results hero readable and prevent any residual
   horizontal overflow of the page (skin hero heading is oversized on phones). */
@media (max-width: 767px) {
  html, body { overflow-x:hidden; }
  /* PRODUCTION PARITY: market heading size/padding is governed by style.css (55px/600) + responsive.css
     (40px ≤800, 30px ≤767, 22px ≤479) — matching independentchemical.com. The prior 26px !important
     override was an unauthorized shrink and has been removed. */
}

/* ICC staging expansion — "Also Available In" product-family navigation */
.also-available-in { margin-top: 28px; }
.also-available-list { list-style: none; padding: 0; margin: 8px 0 0; }
.also-available-list .row-desc { padding: 6px 0; border-bottom: 1px solid #eee; }
.also-available-list a { color: #181641; font-weight: 600; }
.also-available-list a:hover { color: #f6813a; }
.also-available-list .tag-primary { color: #818181; font-weight: 400; font-size: 13px; margin-left: 6px; }

/* ── Our Policies page (RSPO policy) — anchored, accessible, responsive ──────────── */
.policy-doc { margin-top: 18px; }
.policy-doc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; border-bottom: 2px solid #e1e5ee; margin-bottom: 18px; }
.policy-doc-title { margin: 0; color: #181641; font-size: 1.6em; line-height: 1.25; }
.policy-download { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: #181641; color: #fff; padding: 10px 18px; border-radius: 4px; text-decoration: none; font-weight: 600; }
.policy-download:hover, .policy-download:focus { background: #0f0d2e; color: #fff; text-decoration: none; }
.policy-toc { background: #f4f7fb; border: 1px solid #e1e5ee; border-radius: 6px; padding: 16px 20px; margin-bottom: 26px; }
.policy-toc-title { margin: 0 0 8px; font-weight: 700; color: #181641; text-transform: uppercase; font-size: .82em; letter-spacing: .04em; }
.policy-toc-list { margin: 0; padding-left: 20px; }
.policy-toc-list li { margin: 5px 0; }
.policy-toc-list a { color: #1f4e79; text-decoration: none; }
.policy-toc-list a:hover, .policy-toc-list a:focus { text-decoration: underline; }
.policy-section { scroll-margin-top: 90px; padding: 8px 0 18px; border-bottom: 1px solid #eef1f6; }
.policy-section h3 { color: #181641; margin: 18px 0 10px; font-size: 1.28em; }
.policy-section h4 { color: #2e3a6e; margin: 16px 0 8px; font-size: 1.02em; font-weight: 700; }
.policy-section p { line-height: 1.7; margin: 0 0 12px; }
.policy-section ul { margin: 0 0 14px; padding-left: 22px; }
.policy-section ul li { line-height: 1.6; margin: 5px 0; }
.policy-cert-box { background: #fff8e8; border: 1px solid #f0d9a0; border-left: 4px solid #c9972b; border-radius: 4px;
  padding: 16px 20px; margin: 22px 0; }
.policy-cert-box h4 { margin: 0 0 8px; color: #8a6a1e; }
.policy-cert-box p { margin: 0; line-height: 1.7; }
.policy-cta { margin-top: 22px; }
@media (max-width: 600px) {
  .policy-doc-head { flex-direction: column; align-items: flex-start; }
  .policy-download { width: 100%; justify-content: center; }
  .policy-doc-title { font-size: 1.35em; }
}

/* ── Homepage hero (PRODUCTION PARITY with independentchemical.com) ────────────────────
   H1 intro line (smaller) + H2 industries line (larger) + ONE prominent rounded white
   catalog search box with an inset magnifier. Values copied from production css/style.css +
   responsive.css. Behavior = GET form to /products (no WebForms postback). The earlier
   home_banner_sub / home_banner_search* redesign was unauthorized and has been removed. */
h1.home_banner_text { font-size: 30px; line-height: 34px; }
h2.home_banner_text { font-size: 50px; line-height: 55px; max-width: 1150px; }
.search-box { position: relative; width: 100%; max-width: 1024px; }
.search-box .search-input {
  padding: 42px 115px; width: 100%; max-width: 1000px; border-radius: 16px;
  background-color: #ffffff; font-style: normal; font-weight: 400; font-size: 18px;
  line-height: 20px; color: #132B48; border: none; outline: none;
}
.search-box .search-input::placeholder { color: #132B48; opacity: 1; }
.search-box .HomeSearch, .search-box .HomeSearch:hover {
  position: absolute; top: calc(50% - 17px); right: 35px;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer; line-height: 0;
}
@media (max-width: 767px) { h2.home_banner_text { font-size: 42px; line-height: 47px; } }
@media (max-width: 575px) {
  .search-box .search-input { padding: 20px 56px 20px 20px; border-radius: 8px; }
  .search-box .HomeSearch { right: 18px; }
}

/* ── Market CMS images (shared ChemCMS ADR-024 ProductMarketImages), beneath the market intro, above the
   product filter. Up to 3 across on desktop (a lone image stays ~1/3, left-aligned, matching production),
   stacked on mobile. Production image aspect ratio 530×362. ─────────────────────────────────────────── */
.product_market_images.section { padding: 28px 0 0; }
.product_market_images .container { max-width: 1258px; }
.product_market_images_row { display: flex; flex-wrap: wrap; gap: 20px; }
.product_market_image { flex: 0 1 calc(33.333% - 14px); margin: 0; }
.product_market_image img { width: 100%; aspect-ratio: 530 / 362; object-fit: cover; border-radius: 8px; display: block; }
@media (max-width: 767px) { .product_market_image { flex-basis: 100%; } }

/* ===== Product Detail — product-first UX (pre-launch parity recovery) =====================
   Removes the oversized generic lab hero; compact identity + structured facts (left) + integrated
   Quick Quote (right); catalog search band on top; rich content / taxonomy / documents below.
   Works for both legacy (sparse) and new supplier (rich) product records. ======================= */
.product-details .product-search-band.section { background:#F0F0F0; padding:26px 0; }
.product-details .product-search-band .container { max-width:1258px; }
/* .product_search_section (navy rounded band) is already styled by the market template and reused here. */

.product-details .product-top.section { padding:40px 0 18px; }
.product-details .product-top .container { max-width:1258px; }
.product-details .product-top-grid { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:48px; align-items:start; }
.product-details .product-top-main .heading-section { font-size:42px; line-height:48px; font-weight:600; color:#252525; margin:0 0 10px; }
.product-details .product-cas-chip { display:inline-block; background:#181641; color:#fff; font-size:15px; padding:5px 14px; border-radius:20px; text-decoration:none; margin-bottom:14px; }
.product-details .product-cas-chip:hover { background:#f48229; color:#fff; }
.product-details .product-lead { font-size:19px; line-height:28px; color:#555; margin:0 0 24px; max-width:720px; }
.product-details .product-facts { list-style:none; padding:0; margin:0; border-top:1px solid #e3e3e3; }
.product-details .product-facts li { display:flex; gap:24px; padding:13px 2px; border-bottom:1px solid #e3e3e3; font-size:17px; }
.product-details .product-facts .fact-k { flex:0 0 150px; font-weight:600; color:#252525; }
.product-details .product-facts .fact-v { color:#333; }
.product-details .product-facts .fact-v a { color:#181641; }
.product-details .product-facts .fact-v a:hover { color:#f48229; }
.product-details .product-facts .fact-structure .fact-v img { max-width:240px; border-radius:6px; }

.product-details .product-top-quote .form-gq { position:sticky; top:24px; background:#181641; border-radius:8px; padding:28px 26px; box-shadow:0 10px 30px rgba(24,22,65,.18); }
.product-details .product-top-quote .modal-title { color:#fff; font-size:26px; font-weight:600; margin:0 0 6px; text-transform:none; text-align:left; }
.product-details .product-top-quote .gq-sub { color:#c9c9e0; font-size:14px; margin:0 0 20px; }
.product-details .product-top-quote .modal-form { display:flex; flex-direction:column; gap:16px; }
.product-details .product-top-quote label { color:#fff; font-size:14px; font-weight:500; display:block; margin-bottom:8px; }
.product-details .product-top-quote .form-rows { display:flex; gap:14px; }
.product-details .product-top-quote .qty, .product-details .product-top-quote .box-input { width:50%; }
.product-details .product-top-quote input, .product-details .product-top-quote select { height:46px; width:100%; background:#fff; color:#333; font-size:16px; padding:0 12px; border-radius:4px; border:none; outline:none; }
.product-details .product-top-quote .rt-cta { display:block; width:100%; height:46px; border:none; border-radius:4px; background:#f48229; color:#fff; font-size:17px; font-weight:600; cursor:pointer; text-align:center; line-height:46px; text-decoration:none; }
.product-details .product-top-quote .rt-cta:hover { background:#fff; color:#f48229; }
.product-details .product-top-quote .rt-cta-alt { background:transparent; border:1px solid #fff; color:#fff; }
.product-details .product-top-quote .rt-cta-alt:hover { background:#fff; color:#181641; }

.product-details .product-body.section { padding:30px 0 70px; }
.product-details .product-body .container { max-width:1258px; }
.product-details .product-section { padding:26px 0; border-top:1px solid #ededed; }
.product-details .product-body .product-section:first-child { border-top:none; padding-top:6px; }
.product-details .product-section > h2 { font-size:28px; font-weight:600; color:#252525; margin:0 0 18px; }
.product-details .rich { font-size:17px; line-height:27px; color:#333; max-width:900px; }
.product-details .rich h3 { font-size:20px; font-weight:600; color:#252525; margin:22px 0 10px; }
.product-details .rich p { margin:0 0 14px; }
.product-details .rich ul { margin:0 0 16px; padding-left:22px; }
.product-details .rich li { margin:6px 0; }
.product-details .uses-grid { display:flex; gap:60px; flex-wrap:wrap; }
.product-details .uses-col h3 { font-size:18px; font-weight:600; margin:0 0 10px; }
.product-details .uses-col ul { list-style:none; padding:0; margin:0; }
.product-details .uses-col li { margin:7px 0; }
.product-details .uses-col a { color:#181641; }
.product-details .uses-col a:hover { color:#f48229; }
.product-details .docs-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:14px; }
.product-details .docs-list a { display:inline-flex; align-items:center; gap:10px; background:#f4f7fb; border:1px solid #dfe5ef; border-radius:6px; padding:12px 18px; color:#181641; font-weight:600; text-decoration:none; }
.product-details .docs-list a:hover { background:#181641; color:#fff; }
.product-details .docs-list i { color:#c0392b; }
.product-details .docs-list a:hover i { color:#fff; }
.product-details .also-available-list { list-style:none; padding:0; margin:0; }
.product-details .also-available-list li { padding:8px 0; border-bottom:1px solid #eee; }
.product-details .also-available-list a { color:#181641; font-weight:600; }
.product-details .also-available-list a:hover { color:#f48229; }
.product-details .product-grades ul { padding-left:22px; }

@media (max-width: 991px) {
  .product-details .product-top-grid { grid-template-columns:1fr; gap:28px; }
  .product-details .product-top-quote .form-gq { position:static; }
  .product-details .product-top-main .heading-section { font-size:32px; line-height:38px; }
  .product-details .uses-grid { gap:30px; }
}
@media (max-width: 575px) {
  .product-details .product-facts li { flex-direction:column; gap:3px; }
  .product-details .product-facts .fact-k { flex-basis:auto; }
}

/* ===== Business forms (Order / Request Sample / Document COA·SDS) — production workflow ===========
   Structured ICC business forms on the approved staging visual system + Contact Our Staff block. ===== */
.biz-form-page.section { padding:40px 0 55px; }
.biz-form-page .container { max-width:1258px; }
.biz-form-card { background:#f6f6f6; border-radius:8px; padding:36px 40px; }
.biz-form-title { font-size:34px; font-weight:600; color:#252525; margin:0 0 6px; }
.biz-intro { font-size:17px; color:#555; margin:0 0 22px; }
.biz-form fieldset { border:none; padding:0; margin:0 0 22px; }
.biz-form legend { font-size:17px; color:#555; font-weight:400; padding:0; margin:0 0 12px; }
.biz-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.biz-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.biz-input { width:100%; height:46px; border:1px solid #d9d9d9; border-radius:4px; padding:0 12px; font-size:15px; background:#fff; outline:none; box-sizing:border-box; }
.biz-input:focus { border-color:#181641; }
.biz-textarea { height:auto; min-height:110px; padding:12px; resize:vertical; }
.biz-rows-head { margin-bottom:8px; }
.biz-rows-head span { font-size:17px; font-weight:600; color:#252525; }
.biz-product-row { margin-bottom:10px; }
.biz-ack { margin:6px 0 24px; }
.biz-ack label { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:#555; line-height:1.5; }
.biz-ack input { margin-top:3px; flex:0 0 auto; }
.biz-submit { background:#f6813a; color:#fff; border:none; border-radius:4px; padding:12px 30px; font-size:16px; font-weight:600; cursor:pointer; }
.biz-submit:hover { background:#181641; }

.contact-staff { padding:50px 0 60px; text-align:center; }
.contact-staff h2 { font-size:38px; font-weight:700; color:#252525; margin:0 0 30px; }
.contact-staff-grid { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; }
.staff-card { border:1px solid #e1e1e1; border-radius:6px; padding:22px 28px; text-align:left; min-width:300px; }
.staff-card h3 { font-size:22px; font-weight:600; margin:0 0 4px; color:#252525; }
.staff-title { color:#9E9E9E; font-size:15px; margin:0 0 12px; }
.staff-contact { margin:4px 0; font-size:15px; }
.staff-contact a { color:#181641; text-decoration:none; }
.staff-contact a:hover { color:#f6813a; }

@media (max-width:767px){ .biz-grid-4, .biz-grid-2 { grid-template-columns:1fr 1fr; } .biz-form-card { padding:24px 18px; } }
@media (max-width:480px){ .biz-grid-4, .biz-grid-2 { grid-template-columns:1fr; } }

/* Request Sample — 7-column sample rows (horizontal scroll on narrow screens) */
.biz-sample-scroll { overflow-x:auto; margin-bottom:14px; }
.biz-sample-table { width:100%; min-width:960px; border-collapse:collapse; }
.biz-sample-table th { text-align:left; font-size:14px; font-weight:600; color:#252525; padding:4px 8px 10px; white-space:nowrap; }
.biz-sample-table td { padding:4px 8px; vertical-align:top; }
.biz-sample-table .biz-input { min-width:120px; }
.biz-note { font-size:14px; color:#555; margin:12px 0; }

/* Document/COA/SDS request — orange Contact Us treatment */
.doc-contact-banner { background:#f6813a; padding:40px 0; }
.doc-contact-banner h1 { color:#fff; font-size:44px; font-weight:700; margin:0; }
.biz-span-2 { grid-column: span 2; }
@media (max-width:767px){ .biz-span-2 { grid-column: span 2; } }
@media (max-width:480px){ .biz-span-2 { grid-column: span 1; } }

/* ===== Blog listing — uniform responsive card grid (production IA) ===== */
.blog-list.section { padding:44px 0 60px; }
.blog-list .container { max-width:1258px; }
.blog-list-title { font-size:40px; font-weight:600; color:#252525; margin:0 0 30px; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.blog-card { border:1px solid #e6e6e6; border-radius:8px; overflow:hidden; background:#fff; transition:box-shadow .2s, transform .2s; }
.blog-card:hover { box-shadow:0 10px 26px rgba(0,0,0,.09); transform:translateY(-2px); }
.blog-card-link { display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; }
.blog-card-img { display:block; aspect-ratio:16/9; overflow:hidden; background:#f0f0f0; }
.blog-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-body { display:flex; flex-direction:column; flex:1 1 auto; padding:20px 22px 22px; }
.blog-card.no-image .blog-card-body { border-top:3px solid #181641; }
.blog-card-date { color:#9E9E9E; font-size:13px; margin-bottom:8px; }
.blog-card-title { font-size:19px; font-weight:600; line-height:1.3; color:#181641; margin-bottom:10px; }
.blog-card-excerpt { font-size:15px; line-height:1.6; color:#555; flex:1 1 auto; margin-bottom:14px; }
.blog-card-more { color:#f6813a; font-weight:600; font-size:15px; }
.blog-card:hover .blog-card-title { color:#f6813a; }
@media (max-width:991px){ .blog-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .blog-grid { grid-template-columns:1fr; } }

/* ===== Blog detail — clean single-column article ===== */
.blog-detail.section { padding:46px 0 56px; }
.blog-detail .container { max-width:1258px; }
.blog-detail .blog-article { max-width:880px; margin:0; }
.blog-detail .blog-article-head h1 { font-size:40px; line-height:1.17; font-weight:600; color:#252525; margin:0 0 10px; }
.blog-detail .blog-date { color:#818181; font-size:15px; margin:0 0 30px; }
.blog-detail .rich-article { font-size:18px; line-height:1.75; color:#333; }
.blog-detail .rich-article h2 { font-size:30px; font-weight:600; color:#252525; margin:36px 0 14px; }
.blog-detail .rich-article h3 { font-size:22px; font-weight:600; color:#252525; margin:28px 0 10px; }
.blog-detail .rich-article h4 { font-size:19px; font-weight:600; margin:22px 0 8px; }
.blog-detail .rich-article p { margin:0 0 18px; }
.blog-detail .rich-article ul, .blog-detail .rich-article ol { margin:0 0 20px; padding-left:26px; }
.blog-detail .rich-article li { margin:8px 0; }
.blog-detail .rich-article a { color:#1a4fb0; }
.blog-detail .rich-article a:hover { text-decoration:underline; }
.blog-detail .rich-article img { max-width:100%; height:auto; border-radius:6px; margin:10px 0; }
.blog-detail .blog-back { margin:36px 0 0; }
.blog-detail .blog-back a { color:#f6813a; font-weight:600; text-decoration:none; }
.blog-detail .blog-back a:hover { text-decoration:underline; }
@media (max-width:767px){ .blog-detail .blog-article-head h1 { font-size:30px; } .blog-detail .rich-article { font-size:17px; } }