/* ==========================================================================
   Global header + inner page shell.

   Uses the site's own palette from styles.css — amber hsl(38,92%,50%) on near-black,
   Outfit for type, and square corners, because --radius-* is 0px throughout
   this design. An earlier version of this file invented an olive palette with
   rounded corners, which is why the header looked like it belonged to another
   site.
   ========================================================================== */

:root {
  /* One container width for the whole site. The header and the page content
     read from this so they share a left edge; they were 1320px and 1240px
     before, which put the logo outside the content column. */
  --ap-container: 1240px;
  --ap-gutter: 24px;
  --ap-header-h: 64px;
  /* The landing page's own accent, so the header, the buttons and the
     specification table all come out in one colour. */
  --ap-orange: hsl(38, 92%, 50%);
  --ap-orange-dark: hsl(38, 92%, 38%);
  --ap-ink: #1D1D1A;
  --ap-ink-2: #262622;
  --ap-line: rgba(255, 255, 255, .10);
}

.skip-to-content {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: #fff; color: #111; padding: .6rem 1rem;
}
.skip-to-content:focus { left: 8px; top: 8px; }

/* --- the one header ------------------------------------------------------ */
.primary-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1200;
  height: var(--ap-header-h);
  background: rgba(15, 16, 17, .92);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--ap-line);
  transition: transform 300ms cubic-bezier(.16, 1, .3, 1), background-color 250ms ease;
}
.primary-header.scrolled { background: rgba(15, 16, 17, .98); }
/* Stays put. scripts.js still toggles .header-hidden on downward scroll, but
   the rule that acted on it is gone, so the bar is visible at every scroll
   position rather than sliding away. */

.primary-header__in {
  max-width: var(--ap-container); height: 100%; margin: 0 auto;
  padding: 0 var(--ap-gutter);
  display: flex; align-items: center; gap: 28px;
}

.primary-header__logo { display: flex; align-items: center; flex: none; }
.primary-header__logo img { display: block; height: 28px; width: auto; }

.primary-header__nav { margin-left: auto; }
.primary-header__nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 2px;
}
.primary-header__nav li { position: relative; }
.primary-header__nav a {
  display: block; padding: 8px 12px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: rgba(255, 255, 255, .74); text-decoration: none;
  transition: color 200ms cubic-bezier(.16, 1, .3, 1),
              background-color 200ms cubic-bezier(.16, 1, .3, 1);
}
.primary-header__nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.primary-header__nav .current-menu-item > a,
.primary-header__nav .current_page_item > a { color: var(--ap-orange); }

.primary-header__nav ul ul {
  position: absolute; top: 100%; left: 0; display: none;
  min-width: 210px; flex-direction: column; gap: 0;
  background: var(--ap-ink-2); border: 1px solid var(--ap-line); padding: 6px;
}
.primary-header__nav li:hover > ul { display: flex; }

.primary-header__cta { display: flex; align-items: center; gap: 10px; flex: none; }

.primary-header__quote {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ap-orange); color: #fff !important; text-decoration: none;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 11px 20px;
  transition: background-color 200ms cubic-bezier(.16, 1, .3, 1);
}
.primary-header__quote:hover { background: var(--ap-orange-dark); color: #fff !important; }

.primary-header__burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; }
.primary-header__burger span { display: block; width: 20px; height: 2px; margin: 4px 0; background: #fff; }

/* Every page needs clearance for the fixed bar; the landing page's hero used
   to sit under its own fixed nav and still does. */
body { padding-top: var(--ap-header-h); }

@media (max-width: 1100px) {
  .primary-header__nav { display: none; }
  .primary-header__burger { display: block; }
  .primary-header__nav.is-open {
    display: block; position: absolute; top: var(--ap-header-h); left: 0; right: 0;
    background: var(--ap-ink-2); border-bottom: 1px solid var(--ap-line); padding: 10px 16px;
  }
  .primary-header__nav.is-open ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-header__nav.is-open a { padding: 12px 10px; border-bottom: 1px solid var(--ap-line); }
}

/* On a phone the header had a 113px logo, a 176px CONTACT US button and a
   burger inside 390px, with nothing left between them. The label is kept —
   an icon alone did not say what it did — but set at a size the bar can
   actually spare. */
@media (max-width: 640px) {
  .primary-header__in { padding-inline: 16px; gap: 10px; }

  /* The auto margin that pushed everything right lived on the nav, which is
     hidden at this width, so the logo, button and burger all collapsed into
     the left half of the bar with empty space beside them. */
  .primary-header__cta { margin-left: auto; }

  .primary-header__quote {
    font-size: 11px;
    letter-spacing: .03em;
    padding: 9px 12px;
    gap: 5px;
  }

  .primary-header__logo img { height: 24px; }
  .primary-header__burger { padding: 6px 2px 6px 6px; }
}

/* Tighter again on the narrowest handsets, but still labelled. */
@media (max-width: 380px) {
  .primary-header__quote { font-size: 10.5px; padding: 8px 10px; }
  .primary-header__in { padding-inline: 12px; gap: 8px; }
}



/* --- inner pages --------------------------------------------------------- */
.inner-wrap { max-width: var(--ap-container); margin: 0 auto; padding: 0 var(--ap-gutter); }

.inner-hero {
  background: var(--ap-ink); color: #fff;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.inner-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1; margin: 0; color: #fff;
}
.inner-lede {
  margin: 1rem 0 0; max-width: 62ch;
  font-size: 1.05rem; line-height: 1.65; color: rgba(255, 255, 255, .7);
}

.inner-body { background: #fff; color: var(--gray-900, #212529); padding: clamp(2.5rem, 5vw, 4rem) 0; }
.inner-body h2 { font-family: 'Outfit', system-ui, sans-serif; font-size: 1.6rem; margin: 2rem 0 .8rem; }
.inner-body h3 { font-family: 'Outfit', system-ui, sans-serif; font-size: 1.2rem; margin: 1.6rem 0 .6rem; }
.inner-body p, .inner-body li { font-size: 1rem; line-height: 1.72; max-width: 70ch; }
.inner-body a { color: var(--ap-orange-dark); }
.inner-body img { max-width: 100%; height: auto; }

.post-list { display: grid; gap: 1.4rem; }
.post-card { border: 1px solid var(--gray-200, #e9ecef); padding: 1.2rem 1.3rem; }
.post-card h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.post-card a { text-decoration: none; color: var(--gray-900, #212529); }
.post-card a:hover { color: var(--ap-orange-dark); }

/* ==========================================================================
   Catalogue
   ========================================================================== */

.ap-quote-btn {
  display: inline-flex; align-items: center;
  background: var(--ap-orange); color: #fff !important; text-decoration: none;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 11px 20px; border: 0; cursor: pointer;
  transition: background-color 200ms cubic-bezier(.16, 1, .3, 1);
}
.ap-quote-btn:hover { background: var(--ap-orange-dark); color: #fff !important; }
.ap-quote-btn--lg { font-size: 13.5px; padding: 14px 26px; }

.ap-quote-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 1.4rem 0 .6rem; }
.ap-quote-mail {
  font-family: var(--font-mono, monospace); font-size: 13px;
  color: var(--ap-orange-dark); text-decoration: none;
}
.ap-quote-mail:hover { text-decoration: underline; }
.ap-quote-note { font-size: 13.5px; color: var(--gray-700, #495057); max-width: 54ch; margin: 0 0 1.6rem; }

/* Product grid ------------------------------------------------------------ */
.woocommerce ul.products {
  display: grid; gap: 1.5rem; margin: 0 !important; padding: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* WooCommerce clearfixes this list with ::before/::after. On a float layout
   they are invisible; on a grid they are grid items, and they were taking the
   first and last cells — which is what left the hole in the top-left. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  border: 1px solid var(--gray-200, #e9ecef);
  padding: 0; text-align: left;
  display: flex; flex-direction: column;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--ap-orange);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
}
.woocommerce ul.products li.product > a { display: block; }
.woocommerce ul.products li.product img { margin: 0 !important; width: 100%; height: auto; display: block; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.02rem !important; font-weight: 600; line-height: 1.35;
  padding: 1rem 1.1rem .35rem !important; margin: 0;
  color: var(--gray-900, #212529);
}
.woocommerce ul.products li.product .ap-quote-btn { margin: .5rem 1.1rem 1.1rem; align-self: flex-start; }

/* Single product ---------------------------------------------------------- */
/* The single column has to be told it may shrink. Left to size itself, the
   grid took its width from the widest child — the quote button and the email
   address side by side — and produced a 336px column inside a 312px container.
   Every child then sat 24px past the right edge while the left kept its
   gutter, which is what made the whole page look shifted on a narrow phone. */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .woocommerce div.product { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary { width: auto !important; float: none !important; margin: 0 !important; }
.woocommerce div.product div.images img { border: 1px solid var(--gray-200, #e9ecef); }
.woocommerce div.product .product_title { display: none; }  /* the page hero already carries it */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 1.05rem; line-height: 1.7; color: var(--gray-700, #495057);
}

/* Description tab, without the shop chrome around it. */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 1rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: none; }
.woocommerce div.product .woocommerce-tabs .panel {
  margin: 0 !important; padding: 2rem 0 0; border-top: 1px solid var(--gray-200, #e9ecef);
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: 'Outfit', system-ui, sans-serif; font-size: 1.35rem; margin: 0 0 .8rem;
}

/* Shop furniture that has no place in a catalogue. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce .price,
.woocommerce div.product form.cart,
.woocommerce .added_to_cart,
.woocommerce #reviews,
.woocommerce .woocommerce-product-rating,
.woocommerce .product_meta,
.woocommerce .related.products,
.woocommerce-breadcrumb { display: none !important; }


/* The scroll progress bar that scripts.js appends to the header. It is
   positioned absolutely against the bar, so the header must establish a
   containing block for it. */
.primary-header { position: fixed; }
.primary-header #scroll-progress { position: absolute; bottom: -1px; left: 0; height: 3px; background: var(--ap-orange); }

/* --- breadcrumbs ---------------------------------------------------------
   Sits inside the dark page hero, above the title. */
.ap-crumbs { margin: 0 0 1.1rem; }
.ap-crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
}
.ap-crumbs li { display: inline-flex; align-items: center; }
.ap-crumbs li + li::before {
  content: '/';
  margin: 0 .55rem;
  color: rgba(255, 255, 255, .3);
}
.ap-crumbs a { color: rgba(255, 255, 255, .62); text-decoration: none; transition: color 200ms ease; }
.ap-crumbs a:hover { color: var(--ap-orange); }
.ap-crumbs [aria-current="page"] { color: rgba(255, 255, 255, .92); }

/* WooCommerce renders the attribute table in the Additional Information panel;
   with the tab strip hidden it stacks under the description. */
.woocommerce table.woocommerce-product-attributes {
  width: 100%; border-collapse: collapse; margin: 1rem 0 0; font-size: .95rem;
}
.woocommerce table.woocommerce-product-attributes th,
.woocommerce table.woocommerce-product-attributes td {
  border: 1px solid var(--gray-200, #e9ecef); padding: .6rem .85rem; text-align: left;
}
.woocommerce table.woocommerce-product-attributes th {
  background: var(--gray-100, #f8f9fa); font-weight: 600; width: 34%;
  font-family: 'Outfit', system-ui, sans-serif;
}
.woocommerce table.woocommerce-product-attributes p { margin: 0; }

/* ==========================================================================
   Type scale bump.

   The inner pages inherited a 1rem body size that reads small next to the
   landing page, which runs larger. Raised across the reading column and the
   product furniture.
   ========================================================================== */
.inner-body { font-size: 1.0625rem; }
.inner-body p,
.inner-body li { font-size: 1.0625rem; line-height: 1.78; max-width: 74ch; }
.inner-body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.8rem 0 1rem; letter-spacing: -.015em; }
.inner-body h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin: 2rem 0 .7rem; }
.inner-body ul, .inner-body ol { padding-left: 1.35rem; }
.inner-body li { margin-bottom: .5rem; }
.inner-body li::marker { color: var(--ap-orange); }

.inner-title { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
.inner-lede { font-size: 1.15rem; }

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 1.15rem; line-height: 1.72; color: var(--gray-700, #495057);
}
.ap-quote-note { font-size: 14.5px; }
.ap-crumbs ol { font-size: 12.5px; }

.woocommerce table.woocommerce-product-attributes { font-size: 1.02rem; }
.woocommerce table.woocommerce-product-attributes th,
.woocommerce table.woocommerce-product-attributes td { padding: .8rem 1rem; }

/* --- product FAQ ---------------------------------------------------------- */
.ap-faq { border-top: 1px solid var(--gray-200, #e9ecef); margin-top: 1.2rem; }
.ap-faq details { border-bottom: 1px solid var(--gray-200, #e9ecef); }
.ap-faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 0;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.08rem; font-weight: 600; color: var(--gray-900, #212529);
}
.ap-faq summary::-webkit-details-marker { display: none; }
.ap-faq summary::after {
  content: ''; margin-left: auto; flex: none;
  width: 10px; height: 10px; margin-top: .45rem;
  border-right: 2px solid var(--ap-orange); border-bottom: 2px solid var(--ap-orange);
  transform: rotate(45deg); transition: transform 200ms ease;
}
.ap-faq details[open] summary::after { transform: rotate(-135deg); }
.ap-faq summary:hover { color: var(--ap-orange-dark); }
.ap-faq__a { padding: 0 0 1.2rem; }
.ap-faq__a p { margin: 0; font-size: 1.0625rem; line-height: 1.75; color: var(--gray-700, #495057); }

/* --- closing CTA ---------------------------------------------------------- */
.ap-cta { grid-column: 1 / -1; background: var(--ap-ink); color: #fff; margin-top: 3rem; }
.ap-cta__in {
  padding: clamp(2rem, 4vw, 3rem);
  display: grid; gap: 1.8rem; align-items: center;
}
@media (min-width: 900px) { .ap-cta__in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.ap-cta__eyebrow {
  font-family: var(--font-mono, monospace); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ap-orange); margin: 0 0 .6rem;
}
.ap-cta__title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700;
  line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .8rem; color: #fff;
}
.ap-cta__body { margin: 0; font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,.74); max-width: 60ch; }
.ap-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.ap-cta__mail {
  font-family: var(--font-mono, monospace); font-size: 13.5px;
  color: rgba(255,255,255,.8); text-decoration: none;
}
.ap-cta__mail:hover { color: var(--ap-orange); }

/* --- datasheet box (product summary column) ------------------------------- */
.ap-ds {
  display: flex; gap: 1rem; align-items: flex-start;
  border: 1px solid var(--gray-200, #e9ecef);
  border-left: 3px solid var(--ap-orange);
  background: var(--gray-50, #fafafa);
  padding: 1.1rem 1.2rem;
  margin: 1.6rem 0 0;
  max-width: 30rem;
}
.ap-ds__icon { color: var(--ap-orange); flex: none; margin-top: .15rem; }
.ap-ds__title {
  margin: 0 0 .25rem; font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1rem; font-weight: 600; color: var(--gray-900, #212529);
}
.ap-ds__text { margin: 0 0 .6rem !important; font-size: .92rem !important; line-height: 1.5 !important; color: var(--gray-700, #495057); }
.ap-ds__link {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .9rem; font-weight: 600; color: var(--ap-orange-dark);
  text-decoration: none;
}
.ap-ds__link:hover { text-decoration: underline; }

/* --- closing CTA runs the full width -------------------------------------- */
/* It sits inside .inner-wrap, so it is pulled back out to the viewport edges.
   100vw includes the scrollbar, so the width is taken from the document
   element instead to avoid a horizontal overflow. */
/* Bleeds to the edges of the *content* area rather than the viewport, so the
   scrollbar's width is not counted twice. --sbw is measured once in shell.js;
   without it the fallback is a plain 50vw bleed. */
/* Full-bleed, measured rather than calculated.

   Every vw-based version of this was wrong somewhere: 100vw includes the
   scrollbar in some browsers and not others, so the band either overshot by
   the scrollbar's width or fell short of the edge. shell.js measures the
   element's real offset and sets the margins in pixels, which is exact
   everywhere. Without JS it simply stays inside the container — no overflow,
   just not full width. */
.ap-cta {
  width: auto;
  padding-inline: var(--ap-gutter);
}
.ap-cta__in { max-width: var(--ap-container); margin: 0 auto; padding-inline: 0; }

/* No overflow rule here on purpose: clipping an ancestor disables
   position:sticky for everything inside it, and the rail lives in this
   section. The CTA's bleed accounts for the scrollbar instead — see below. */

/* ==========================================================================
   Product document: content + sticky rail
   ========================================================================== */

.ap-doc { grid-column: 1 / -1; display: grid; gap: clamp(2rem, 4vw, 3.5rem); margin-top: 3rem; }
@media (min-width: 1000px) {
  /* align-items must NOT be `start` here. A sticky element can only travel
     inside its own container, and `start` shrinks the sidebar column to the
     height of the rail — leaving it nowhere to move. Stretching the column to
     the full row height gives the rail the run of the article. */
  .ap-doc { grid-template-columns: minmax(0, 1fr) 300px; align-items: stretch; }
  .ap-doc__aside { height: 100%; }
}

/* --- section rhythm ------------------------------------------------------
   The description was reading as one continuous run of paragraphs. Each h2
   now opens with a rule and real air above it, so the sections are legible as
   sections rather than as a wall. */
.ap-doc__main > h2 {
  margin: 3.4rem 0 1.1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200, #e9ecef);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
  scroll-margin-top: calc(var(--ap-header-h) + 20px);
}
.ap-doc__main > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.ap-doc__main > h3 {
  margin: 2.2rem 0 .6rem;
  font-size: 1.2rem; font-weight: 600;
  color: var(--gray-900, #212529);
}
.ap-doc__main > p { margin: 0 0 1.15rem; }
.ap-doc__main > ul,
.ap-doc__main > ol { margin: 0 0 1.6rem; }
.ap-doc__main > ul li { margin-bottom: .6rem; }

/* --- the rail ------------------------------------------------------------- */
.ap-rail { position: static; }
@media (min-width: 1000px) {
  .ap-rail { position: sticky; top: calc(var(--ap-header-h) + 24px); }
}

.ap-rail__toc {
  border: 1px solid var(--gray-200, #e9ecef);
  border-top: 3px solid var(--ap-orange);
  padding: 1.1rem 1.2rem 1.2rem;
  margin-bottom: 1rem;
  background: #fff;
}
.ap-rail__label {
  margin: 0 0 .7rem !important;
  font-family: var(--font-mono, monospace);
  font-size: 11px !important; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray-500, #adb5bd);
}
.ap-rail__toc ul { list-style: none; margin: 0; padding: 0; }
.ap-rail__toc li { margin: 0; }
.ap-rail__toc a {
  display: block; padding: .38rem 0;
  font-size: .92rem; line-height: 1.35;
  color: var(--gray-700, #495057); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease;
}
.ap-rail__toc a:hover { color: var(--ap-orange-dark); }
.ap-rail__toc a.is-current { color: var(--ap-orange-dark); font-weight: 600; }

.ap-rail__cta {
  border: 1px solid var(--gray-200, #e9ecef);
  background: var(--gray-50, #fafafa);
  padding: 1.2rem;
}
.ap-rail__primary { width: 100%; justify-content: center; margin-bottom: .6rem; }
.ap-rail__secondary {
  display: block; text-align: center;
  padding: 10px 16px;
  border: 1px solid var(--gray-300, #dee2e6); background: #fff;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gray-900, #212529); text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease;
}
.ap-rail__secondary:hover { border-color: var(--ap-orange); color: var(--ap-orange-dark); }
.ap-rail__meta {
  margin: .9rem 0 0 !important;
  font-family: var(--font-mono, monospace);
  font-size: 12.5px !important; line-height: 1.9 !important;
  color: var(--gray-700, #495057);
}
.ap-rail__meta a { color: var(--gray-700, #495057); text-decoration: none; }
.ap-rail__meta a:hover { color: var(--ap-orange-dark); }

/* On phones the rail is just another block, placed after the content. */
@media (max-width: 999px) {
  .ap-doc__aside { order: 2; }
  .ap-rail__toc { display: none; }
}

/* The product page ends on the full-bleed dark CTA, so the section's bottom
   padding was showing as a white strip between it and the footer. WooCommerce
   puts `single-product` on the body, so this only affects pages that actually
   end that way. */
.single-product .inner-body { padding-bottom: 0; }
.single-product .ap-cta { margin-bottom: 0; }

/* --- typical-values note -------------------------------------------------- */
.ap-spec-note {
  margin: .8rem 0 0 !important;
  font-size: .9rem !important; line-height: 1.6 !important;
  color: var(--gray-500, #adb5bd);
  border-left: 2px solid var(--gray-300, #dee2e6);
  padding-left: .9rem;
  max-width: 68ch;
}

/* --- datasheet card, sitting between the sections ------------------------- */
.ap-dscard {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  border: 1px solid var(--gray-200, #e9ecef);
  border-left: 3px solid var(--ap-orange);
  background: var(--gray-50, #fafafa);
  padding: 1.3rem 1.4rem;
  margin: 2.6rem 0 0;
}
.ap-dscard__icon { color: var(--ap-orange); flex: none; }
.ap-dscard__body { flex: 1 1 16rem; min-width: 0; }
.ap-dscard__title {
  margin: 0 0 .25rem !important;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.05rem !important; font-weight: 600;
  color: var(--gray-900, #212529);
}
.ap-dscard__text {
  margin: 0 !important;
  font-size: .95rem !important; line-height: 1.55 !important;
  color: var(--gray-700, #495057);
}
.ap-dscard__action { flex: none; }

/* --- sticky enquiry bar, phones, product pages --------------------------- */

/* The quote button lives near the top of a long product page and is gone after
   one swipe, so everything below it is read with no way to act on it. */
.ap-mbar { display: none; }

@media (max-width: 768px) {
  .ap-mbar {
    display: flex; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0;
    width: auto; max-width: 100%; box-sizing: border-box;
    z-index: 9990;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(15, 16, 17, .97);
    border-top: 1px solid var(--ap-line);
    backdrop-filter: blur(6px);
    transition: bottom 220ms cubic-bezier(.16, 1, .3, 1), opacity 180ms ease;
  }

  .ap-mbar__quote {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ap-orange); color: #fff !important; text-decoration: none;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 13px 16px;
  }
  .ap-mbar__quote:active { background: var(--ap-orange-dark); }

  .ap-mbar__icon {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px;
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
  }
  .ap-mbar__icon svg { width: 19px; height: 19px; }

  /* Gone from the form downwards, footer included.
     Moved out of the way rather than removed. display:none took it out of
     layout, and putting it back on the way up re-measured it against a
     viewport that had changed width in the meantime, so the bar came back
     wider than it went and collided with the chat launcher. Offsetting
     `bottom` leaves it laid out the whole time, so its width never changes.
     A transform would be the usual choice, but the landing page's own CSS
     wins that property on this element. */
  .ap-mbar.is-hidden {
    bottom: -140px;
    opacity: 0;
    pointer-events: none;
  }
  .ap-mbar__wa { background: #25D366; border-color: #25D366; color: #fff; }

  /* Clearance so the bar never covers the last of the content.
     This has to live on the footer, not the body: body padding paints the page
     background, which is white, so it put a white band under a dark footer and
     looked like the page had broken off. The footer is dark, so its own
     padding simply extends it behind the bar. */
  /* Bootstrap's pb-4 utility on the footer carries !important, so this has to
     as well or the clearance is silently dropped. */
  body.single-product .main-footer { padding-bottom: 24px !important; }

  /* Everything else parked in that corner moves up out of the bar's way, and
     drops back down once the bar has gone, so the two never sit against each
     other. Driven by a body class rather than :has(), so it is deterministic. */
  body.single-product .iq-chat { --iq-offset: 150px; }
  body.single-product.ap-bar-off .iq-chat { --iq-offset: 78px; }
  /* The launcher is a wide pill: icon plus "Ask INSOURCES Agent". Sitting
     directly above a full-width bar it reads as one stacked block and the two
     touch. On a phone it drops the label and becomes a round icon, which is
     what a launcher in a corner should be anyway, and sits well clear. */
  #chatbotToggle {
    padding: 0 !important;
    width: 52px; height: 52px;
    border-radius: 50% !important;
    justify-content: center;
    gap: 0 !important;
  }
  #chatbotToggle .chatbot-toggle-text { display: none !important; }
  #chatbotToggle .chatbot-toggle-avatar { margin: 0 !important; }

  body.single-product .sticky-whatsapp,
  body.single-product #chatbotToggle { bottom: 104px; }
  body.single-product.ap-bar-off .sticky-whatsapp,
  body.single-product.ap-bar-off #chatbotToggle { bottom: 20px; }
}

/* --- horizontal overflow on phones --------------------------------------- */

/* The WhatsApp tab carries a label that expands on hover. It sits outside the
   tab, 77px past the right edge of the screen, and a phone has no hover to
   trigger it with. Those 77px were enough to make the whole document
   scrollable sideways, which is why every product page looked shifted right
   with the content pushed off the edge.
   Hidden below the hover breakpoint; the tab itself is unchanged. */
@media (max-width: 768px) {
  .sticky-whatsapp-text { display: none !important; }
  .sticky-whatsapp-sidebar { overflow: hidden; }
}

/* The zoom plugin parks a full-size copy of the product image absolutely
   inside the gallery. It is meant to be clipped by its container. */
.woocommerce-product-gallery__image { overflow: hidden; }

/* Room for the quote row to break on a narrow screen rather than forcing the
   column wider than the page. */
@media (max-width: 480px) {
  .ap-quote-row { flex-wrap: wrap; row-gap: 12px; }
  .ap-quote-row > * { min-width: 0; }
  .ap-quote-btn--lg { flex: 1 1 100%; justify-content: center; }
}

/* --- enquiry section ----------------------------------------------------- */

/* This replaces the dark pop-up. On a phone that modal filled the screen,
   scrolled inside itself and sat a dark form on a light page; a form whose
   bottom a buyer cannot see is a form a buyer abandons. Five fields, white,
   at the foot of every page. */
.ap-enq {
  background: #fff;
  border-top: 1px solid var(--ap-line-2, #e6e6e6);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.ap-enq__in {
  max-width: var(--ap-container); margin: 0 auto; padding: 0 var(--ap-gutter);
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .ap-enq__in { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}

.ap-enq__eyebrow {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ap-orange); margin: 0 0 .6rem;
}
.ap-enq__title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em; margin: 0 0 .8rem; color: #14161a;
}
.ap-enq__lede { font-size: 1rem; line-height: 1.65; color: #4a4f57; margin: 0 0 1.4rem; }

.ap-enq__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ap-enq__contact a {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .95rem; font-weight: 600; color: #14161a; text-decoration: none;
  border-bottom: 1px solid var(--ap-orange); padding-bottom: 1px;
}
.ap-enq__contact a:hover { color: var(--ap-orange); }

/* Form ------------------------------------------------------------------- */

.ap-enq__form { display: grid; gap: 1rem; }
.ap-enq__row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .ap-enq__row { grid-template-columns: 1fr 1fr; } }

.ap-enq__field { display: grid; gap: .4rem; min-width: 0; }
.ap-enq__field > span {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: #40454d;
}
.ap-enq__field input,
.ap-enq__field textarea {
  width: 100%;
  font: inherit; font-size: 1rem; color: #14161a;
  background: #fff;
  border: 1px solid #d5d8dd;
  border-radius: 0;
  padding: .8rem .9rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ap-enq__field textarea { resize: vertical; min-height: 110px; }
.ap-enq__field input:focus,
.ap-enq__field textarea:focus {
  outline: none;
  border-color: var(--ap-orange);
  box-shadow: 0 0 0 3px rgba(244, 121, 32, .16);
}
.ap-enq__field input::placeholder,
.ap-enq__field textarea::placeholder { color: #9aa0a8; }

.ap-enq__submit {
  justify-self: start;
  background: var(--ap-orange); color: #fff; border: 0; border-radius: 0;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .95rem 2rem; cursor: pointer;
  transition: background-color 180ms ease;
}
.ap-enq__submit:hover { background: var(--ap-orange-dark); }
.ap-enq__note { font-size: .8rem; color: #6b7178; margin: 0; }

@media (max-width: 559px) {
  .ap-enq__submit { justify-self: stretch; text-align: center; }
}

/* --- button shape -------------------------------------------------------- */

/* Everything was set to 0px, which read as unfinished rather than as
   deliberate. A small radius on the buttons only; the cards, bands and the
   spec table keep their square edges. The utility classes the landing page
   uses carry !important, so this has to as well. */
.primary-header__quote,
.ap-quote-btn,
.ap-enq__submit,
.ap-mbar__quote,
.ap-mbar__icon,
.ap-rail__primary,
.ap-rail__secondary,
.ap-ds__link,
.ap-cta .btn,
.woocommerce a.button,
.woocommerce button.button {
  border-radius: 6px !important;
}

/* The two icon-only buttons look better a touch rounder than the text ones. */
.ap-mbar__icon { border-radius: 8px !important; }

/* --- footer wordmark ------------------------------------------------------ */
/* The image carries its intrinsic 486px in the markup and nothing capped it,
   so on a 375px phone it laid out at full size and pushed the document to
   498px wide. The body clips itself at that point, which is where the white
   band down the right of every page came from. Width is capped rather than
   fixed so it scales on a phone without a media query, and height stays auto
   so the lockup is never distorted. Same rule aramidpapers.com already had. */
.footer-logo {
  display: block;
  width: min(420px, 72vw);
  height: auto;
  margin: 0 auto;
}


/* ==========================================================================
   Technical specifications.

   WooCommerce ships this as a full-grid table with every value in italic and
   alternate rows striped grey, which reads as a spreadsheet pasted into the
   page rather than part of it. Rebuilt as a specification list: no boxes, no
   stripes, hairline rows, the label set as a label instead of boxed in grey,
   and the site's own accent carrying the rule under the heading so the block
   belongs to the page. Cells sit flush left and right with the prose column
   above them, so the section lines up with the rest of the page.

   Every colour comes from --ap-orange, which each site sets to its own
   accent, so this block is identical on aramidpapers.com and
   transformerinsulation.com and comes out in the right colour on both.
   ========================================================================== */

.woocommerce table.woocommerce-product-attributes {
  width: 100%;
  border: 0;
  border-top: 2px solid var(--ap-orange);
  border-collapse: collapse;
  margin: 1.2rem 0 0;
  font-size: 1rem;
}

.woocommerce table.woocommerce-product-attributes tr { border: 0; background: none; }

.woocommerce table.woocommerce-product-attributes th,
.woocommerce table.woocommerce-product-attributes td {
  border: 0;
  border-bottom: 1px solid var(--gray-200, #e9ecef);
  padding: .95rem 1rem;
  text-align: left;
  vertical-align: top;
  background: none;
}

/* The label is distinguished by how it is set, not by a grey fill. Its line
   box is matched to the value's so the two sit on the same optical line. */
.woocommerce table.woocommerce-product-attributes th {
  width: 30%;
  padding-left: 0;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  line-height: 2.1;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6d7580;
}

.woocommerce table.woocommerce-product-attributes td { padding-right: 0; }

/* WooCommerce italicises the value; the values are the content here. */
.woocommerce table.woocommerce-product-attributes td,
.woocommerce table.woocommerce-product-attributes td p {
  margin: 0;
  font-style: normal;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ap-ink, #1D1D1A);
}

/* WooCommerce stripes alternate rows. With a hairline already separating
   every row the stripe only added noise, and its grey belongs to no palette
   on either site. Selector matches theirs so it actually wins. */
.woocommerce table.shop_attributes tr:nth-child(2n) th,
.woocommerce table.shop_attributes tr:nth-child(2n) td { background: none; }

/* Losing your place across a wide row is what a table like this costs the
   reader; the row lights up in the site's accent instead. Flat grey first for
   anything without color-mix. */
.woocommerce table.woocommerce-product-attributes tr:hover th,
.woocommerce table.woocommerce-product-attributes tr:hover td {
  background: rgba(0, 0, 0, .028);
  background: color-mix(in srgb, var(--ap-orange) 6%, transparent);
}

.woocommerce table.woocommerce-product-attributes tr:last-child th,
.woocommerce table.woocommerce-product-attributes tr:last-child td {
  border-bottom-color: var(--gray-300, #dee2e6);
}

/* Two columns inside 375px leaves the value about twenty characters a line.
   Stacked, the label reads as a heading over its value. */
@media (max-width: 560px) {
  .woocommerce table.woocommerce-product-attributes th,
  .woocommerce table.woocommerce-product-attributes td {
    display: block;
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .woocommerce table.woocommerce-product-attributes th {
    border-bottom: 0;
    line-height: 1.7;
    padding: .95rem 0 .25rem;
  }

  .woocommerce table.woocommerce-product-attributes td { padding: 0 0 .95rem; }
}


/* ==========================================================================
   Product copy from the migrated catalogue.

   Each product's description arrived from the old site with this stylesheet
   inlined in a <style> tag at the top of the content. wp_kses_post() strips
   the tag but keeps its text, so all 4 KB of CSS was printing as body copy at
   the head of every product page. It is the same block on all ten products, so
   it lives here once and the tags were removed from the content.

   Written against WooCommerce's description tab, which this theme replaces
   with its own product document, so the one container selector is rescoped to
   .ap-doc__main. Everything else is the original, unchanged.
   ========================================================================== */

.ap-doc__main h2{margin-top:44px!important;margin-bottom:16px!important;padding-top:40px!important;border-top:2px solid #f0f0f0;font-size:22px!important;font-weight:700!important;}
.ap-doc__main h2:first-child{border-top:none!important;padding-top:0!important;margin-top:0!important;}
.ap-doc__main ul{margin-bottom:20px!important;line-height:2!important;}
.ap-doc__main p{margin-bottom:16px!important;line-height:1.9!important;color:#333;}
.ap-doc__main table{margin-bottom:24px!important;}
table.pf-spec{width:100%;border-collapse:collapse;font-size:14px;border:1px solid #ddd!important;}
table.pf-spec td{border:none!important;border-bottom:1px solid #e8e8e8!important;}
table.pf-spec td:first-child{border-bottom:1px solid #2a2a2a!important;}
table.pf-spec tr:last-child td{border-bottom:none!important;}
table.pf-spec2{width:100%;border-collapse:collapse;font-size:14px;border:1px solid #ddd!important;}
table.pf-spec2 td{border:none!important;border-bottom:1px solid #e8e8e8!important;}
table.pf-spec2 tr:last-child td{border-bottom:none!important;}
table.pf-grades td{border:none!important;border-bottom:1px solid #e8e8e8!important;vertical-align:top;}
table.pf-grades tr.pf-hn-highlight td{background:hsl(38, 92%, 96%)!important;}
table.pf-grades tr.pf-hn-highlight td:first-child{border-left:4px solid hsl(38, 92%, 50%)!important;}
table.pf-grades tr.pf-highlight td{background:hsl(38, 92%, 96%)!important;}
table.pf-grades tr.pf-highlight td:first-child{border-left:4px solid hsl(38, 92%, 50%)!important;}
table.pf-grades tr:last-child td{border-bottom:none!important;}
.pf-app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #ddd;margin-bottom:0;}
.pf-app-col-head{background:#1c1c1c;color:hsl(38, 92%, 50%);font-weight:700;font-size:13px;padding:12px 14px;border-right:1px solid #2e2e2e;}
.pf-app-col:last-child .pf-app-col-head{border-right:none;}
.pf-app-col ul{margin:0!important;padding:10px 14px!important;list-style:none;}
.pf-app-col ul li{font-size:13px;color:#333;padding:4px 0;border-bottom:1px solid #f0f0f0;line-height:1.6!important;}
.pf-app-col ul li:last-child{border-bottom:none;}
.pf-app-col ul li::before{content:"— ";color:hsl(38, 92%, 50%);}
.pf-img-row{display:flex;gap:0;margin:0 0 28px;border:1px solid #ddd;border-top:none;}
.pf-img-row img{width:50%;height:auto;display:block;}
.pf-cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0;}
.pf-cert-box{border:1px solid #e0e0e0;border-radius:6px;padding:16px 14px;text-align:center;background:#fff;}
.pf-cert-box strong{display:block;font-size:14px;font-weight:700;color:#1c1c1c;margin-bottom:4px;}
.pf-cert-box span{display:block;font-size:12px;color:#888;line-height:1.4;}
.pf-cert-box .pf-cert-tag{display:inline-block;background:hsl(38, 92%, 50%);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:3px;margin-bottom:8px;letter-spacing:0.5px;}
.pf-advantage-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0;}
.pf-advantage-box{background:#f8fafc;border-left:4px solid hsl(38, 92%, 50%);padding:16px 20px;border-radius:0 6px 6px 0;}
.pf-advantage-box h4{margin:0 0 6px;font-size:14px;font-weight:700;color:hsl(38, 92%, 50%);}
.pf-advantage-box p{margin:0!important;font-size:13px;color:#555;line-height:1.6;}
details.pf-faq{margin:0;border:none;border-bottom:1px solid #e5e7eb;}
details.pf-faq:first-of-type{border-top:1px solid #e5e7eb;}
details.pf-faq summary{padding:18px 0;cursor:pointer;font-weight:600;font-size:15px;color:hsl(38, 92%, 50%);background:#fff;list-style:none;display:flex;justify-content:space-between;align-items:center;}
details.pf-faq summary::-webkit-details-marker{display:none;}
details.pf-faq summary::after{content:'∨';font-size:16px;color:#aaa;flex-shrink:0;margin-left:12px;}
details.pf-faq[open] summary::after{content:'∧';}
details.pf-faq summary:hover{color:#cc5500;}
details.pf-faq .pf-faq-a{padding:4px 0 18px;font-size:14px;color:#555;line-height:1.8;}
@media(max-width:768px){.pf-app-grid{grid-template-columns:1fr 1fr;}
.pf-img-row{flex-direction:column;}
.pf-img-row img{width:100%;}
.pf-cert-grid{grid-template-columns:1fr 1fr;}
.pf-advantage-grid{grid-template-columns:1fr;}
}
@media(max-width:480px){.pf-app-grid{grid-template-columns:1fr;}
}


/* ==========================================================================
   Chat assistant and WhatsApp rail.

   Taken from aramidpapers.com's own stylesheet rather than rebuilt: the
   earlier port missed .chat-message and .message-content, so the assistant's
   replies fell back to an inherited grey that was almost unreadable on the
   dark panel. Only the accent is changed, orange to this site's amber.
   ========================================================================== */

/* Re-allow border radius for chatbot elements */
.chatbot-toggle-btn {
    border-radius: 26px !important;
}
.chatbot-toggle-avatar {
    border-radius: 50% !important;
}
.chatbot-widget {
    border-radius: 16px !important;
}
.chatbot-avatar {
    border-radius: 50% !important;
}
.chatbot-input-wrapper {
    border-radius: 24px !important;
}
.chatbot-send-btn {
    border-radius: 50% !important;
}
.chatbot-suggestion-chip {
    border-radius: 8px !important;
}
.chatbot-whatsapp-strip a {
    border-radius: 20px !important;
}
.message-content {
    border-radius: 12px !important;
}
.typing-dot {
    border-radius: 50% !important;
}
/* ─── CHATBOT FLOATING WIDGET (AGENTFORCE STYLE) ─── */
.chatbot-toggle-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 8px 8px;
    height: 52px;
    border-radius: 26px;
    background-color: hsl(38, 92%, 50%);
    color: var(--white);
    border: none;
    box-shadow: 0 8px 24px rgba(245, 159, 10, 0.4);
    cursor: pointer;
    z-index: 999;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease, box-shadow 0.3s ease;
}
.chatbot-toggle-btn:hover {
    transform: translateY(-2px) scale(1.03);
    background-color: hsl(38, 92%, 38%);
    box-shadow: 0 10px 28px rgba(245, 159, 10, 0.5);
}
.chatbot-toggle-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.toggle-avatar-svg {
    width: 100%;
    height: 100%;
}
.chatbot-toggle-text {
    font-size: 14.5px;
    font-weight: 700;
    font-family: var(--font-primary);
    white-space: nowrap;
}
@media (max-width: 480px) {
  .chatbot-toggle-btn {
        bottom: 16px;
        right: 16px;
        height: 44px;
        padding: 6px 14px 6px 6px;
        gap: 8px;
    }
  .chatbot-toggle-avatar {
        width: 30px;
        height: 30px;
        padding: 2px;
    }
  .chatbot-toggle-text {
        font-size: 13px;
    }
  .chatbot-widget {
        bottom: 72px;
        right: 16px;
    }
}
/* Chatbot Widget Container */
.chatbot-widget {
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 420px;
    max-width: 90vw;
    height: 520px;
    display: flex;
    flex-direction: column;
    background: rgba(13, 15, 16, 0.85);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: none;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    z-index: 999;
    overflow: hidden;
    animation: chat-widget-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                right 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Header */
.chatbot-header {
    padding: 16px 20px;
    background: rgba(20, 22, 24, 0.95);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.chatbot-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.chatbot-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.chatbot-title-block {
    display: flex;
    flex-direction: column;
}
.chatbot-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.01em;
}
.chatbot-header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.chatbot-minimize-btn,
.chatbot-maximize-btn,
.chatbot-reset-btn {
    width: 28px;
    height: 28px;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.chatbot-minimize-btn:hover,
.chatbot-maximize-btn:hover,
.chatbot-reset-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}
.chatbot-minimize-btn:active,
.chatbot-maximize-btn:active,
.chatbot-reset-btn:active {
    transform: scale(0.92);
}
.chatbot-minimize-btn .minimize-icon {
    width: 16px;
    height: 16px;
}
.chatbot-maximize-btn .maximize-icon {
    width: 14px;
    height: 14px;
}
.chatbot-reset-btn .reset-icon {
    width: 14px;
    height: 14px;
}
/* Toggle Expand/Restore Paths inside SVG */
.chatbot-widget.maximized .expand-path {
    display: none;
}
.chatbot-widget:not(.maximized) .restore-path {
    display: none;
}
/* Maximized Widget Styles */
.chatbot-widget.maximized {
    width: 650px;
    height: 80vh;
    max-height: 850px;
    bottom: 24px;
    right: 24px;
    border-radius: 20px !important;
}
@media (max-width: 768px) {
  .chatbot-widget.maximized {
        width: calc(100% - 32px);
        height: calc(100vh - 100px);
        bottom: 80px;
        right: 16px;
    }
}
@media (max-width: 480px) {
  .chatbot-widget.maximized {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        bottom: 0;
        right: 0;
        border-radius: 0 !important;
        z-index: 9999;
    }
}
/* Chat Body (Message area) */
.chatbot-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.chatbot-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Message Bubbles */
.chat-message {
    display: flex;
    max-width: 80%;
}
.chat-message.user {
    align-self: flex-end;
}
.chat-message.agent {
    align-self: flex-start;
}
.chat-message .message-content {
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.5;
    border-radius: 12px;
}
.chat-message.user .message-content {
    background-color: rgba(245, 159, 10, 0.15);
    color: rgba(255, 255, 255, 0.95);
    border-bottom-right-radius: 2px;
}
.chat-message.agent .message-content {
    background-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    border-bottom-left-radius: 2px;
}
/* Typing Indicator */
.chat-message.agent.typing .message-content {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
}
.typing-dot {
    width: 6px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: typing-dot-bounce 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
/* Footer (Input & Suggestions) */
.chatbot-footer {
    padding: 12px 16px 16px;
    background: rgba(10, 12, 13, 0.4);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Sparkles Input Bar */
.chatbot-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 4px 6px 4px 14px;
}
.chatbot-input-wrapper .sparkles-icon {
    width: 18px;
    height: 18px;
    color: rgba(245, 159, 10, 0.8);
    margin-right: 8px;
    flex-shrink: 0;
}
.chatbot-input-wrapper input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 0;
    font-size: 13.5px;
    color: #ffffff;
    outline: none;
}
.chatbot-input-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.chatbot-send-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.chatbot-input-wrapper input:valid + .chatbot-send-btn,
.chatbot-send-btn:hover {
    background-color: rgba(245, 159, 10, 0.2);
    color: hsl(38, 92%, 50%);
}
.chatbot-send-btn .send-icon {
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    margin-left: -2px;
    margin-top: -1px;
}
/* Suggestions Stack - Redesigned to be horizontal tags */
.chatbot-suggestions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}
.chatbot-suggestion-chip {
    width: auto;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.85);
    font-size: 11.5px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.chatbot-suggestion-chip:hover {
    background: rgba(245, 159, 10, 0.15);
    border-color: rgba(245, 159, 10, 0.3);
    color: var(--white);
    transform: translateY(-1px);
}
/* WhatsApp / Talk to Humans Strip */
.chatbot-whatsapp-strip {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
    margin-top: 4px;
}
.chatbot-whatsapp-strip a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #3aa56a;
    color: #f0fbf5;
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(58, 165, 106, 0.2);
}
.chatbot-whatsapp-strip a:hover {
    background: #2e8b54;
    color: #f0fbf5;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(46, 139, 87, 0.3);
}
.chatbot-whatsapp-strip .whatsapp-icon {
    width: 18px;
    height: 18px;
}
/* Sticky WhatsApp Sidebar Button */
.sticky-whatsapp-sidebar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9990;
    width: 48px;
    height: 48px;
    background-color: #25D366; /* WhatsApp Green */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    border-radius: 4px 0 0 4px;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}
.sticky-whatsapp-sidebar:hover {
    background-color: #128c7e;
    width: 140px;
}
.sticky-whatsapp-sidebar .sticky-whatsapp-icon {
    width: 24px;
    height: 24px;
    color: #ffffff;
    flex-shrink: 0;
}
.sticky-whatsapp-sidebar .sticky-whatsapp-text {
    color: #ffffff;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 14.5px;
    font-weight: 600;
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.sticky-whatsapp-sidebar:hover .sticky-whatsapp-text {
    opacity: 1;
    transition-delay: 0.1s;
}
@media (max-width: 768px) {
  .sticky-whatsapp-sidebar {
        width: 42px;
        height: 42px;
        padding: 0 9px;
    }
  .sticky-whatsapp-sidebar .sticky-whatsapp-icon {
        width: 24px;
        height: 24px;
    }
  .sticky-whatsapp-sidebar:hover {
        width: 42px;
    }
  .sticky-whatsapp-sidebar:hover .sticky-whatsapp-text {
        opacity: 0;
    }
}


/* --- landing catalogue cards ---------------------------------------------- */
/* The card's own button opens the quick-look drawer. These two send the reader
   to the product page itself, which is where the full copy, the gallery and
   the datasheet are. */
.catalog-card-link { color: inherit; text-decoration: none; }
.catalog-card-link:hover { color: var(--ap-orange); }

.catalog-card-page {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ap-orange); text-decoration: none; white-space: nowrap;
  padding: 7px 0 7px 12px;
}
.catalog-card-page:hover { color: var(--ap-orange-dark); text-decoration: underline; }


/* --- mobile: the two things that pushed the page wider than the phone ------ */

/* The migrated product copy carries real specification tables — six and seven
   columns of test values. At 375px they measured 641px, so the page scrolled
   sideways. They scroll inside themselves instead; nothing is hidden and the
   page stays put. */
@media (max-width: 700px) {
  .ap-doc__main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* A Bootstrap .row with g-5 pulls itself 24px wider than its container on each
   side, but .container only ever gives back 12px. Above mobile the container's
   max-width absorbs it; full-bleed on a phone it hung 12px off the right edge.
   The gutter is brought down to what the container actually compensates for. */
@media (max-width: 575.98px) {
  .container > .row.g-5,
  .container-fluid > .row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* A grid item's default min-width is auto, which is its widest content — so the
   document column sized itself to a 641px specification table and hung 290px
   off a 375px phone, whatever the table's own width said. Zero lets the column
   take the space it is given and the table scroll inside it. */
.ap-doc__main { min-width: 0; }

/* The widest specification tables came wrapped in a plain <div> that carried
   style="overflow-x:auto" in the original markup; wp_kses_post() dropped the
   attribute and left a bare div, so a 620px table sat in a 327px column and
   pushed the page sideways. The wrappers are the only unclassed divs in this
   copy, so the scrolling they were meant to have is given back here — no
   :has(), and the table keeps the min-width its author set. */
.ap-doc__main > div:not([class]) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}


/* --- pages brought across from the old site ------------------------------- */
/* These carry their own full-bleed hero, so the reading column's 40px of
   padding showed as a white band between the header and the hero image. */
.inner-body--full { padding: 0; }


/* --- the guides archive --------------------------------------------------- */
.post-list { display: grid; gap: 0; margin: 1rem 0 2rem; }

.post-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--gray-200, #e9ecef);
}
.post-card:first-child { border-top: 1px solid var(--gray-200, #e9ecef); }

/* Ten of the guides have a picture and five do not; without this the ones that
   do not would sit with an empty column where the image should be. */
.post-card:not(:has(.post-card__media)) { grid-template-columns: minmax(0, 1fr); }

.post-card__media { display: block; overflow: hidden; background: var(--gray-100, #f8f9fa); }
.post-card__media img { display: block; width: 100%; height: 132px; object-fit: cover; }

.post-card__date {
  display: block;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: #6d7580; margin-bottom: .4rem;
}

.post-card h2 { font-size: 1.22rem; line-height: 1.35; margin: 0 0 .5rem; letter-spacing: -.01em; }
.post-card h2 a { color: inherit; text-decoration: none; }
.post-card h2 a:hover { color: var(--ap-orange); }

.post-card p { margin: 0; font-size: .98rem; line-height: 1.62; color: var(--gray-700, #495057); }

@media (max-width: 640px) {
  .post-card { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .post-card__media img { height: 180px; }
}


/* --- scroll-reveal, off the landing page ---------------------------------- */
/* styles.css hides everything marked data-animate until scripts.js reveals it
   on scroll. That script is the landing page's and now runs only there, so on
   every other page the footer's three blocks stayed at opacity 0 — 728px of
   black nothing under the enquiry form. Off the landing page there is no
   observer, so nothing should be hidden waiting for one. */
body:not(.is-landing) [data-animate] {
  opacity: 1;
  transform: none;
}


/* --- amber needs dark text, not white ------------------------------------- */
/* White on hsl(38,92%,50%) is a 2.2:1 contrast ratio — below any legibility
   threshold, and the reason the red buttons could carry white text but these
   cannot. Near-black on the same amber is 9.6:1. Every control that is filled
   with the accent gets ink; links and labels that only take the accent as
   their text colour are left alone. */
.btn-primary,
.header-cta-btn,
.hip-btn-red,
.primary-header__quote,
.ap-quote-btn,
.ap-enq__submit,
.ap-mbar__quote,
.chatbot-toggle-btn,
.rfq-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
  color: #17181A !important;
}

/* The chat pill's icon and the send arrow ride on the same amber. */
.chatbot-toggle-btn svg,
.chatbot-toggle-btn .chatbot-toggle-text { color: #17181A; }

/* Badges and tags printed on amber in the migrated product copy. */
.pf-cert-box .pf-cert-tag,
.hip-badge,
.catalog-card-badge { color: #17181A !important; }


/* --- the blog grid -------------------------------------------------------- */
/* Replaces the earlier .post-list/.post-card pair; those rules are gone. */
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 1.6rem 0 2.6rem;
}

.post-tile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--gray-200, #e9ecef);
  overflow: hidden;
  transition: border-color 200ms cubic-bezier(.16, 1, .3, 1),
              box-shadow 200ms cubic-bezier(.16, 1, .3, 1);
}
.post-tile:hover {
  border-color: var(--ap-orange);
  box-shadow: 0 10px 30px rgba(23, 24, 26, .07);
}

/* The newest guide runs the full width, picture beside the copy. */
.post-tile--lead { grid-column: 1 / -1; flex-direction: row; }
.post-tile--lead .post-tile__media { flex: 0 0 46%; }
.post-tile--lead .post-tile__media img { height: 100%; min-height: 260px; }
.post-tile--lead h2 { font-size: 1.6rem; }

.post-tile__media { display: block; overflow: hidden; background: var(--gray-100, #f8f9fa); }
.post-tile__media img {
  display: block; width: 100%; height: 196px; object-fit: cover;
  transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
}
.post-tile:hover .post-tile__media img { transform: scale(1.04); }

/* Five of the guides have no picture. Rather than an empty frame, the card
   opens on the accent so the grid keeps its rhythm. */
.post-tile--nomedia .post-tile__body { border-top: 3px solid var(--ap-orange); }

.post-tile__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.5rem; }

.post-tile__meta {
  display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #8a929d;
}
.post-tile__cat { color: var(--ap-orange-dark); }
.post-tile__cat::before { content: '·'; margin-right: .7rem; color: #c9ced6; }

.post-tile h2 { font-size: 1.16rem; line-height: 1.34; margin: 0 0 .6rem; letter-spacing: -.01em; }
.post-tile h2 a { color: inherit; text-decoration: none; }
.post-tile:hover h2 a { color: var(--ap-orange-dark); }

.post-tile p {
  margin: 0 0 1.1rem; font-size: .95rem; line-height: 1.62;
  color: var(--gray-700, #495057);
}

.post-tile__more {
  margin-top: auto; align-self: flex-start;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ap-orange-dark); text-decoration: none;
}
.post-tile__more:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .post-tile--lead { flex-direction: column; }
  .post-tile--lead .post-tile__media img { min-height: 0; height: 220px; }
  .post-tile--lead h2 { font-size: 1.3rem; }
}


/* --- applications matrix -------------------------------------------------- */
/* The copy arrived with an em dash pushed in front of every item by CSS, four
   columns boxed in borders and their headings set in amber on black. Nothing
   in it carried meaning: the dash is not a bullet, the box is not a table, and
   the colour was doing the work that type should. Rebuilt in the same idiom as
   the specification table above it — one accent rule across the top, headings
   set as labels, hairlines between rows, and space instead of rules between
   columns. The markup is untouched. */

.pf-app-grid {
  border: 0;
  border-top: 2px solid var(--ap-orange);
  column-gap: 2.6rem;
  margin-bottom: 1.6rem;
}

.pf-app-col-head {
  background: none !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--gray-300, #dee2e6);
  padding: 1.05rem 0 .55rem !important;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #6d7580 !important;
}

.pf-app-col ul { padding: 0 !important; }

.pf-app-col ul li {
  padding: .72rem 0 !important;
  font-size: .95rem !important;
  line-height: 1.5 !important;
  color: var(--ap-ink, #1D1D1A) !important;
  border-bottom: 1px solid var(--gray-200, #e9ecef);
}

.pf-app-col ul li:last-child { border-bottom: 0; }

/* The marker itself. */
.pf-app-col ul li::before { content: none !important; }

/* Two columns and then one, with the accent rule repeated so each column still
   reads as its own list rather than a run-on. */
@media (max-width: 768px) {
  .pf-app-grid { column-gap: 1.8rem; row-gap: .6rem; }
  .pf-app-col-head { border-top: 1px solid var(--gray-200, #e9ecef); }
}



/* --- certifications ------------------------------------------------------- */
/* Four fixed columns in a 606px document column gave 90px cards, so "European
   Conformity — required for all EU market sales" broke over five centred
   lines. Same treatment as the applications matrix: sized against the
   container, set left, and the category carried as a label rather than a
   filled amber pill. */

.pf-cert-grid {
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)) !important;
  gap: 0 2.6rem !important;
  border-top: 2px solid var(--ap-orange);
  margin: 1.2rem 0 1.8rem !important;
}

.pf-cert-box {
  border: 0 !important;
  border-bottom: 1px solid var(--gray-200, #e9ecef) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 1.05rem 0 !important;
  text-align: left !important;
}

.pf-cert-box .pf-cert-tag {
  display: block !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 0 .35rem !important;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #6d7580 !important;
}

.pf-cert-box strong {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ap-ink, #1D1D1A);
  margin-bottom: .25rem;
}

.pf-cert-box span:not(.pf-cert-tag) {
  display: block;
  font-size: .9rem !important;
  line-height: 1.55 !important;
  color: var(--gray-700, #495057) !important;
  text-align: left !important;
}

/* The description is a <p> that opens with the name in <strong>, not a span —
   the earlier selector matched nothing, so the copy kept the old sizing. */
.pf-cert-box p {
  margin: 0 !important;
  font-size: .9rem !important;
  line-height: 1.55 !important;
  color: var(--gray-700, #495057) !important;
  text-align: left !important;
}
.pf-cert-box p strong {
  display: block;
  margin-bottom: .2rem;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ap-ink, #1D1D1A);
}
.pf-cert-box { padding: .95rem 0 !important; }


/* --- applications and certifications: one row ----------------------------- */
/* auto-fit packs as many columns as fit, which at ~840px was three — so the
   fourth sector dropped to a second row and left a ragged hole beside it.
   These read as one row across, so the count is fixed and the breakpoints are
   measured against the document column itself, not the viewport: the column is
   much narrower than the window whenever the contents rail is beside it, which
   is why viewport breakpoints got this wrong in both directions. */

.ap-doc__main,
.inner-body .hip-page { container-type: inline-size; }

@supports (container-type: inline-size) {

  .pf-app-grid,
  .pf-cert-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* Below this the four columns stop holding a phrase on one line. */
  @container (max-width: 760px) {
    .pf-app-grid,
    .pf-cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  }

  @container (max-width: 380px) {
    .pf-app-grid,
    .pf-cert-grid { grid-template-columns: minmax(0, 1fr) !important; }
  }
}