/*
 * Product data on the page.
 *
 * Every colour, size and space here is a theme token with a fallback, so the
 * catalogue follows Global Styles rather than holding its own palette — and a
 * site can restyle all of it from Appearance → Editor → Styles without editing
 * this file.
 */

.ff-pd, .ff-pt-wrap{
  --ff-pd-rule: var(--wp--preset--color--line, #d9e5ec);
  --ff-pd-label: var(--wp--preset--color--muted, #66798b);
  --ff-pd-ink: var(--wp--preset--color--ink, #132433);
  --ff-pd-accent: var(--wp--preset--color--primary, #225d83);
  --ff-pd-surface: var(--wp--preset--color--surface, #f4f7f9);
  --ff-pd-radius: 8px;
}

/* h2 is the right level for a screen reader — these are the page's sections —
   but the theme sizes h2 for a page title, and a page can hold six of these.
   The size is a token so Global Styles still governs it. */
.ff-pd__heading{
  margin:0 0 .75rem;
  font-size:var(--wp--preset--font-size--lg, 1.15rem);
  line-height:1.3;
}

/* --- Specification table -------------------------------------------------- */

.ff-pd-table{
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
  line-height:1.5;
}
.ff-pd-table th,
.ff-pd-table td{
  padding:.6rem .85rem;
  border:1px solid var(--ff-pd-rule);
  text-align:left;
  vertical-align:top;
}
.ff-pd-table th{
  width:34%;
  background:var(--ff-pd-surface);
  color:var(--ff-pd-label);
  font-weight:500;
}
.ff-pd-table td{ color:var(--ff-pd-ink); }

/* --- Key points ----------------------------------------------------------- */

.ff-pd-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.ff-pd-list li{
  position:relative;
  padding-left:1.6rem;
  line-height:1.5;
}
/* A check mark drawn in CSS rather than shipped as an icon font. */
.ff-pd-list li::before{
  content:"";
  position:absolute;
  left:0; top:.42em;
  width:.55rem; height:.3rem;
  border-left:2px solid var(--ff-pd-accent);
  border-bottom:2px solid var(--ff-pd-accent);
  transform:rotate(-45deg);
}

/* --- Chips ---------------------------------------------------------------- */

.ff-pd-chips, .ff-pt--chips{
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.ff-pd-chip, .ff-pt--chips .ff-pt__item{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid var(--ff-pd-rule);
  border-radius:100px;
  padding:.32rem .8rem;
  font-size:.84rem;
  line-height:1.4;
  background:var(--wp--preset--color--white, #fff);
}

/* --- FAQ ------------------------------------------------------------------ */

.ff-pd-faq{ display:flex; flex-direction:column; gap:.5rem; }
.ff-pd-faq__item{
  border:1px solid var(--ff-pd-rule);
  border-radius:var(--ff-pd-radius);
  background:var(--wp--preset--color--white, #fff);
}
.ff-pd-faq__item summary{
  cursor:pointer;
  padding:.8rem 1rem;
  font-weight:500;
  color:var(--ff-pd-ink);
  list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.ff-pd-faq__item summary::-webkit-details-marker{ display:none; }
/* The marker states which way the answer will move, so it is + and −. */
.ff-pd-faq__item summary::after{
  content:"+";
  color:var(--ff-pd-label);
  font-size:1.15rem;
  line-height:1;
  flex:0 0 auto;
}
.ff-pd-faq__item[open] summary::after{ content:"\2212"; }
.ff-pd-faq__answer{ padding:0 1rem .9rem; color:var(--ff-pd-label); }
.ff-pd-faq__answer p:last-child{ margin-bottom:0; }

/* --- Terms as cards ------------------------------------------------------- */

.ff-pt--cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:.9rem;
}
.ff-pt--cards .ff-pt__item{
  display:flex; flex-direction:column; gap:.35rem;
  border:1px solid var(--ff-pd-rule);
  border-radius:var(--ff-pd-radius);
  padding:1.1rem 1rem;
  background:var(--wp--preset--color--white, #fff);
}
.ff-pt__icon{ display:block; color:var(--ff-pd-accent); }
/* The icon set draws with a stroke and no fill — that lives in the blocks
   plugin's own .ff-icon rule, which these marks are not inside, so they were
   filling solid black and reading as blobs. */
.ff-pt__icon svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ff-pt--cards .ff-pt__name{ font-weight:600; color:var(--ff-pd-ink); }
.ff-pt__description{ font-size:.83rem; line-height:1.45; color:var(--ff-pd-label); }
.ff-pt__item a{ color:inherit; text-decoration:none; }
.ff-pt__item a:hover, .ff-pt__item a:focus-visible{ text-decoration:underline; }

/* --- Terms as a list ------------------------------------------------------ */

.ff-pt--list{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:.45rem;
}
.ff-pt--list .ff-pt__item{ display:flex; align-items:baseline; gap:.5rem; }

@media (max-width: 600px){
  .ff-pd-table th{ width:42%; }
  .ff-pd-table th, .ff-pd-table td{ padding:.5rem .6rem; font-size:.86rem; }
}

/* --- In the editor -------------------------------------------------------- */
/* A product template is edited outside any single product, so there is nothing
   to preview. This says what will appear rather than inventing a product. */
.ff-pd-placeholder{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  border:1px dashed var(--wp--preset--color--line, #c8d6e2);
  border-radius:8px;
  padding:1rem 1.1rem;
  background:var(--wp--preset--color--surface, #f4f7f9);
}
.ff-pd-placeholder__title{ font-weight:600; color:var(--wp--preset--color--ink, #132433); }
.ff-pd-placeholder__detail{ font-size:.82rem; color:var(--wp--preset--color--muted, #66798b); }

/* --- The product gallery -------------------------------------------------- */
/* WooCommerce's slider initialises, but its thumbnail strip arrives with the
   browser's own list styling — a numbered column down the page rather than a
   row of pictures under the main one. And the main image was rendering at 236px
   inside a column half the page wide. */
.woocommerce-product-gallery{max-width:100%}
.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-viewport img{
  width:100%;
  height:auto;
  border-radius:10px;
}
/* WooCommerce sizes these from `.woocommerce div.product div.images
   .flex-control-thumbs li` — three class names and three elements deep — and
   floats them into a grid of four. A two-name selector loses to that, which is
   why the thumbnails kept coming back at a quarter of the gallery's width
   however small this asked for them. Matching its depth, and turning off the
   float, lets one row hold five. */
.woocommerce div.product div.images ol.flex-control-thumbs,
.woocommerce-product-gallery .flex-control-thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:.75rem 0 0;
  padding:0;
  list-style:none;
  overflow:visible;
}
.woocommerce div.product div.images ol.flex-control-thumbs li,
.woocommerce-product-gallery .flex-control-thumbs li{
  flex:0 0 auto;
  width:clamp(48px,12%,68px);
  float:none;
  clear:none;
  margin:0;
  padding:0;
  list-style:none;
}
.woocommerce-product-gallery .flex-control-thumbs img{
  width:100%;
  height:auto;
  border:1px solid var(--wp--preset--color--line,#d9e5ec);
  border-radius:7px;
  cursor:pointer;
  opacity:.75;
  transition:opacity .18s ease,border-color .18s ease;
}
.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active{
  opacity:1;
  border-color:var(--wp--preset--color--primary,#225d83);
}

/* Four related products across, as the design has them. WooCommerce's own
   __responsive class fills the row with whatever fits a minimum width, which
   came out as three at this page's width. */
/* !important because WooCommerce sets these columns from a ResizeObserver at
   runtime, not from a stylesheet — it chooses three at this width, and the
   design asks for four. Nothing else competes for this property here. */
.ff-related-products .wc-block-product-template__responsive,
.ff-related-products .wc-block-product-template{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:22px;
}
@media(max-width:781px){
  .ff-related-products .wc-block-product-template__responsive,
  .ff-related-products .wc-block-product-template{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Available options as round-ended pills, which is all the design asks of
   them: the name of the option, in a shape. */
.ff-pd-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:.6rem 0 0;
  padding:0;
  list-style:none;
}
.ff-pd-chip{
  padding:.4rem 1rem;
  border:1px solid var(--wp--preset--color--line,#d9e5ec);
  border-radius:999px;
  font-size:.8125rem;
  color:var(--wp--preset--color--ink,#25394a);
  background:var(--wp--preset--color--white,#fff);
}

/* Space between the sections a column stacks, without any of them needing to
   know what sits above it. */
.wp-block-column > .ff-pd-wrap + .ff-pd-wrap,
.wp-block-column > .ff-pt-wrap + .ff-pd-wrap,
.wp-block-column > .ff-pd-wrap + .ff-pt-wrap,
.wp-block-column > .ff-pt-wrap + .ff-pt-wrap{
  margin-top:var(--wp--preset--spacing--60,2.25rem);
}

/* The machine photograph illustrates the section; it does not lead it. At full
   column width it was taller than everything it belongs to. */
/* The machine photograph illustrates the section; it does not lead it. At full
   column width it was taller than everything it belongs to. */
/* The picture is capped, not the section around it — putting the cap on the
   wrapper squeezed the notes underneath into a narrow column too. */
.ff-pd-image{margin:.9rem 0 0;padding:0;max-width:min(100%,360px)}
.ff-pd-image__img{
  display:block;
  width:100%;
  height:auto;
  border-radius:9px;
}

/* The description runs the full width of the row, under its own heading and
   above the related products. It had been capped to a reading measure, which
   left a half-empty row and read as an afterthought rather than as the
   description of the product. */
.ff-product-prose > * {
  max-width: none;
}
.ff-product-prose h3 {
  margin-top: 1.6em;
}

/* The quote list.

   A request-a-quote plugin renders the buyer's collected products as a
   WooCommerce shop table, which is built for a cart: full-width product
   photographs, a price column, a row height set by the image. On a page that
   is otherwise this site's, it arrives looking like a different website — and
   at 300px a row, three products push the form below the fold.

   Sized and framed to match the rest of the page instead. Nothing here changes
   what the plugin does, only how large it is. */

.ffpd-editor-placeholder{
  border:1px dashed var(--wp--preset--color--line, rgba(18,36,51,.2));
  border-radius:8px;
  padding:.75rem 1rem;
  font-size:var(--wp--preset--font-size--sm, .95rem);
}

.yith-ywraq-table,
table.shop_table.cart{
  width:100%;
  border:1px solid var(--wp--preset--color--line, rgba(18,36,51,.12));
  border-radius:10px;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  font-size:var(--wp--preset--font-size--sm, .95rem);
}

.yith-ywraq-table th,
table.shop_table.cart th{
  text-align:left;
  padding:.75rem 1rem;
  font-size:var(--wp--preset--font-size--xs, .875rem);
  font-weight:600;
  background:var(--wp--preset--color--surface, #f6f7f9);
  border-bottom:1px solid var(--wp--preset--color--line, rgba(18,36,51,.12));
}

.yith-ywraq-table td,
table.shop_table.cart td{
  padding:.75rem 1rem;
  vertical-align:middle;
  border-bottom:1px solid var(--wp--preset--color--line, rgba(18,36,51,.08));
}
.yith-ywraq-table tr:last-child td,
table.shop_table.cart tr:last-child td{border-bottom:0}

/* A thumbnail, not a hero. The image column is the one thing that decides how
   tall a row is, so it is the one thing worth pinning. */
.yith-ywraq-table td.product-thumbnail,
table.shop_table.cart td.product-thumbnail{width:72px}
.yith-ywraq-table td.product-thumbnail img,
table.shop_table.cart td.product-thumbnail img{
  width:56px;
  height:56px;
  object-fit:contain;
  display:block;
}

.yith-ywraq-table td.product-name a,
table.shop_table.cart td.product-name a{font-weight:600}

.yith-ywraq-table td.product-remove,
table.shop_table.cart td.product-remove{width:32px;text-align:center}

.yith-ywraq-table .qty,
table.shop_table.cart .qty{
  width:4.5rem;
  padding:.35rem .5rem;
  border:1px solid var(--wp--preset--color--line, rgba(18,36,51,.2));
  border-radius:6px;
}

@media (max-width:600px){
  .yith-ywraq-table td.product-thumbnail img,
  table.shop_table.cart td.product-thumbnail img{width:44px;height:44px}
  .yith-ywraq-table th, .yith-ywraq-table td,
  table.shop_table.cart th, table.shop_table.cart td{padding:.6rem .5rem}
}

/* The quote controls.

   A buyer collects products across several pages before writing one enquiry, so
   the state of that list has to be legible wherever they are: on the product
   they are reading, in the header, and on the quote page itself. All three are
   drawn from the site's own tokens — the same button shapes, the same rule
   colour, the same type scale — so the collected list reads as part of the
   site rather than as a plugin bolted onto it. */

/* --- The product page control ----------------------------------------- */

.ff-product-actions-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.75rem;
}

.ff-quote-toggle{
  cursor:pointer;
  border:1px solid transparent;
  font:inherit;
  /* The two states carry different words, and a control that resizes as it is
     clicked reads as a glitch. The labels are stacked in one grid cell so the
     button is as wide as its longest state and stays there. */
  display:inline-grid;
  align-items:center;
  justify-items:center;
}
.ff-quote-toggle > span{grid-area:1/1}

.ff-quote-toggle__added,
.ff-quote-toggle__remove{visibility:hidden}

.ff-quote-action[data-ff-quote-state="in"] .ff-quote-toggle__add{visibility:hidden}
.ff-quote-action[data-ff-quote-state="in"] .ff-quote-toggle__added{visibility:visible}

/* Collected is a settled state, not a call to action, so it steps back to an
   outline. The word only changes to "Remove" once the buyer is on the control —
   hovering, or arrived by keyboard — which is the moment the question of
   undoing it comes up. */
.ff-quote-action[data-ff-quote-state="in"] .wp-block-button__link{
  background-color:transparent;
  color:var(--wp--preset--color--primary, #225d83);
  border-color:var(--wp--preset--color--primary, #225d83);
}
.ff-quote-action[data-ff-quote-state="in"] .ff-quote-toggle__added::before{
  content:"\2713";
  margin-inline-end:.4em;
}
@media (hover:hover){
  .ff-quote-action[data-ff-quote-state="in"] .ff-quote-toggle:hover .ff-quote-toggle__added{visibility:hidden}
  .ff-quote-action[data-ff-quote-state="in"] .ff-quote-toggle:hover .ff-quote-toggle__remove{visibility:visible}
}
.ff-quote-action[data-ff-quote-state="in"] .ff-quote-toggle:focus-visible .ff-quote-toggle__added{visibility:hidden}
.ff-quote-action[data-ff-quote-state="in"] .ff-quote-toggle:focus-visible .ff-quote-toggle__remove{visibility:visible}

.ff-quote-action[data-ff-quote-busy] .wp-block-button__link{opacity:.6;pointer-events:none}

/* --- The header badge -------------------------------------------------- */

/* The count rides on the existing CTA rather than beside it.

   Two measurements decided how. An empty list is the state the header is in on
   almost every visit, so a standing "0" is noise — it is not drawn at all until
   there is something to count, and the `display` here would otherwise win over
   the hidden attribute's own rule, so it is turned off explicitly.

   And inline, the badge cost the button 26px: enough to move the point at which
   the navigation wraps to a second line from a ~1075px window to a ~1125px one.
   A laptop sitting between those two widths would have watched its own header
   rearrange itself the moment a product was collected. So the badge is taken
   out of the line entirely and hung on the button's corner, where it costs no
   width at all and the header measures the same whether the list holds nothing
   or nine. */
.ff-quote-badge{
  position:absolute;
  top:-.55em;
  inset-inline-end:-.55em;
  display:grid;
  place-items:center;
  min-width:1.45em;
  height:1.45em;
  padding:0 .3em;
  border-radius:999px;
  /* Darker than the button it sits on and ringed in the header's own white, so
     it separates from both — it straddles the edge between them. */
  background:var(--wp--preset--color--primary-dark, #163f5b);
  color:var(--wp--preset--color--white, #fff);
  font-size:.72em;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1;
  box-shadow:0 0 0 2px var(--wp--preset--color--white, #fff);
}
.ff-quote-badge[hidden]{display:none}

/* The button is the badge's frame of reference, so it has to be one. */
.ff-has-quote-badge{position:relative;overflow:visible}

/* Inside a menu the CTA is a full-width row, and a badge hung off its corner
   would sit outside the drawer. Kept within the row there instead. */
.ff-classic-menu__mobile-cta .ff-quote-badge{
  top:50%;
  inset-inline-end:.6em;
  transform:translateY(-50%);
}

/* --- The quote page list ----------------------------------------------- */

.ff-quote-list{margin-block-end:var(--wp--preset--spacing--40, 1.75rem)}

.ff-quote-list__title{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0 0 var(--wp--preset--spacing--30, 1rem);
  font-size:var(--wp--preset--font-size--md, 1.05rem);
}
.ff-quote-list__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.6rem;
  height:1.6rem;
  padding:0 .4rem;
  border-radius:999px;
  background:var(--wp--preset--color--primary, #225d83);
  color:var(--wp--preset--color--white, #fff);
  font-size:var(--wp--preset--font-size--xs, .8rem);
  font-variant-numeric:tabular-nums;
}

.ff-quote-list__empty,
.ff-quote-list__note{
  margin:0;
  font-size:var(--wp--preset--font-size--xs, .875rem);
  color:var(--wp--preset--color--muted, #66798b);
}
.ff-quote-list__note{margin-block-start:var(--wp--preset--spacing--30, 1rem)}

.ff-quote-list__items{
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid var(--wp--preset--color--line, rgba(18,36,51,.12));
  border-radius:10px;
  overflow:hidden;
}

.ff-quote-item{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:.7rem .9rem;
  border-bottom:1px solid var(--wp--preset--color--line, rgba(18,36,51,.08));
  transition:opacity .15s ease;
}
.ff-quote-item:last-child{border-bottom:0}
.ff-quote-item.is-removing{opacity:.45}

.ff-quote-item__thumb{flex:0 0 auto;line-height:0}
.ff-quote-item__thumb img{
  width:48px;
  height:48px;
  object-fit:contain;
  display:block;
  border-radius:6px;
}

.ff-quote-item__body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.ff-quote-item__name{
  font-weight:600;
  font-size:var(--wp--preset--font-size--sm, .95rem);
  color:var(--wp--preset--color--ink, #132433);
  text-decoration:none;
}
.ff-quote-item__name:hover{color:var(--wp--preset--color--primary, #225d83)}
.ff-quote-item__sku{
  font-size:var(--wp--preset--font-size--xs, .8rem);
  color:var(--wp--preset--color--muted, #66798b);
  font-variant-numeric:tabular-nums;
}

.ff-quote-item__remove{
  flex:0 0 auto;
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border:1px solid var(--wp--preset--color--line, rgba(18,36,51,.15));
  border-radius:6px;
  background:transparent;
  color:var(--wp--preset--color--muted, #66798b);
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.ff-quote-item__remove:hover,
.ff-quote-item__remove:focus-visible{
  border-color:var(--wp--preset--color--primary, #225d83);
  color:var(--wp--preset--color--primary, #225d83);
}

@media (max-width:600px){
  .ff-quote-item{gap:.7rem;padding:.6rem .7rem}
  .ff-quote-item__thumb img{width:40px;height:40px}
}

/* When the quote control has something to say.

   A success says itself — the count moves, the button changes — so the live
   region stays where it is, read aloud and not shown. A failure has no such
   signal of its own, and a click that quietly does nothing is the worst of the
   two outcomes, so on failure the same region steps out of hiding. */
.ff-quote-live.is-error{
  max-width:42ch;
  margin:0;
  padding:.5rem .7rem;
  border:1px solid var(--wp--preset--color--line, rgba(18,36,51,.2));
  border-inline-start:3px solid var(--wp--preset--color--primary, #225d83);
  border-radius:6px;
  background:var(--wp--preset--color--surface, #f4f7f9);
  font-size:var(--wp--preset--font-size--xs, .875rem);
  color:var(--wp--preset--color--ink, #132433);
}