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

   Uses the site's own palette from styles.css — orange #F47920 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;
  --ap-orange: #005A8B;
  --ap-orange-dark: #00456B;
  --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; }
}