/* ============================================================
   HiFiForge global styling
   Injected site-wide via a Custom HTML widget in footer-widget-4,
   so it reaches shop, category, product, cart and account pages -
   Astra is a classic theme and exposes no REST route for global CSS.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --hff-bg:#FAFAF9; --hff-surface:#FFFFFF; --hff-alt:#F1F3F5;
  --hff-text:#16181C; --hff-text2:#5B6169; --hff-muted:#9AA0A8; --hff-border:#E4E6E9;
  --hff-accent:#1C5FA8; --hff-accent-dark:#123F70; --hff-accent-bg:#EAF2FB;
  --hff-dark:#12151A;
  --hff-sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hff-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}

/* ---------- typography: Astra ships a serif for headings ---------- */
body:not(.home) h1,body:not(.home) h2,body:not(.home) h3,
body:not(.home) h4,body:not(.home) .entry-title,
.woocommerce-loop-product__title,.product_title{
  font-family:var(--hff-sans)!important;
  letter-spacing:-.02em;font-weight:600;
}
body{font-family:var(--hff-sans)}

/* ---------- header ---------- */
.site-header,.ast-primary-header-bar{
  border-bottom:1px solid var(--hff-border)!important;
  box-shadow:none!important;background:var(--hff-surface)!important;
}
.ast-primary-header-bar{padding-top:6px!important;padding-bottom:6px!important}
.site-logo-img img,.custom-logo{max-height:40px!important;width:auto!important}

/* top-level menu items */
.main-header-menu > .menu-item > .menu-link{
  font-family:var(--hff-sans)!important;
  font-size:14px!important;font-weight:500!important;
  color:var(--hff-text2)!important;letter-spacing:0!important;
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link{
  color:var(--hff-accent)!important;
}

/* dropdowns */
.main-header-menu .sub-menu{
  border:1px solid var(--hff-border)!important;
  border-radius:8px!important;
  box-shadow:0 14px 40px rgba(18,63,112,.10)!important;
  padding:8px 0!important;background:var(--hff-surface)!important;
}
.main-header-menu .sub-menu .menu-link{
  font-size:13.5px!important;color:var(--hff-text2)!important;
  padding:7px 20px!important;line-height:1.45!important;
}
.main-header-menu .sub-menu .menu-link:hover{
  color:var(--hff-accent)!important;background:var(--hff-accent-bg)!important;
}
/* group headings inside "All Products": items whose label has no leading dash */
.main-header-menu .sub-menu > .menu-item > .menu-link:not([href*="hp-"]):not([href*="iem-"]):not([href*="adapter-6"]):not([href*="adapter-7"]){
  font-weight:600!important;color:var(--hff-text)!important;
}
/* the Shop by Gear list is long - lay it out in columns */
#menu-item-gear-wrap .sub-menu{columns:2;column-gap:0;min-width:340px}

/* ---------- buttons ---------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.wp-block-button__link,.ast-button{
  background:var(--hff-accent)!important;color:#fff!important;
  border-radius:6px!important;font-family:var(--hff-sans)!important;
  font-size:14px!important;font-weight:500!important;
  border:1px solid transparent!important;letter-spacing:0!important;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:var(--hff-accent-dark)!important;color:#fff!important;
}

/* ---------- shop / category archives ---------- */
.woocommerce ul.products li.product{
  background:var(--hff-surface);border:1px solid var(--hff-border);
  border-radius:8px;overflow:hidden;padding:0!important;
  transition:border-color .15s,transform .15s;
}
.woocommerce ul.products li.product:hover{
  border-color:#B8CCE0;transform:translateY(-2px);
}
/* product photos are square cut-outs - contain, never crop */
.woocommerce ul.products li.product img{
  aspect-ratio:1/1;object-fit:contain!important;background:#fff;
  padding:10px;margin-bottom:0!important;border-bottom:1px solid var(--hff-border);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:13.5px!important;font-weight:500!important;line-height:1.4!important;
  padding:14px 16px 4px!important;margin:0!important;color:var(--hff-text)!important;
}
.woocommerce ul.products li.product .price{
  font-family:var(--hff-mono)!important;font-size:14px!important;
  color:var(--hff-text)!important;padding:0 16px 14px!important;display:block;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  margin:0 16px 16px!important;display:inline-block;
}
.woocommerce ul.products li.product .onsale{
  background:var(--hff-accent)!important;border-radius:4px!important;
}

/* archive header */
.woocommerce-products-header__title,.woocommerce-products-header,
.ast-archive-description{max-width:1180px;margin-left:auto;margin-right:auto}
.woocommerce-result-count,.woocommerce-ordering select{
  font-family:var(--hff-sans);font-size:13.5px;color:var(--hff-text2);
}

/* ---------- single product ---------- */
.single-product div.product .product_title{font-size:26px!important;line-height:1.3!important}
.single-product div.product .price{
  font-family:var(--hff-mono)!important;color:var(--hff-text)!important;
}
.single-product div.product .woocommerce-product-gallery img{
  object-fit:contain!important;background:#fff;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--hff-sans)!important;font-size:14px!important;font-weight:500!important;
}
.woocommerce div.product form.cart .variations label{
  font-family:var(--hff-sans);font-size:13.5px;font-weight:600;color:var(--hff-text);
}
.woocommerce div.product form.cart .variations select{
  border:1px solid var(--hff-border);border-radius:6px;padding:9px 12px;
  font-family:var(--hff-sans);font-size:13.5px;background:#FAFBFC;
}

/* ---------- footer ---------- */
.site-footer,.ast-footer-overlay{
  background:var(--hff-surface)!important;border-top:1px solid var(--hff-border)!important;
}
.site-footer .widget-title,.site-footer h2.widget-title{
  font-family:var(--hff-sans)!important;font-size:12px!important;
  text-transform:uppercase!important;letter-spacing:.05em!important;
  color:var(--hff-muted)!important;font-weight:600!important;margin-bottom:14px!important;
}
.site-footer .menu-item a,.site-footer .widget a{
  font-family:var(--hff-sans);font-size:13.5px;color:var(--hff-text2)!important;
  text-decoration:none!important;
}
.site-footer .menu-item a:hover,.site-footer .widget a:hover{color:var(--hff-accent)!important}
.ast-footer-copyright{
  font-family:var(--hff-sans);font-size:12.5px;color:var(--hff-muted);
}
/* the widget that carries this stylesheet must not occupy layout space */
.widget_custom_html:has(> .textwidget > style:only-child){display:none!important}
#custom_html-2{display:none!important}

/* ---------- mobile ---------- */
@media(max-width:921px){
.main-header-menu .menu-link{font-size:14px!important}
  .ast-mobile-popup-drawer .main-header-menu .sub-menu .menu-link{
    font-size:13.5px!important;padding-left:28px!important;
  }
  #menu-item-gear-wrap .sub-menu{columns:1;min-width:0}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:12.5px!important}
  .woocommerce ul.products li.product .price{font-size:13px!important}
  .single-product div.product .product_title{font-size:21px!important}
}
/* Astra renders the product loop as CSS grid and keeps columns-4 on small
   screens, leaving 74px cards. Override the grid, not the item width. */
@media(max-width:921px){
  .woocommerce ul.products[class*="columns-"]{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;
  }
  .woocommerce ul.products li.product{width:auto!important;margin:0!important}
}
@media(max-width:600px){
  .woocommerce ul.products[class*="columns-"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;
  }
  .woocommerce ul.products li.product img{padding:7px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{padding:11px 12px 3px!important}
  .woocommerce ul.products li.product .price{padding:0 12px 11px!important}
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart{margin:0 12px 12px!important;font-size:12.5px!important}
}

/* ============================================================
   HEADER REBUILD
   Astra ships a transparent header (position:absolute) that sat on
   top of the page content, a 3-column grid ordered [menu][logo][tools]
   which squeezed the 6-item menu into 479px so it wrapped to 3 rows
   (174px tall), and an archive banner carrying a stock photo.
   ============================================================ */

/* 1. stop the header overlaying the content */
.site-header,
.ast-main-header-wrap,
.ast-primary-header-bar{position:static!important;top:auto!important}
body.ast-theme-transparent-header .site-header{background:var(--hff-surface)!important}
.ast-theme-transparent-header .site-content,
.ast-theme-transparent-header #content{margin-top:0!important;padding-top:0!important}
/* Astra pulls the first section up under a transparent header */
.ast-transparent-header .site-content .ast-container{margin-top:0!important}

/* 2. re-order to [logo] [menu] [tools] and give the menu room */
.ast-primary-header-bar .ast-builder-grid-row-has-sides{
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  min-height:0!important;
}
.site-header-primary-section-center{order:1!important;justify-content:flex-start!important}
.site-header-primary-section-left  {order:2!important;justify-content:center!important}
.site-header-primary-section-right {order:3!important;justify-content:flex-end!important}
.site-header-primary-section-left,
.site-header-primary-section-center,
.site-header-primary-section-right{min-height:0!important;height:auto!important}

/* 3. keep the menu on one line */
.ast-primary-header-bar .main-header-menu{flex-wrap:nowrap!important;white-space:nowrap}
/* Astra sets line-height to the full header height (80px), which is what made the
   bar 96px tall - not wrapping. */
.ast-primary-header-bar .main-header-menu > .menu-item > .menu-link{
  padding:9px 10px!important;line-height:1.5!important;height:auto!important;
}
.ast-primary-header-bar .main-header-menu > .menu-item{line-height:1.5!important}
.ast-primary-header-bar .main-header-menu .sub-menu{white-space:normal}

/* 4. a compact header bar */
.ast-primary-header-bar{
  padding-top:0!important;padding-bottom:0!important;min-height:0!important;
}
.ast-primary-header-bar .site-primary-header-wrap{min-height:0!important}
/* Astra caps the header row at 1240px while the viewport is far wider. Once the
   language and currency controls joined the right-hand side there was no longer
   room for seven menu items, and the nav started overlapping the logo. */
.ast-primary-header-bar .site-primary-header-wrap{max-width:1400px!important}
.ast-primary-header-bar .ast-builder-grid-row{padding:10px 0!important;min-height:0!important}
.site-logo-img img,.custom-logo{max-height:42px!important;width:auto!important}

/* 5. make the tools legible - search / account / cart */
.ast-header-search .astra-search-icon,
.ast-header-woo-cart .ast-cart-menu-wrap{font-size:19px!important;color:var(--hff-text)!important}
.ast-header-woo-cart .ast-cart-menu-wrap:hover,
.ast-header-search .astra-search-icon:hover{color:var(--hff-accent)!important}
.ast-site-header-cart .ast-cart-menu-wrap{
  display:inline-flex!important;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--hff-border);border-radius:50%;
}
.ast-cart-menu-wrap .count,.ast-site-header-cart .count{
  font-family:var(--hff-mono)!important;font-size:11px!important;
  background:var(--hff-accent)!important;color:#fff!important;
  border:0!important;border-radius:10px!important;
  min-width:17px;height:17px;line-height:17px!important;
  position:absolute;top:-4px;right:-4px;
}
.ast-header-account-wrap,.hff-account-link{
  display:inline-flex!important;align-items:center;gap:6px;
  font-family:var(--hff-sans);font-size:13.5px;color:var(--hff-text2)!important;
  text-decoration:none!important;white-space:nowrap;
}
.hff-account-link:hover{color:var(--hff-accent)!important}
.site-header-primary-section-right{gap:14px!important}

/* 6. Archive banner carried a 645px stock photo of a model, unrelated to cables.
   The banner also holds the category title and breadcrumbs, so strip the image and
   the height rather than hiding the element - otherwise the heading disappears. */
.ast-archive-entry-banner{
  background-image:none!important;background-color:transparent!important;
  min-height:0!important;height:auto!important;
  padding:34px 0 0!important;margin:0!important;
}
.ast-archive-entry-banner .ast-container{max-width:1180px;padding:0 32px}
.ast-archive-entry-banner h1{
  font-size:28px!important;line-height:1.25!important;margin:0 0 10px!important;
  color:var(--hff-text)!important;text-shadow:none!important;text-align:left!important;
}
.ast-archive-entry-banner .ast-breadcrumbs-wrapper,
.ast-archive-entry-banner .breadcrumbs,
.ast-archive-entry-banner .breadcrumb-trail{
  text-align:left!important;font-size:12.5px!important;
}
.ast-archive-entry-banner .breadcrumb-trail a,
.ast-archive-entry-banner .breadcrumb-trail span{
  color:var(--hff-text2)!important;text-shadow:none!important;
}
.ast-archive-entry-banner .breadcrumb-trail a:hover{color:var(--hff-accent)!important}
.woocommerce-products-header{max-width:1180px;margin:0 auto!important}
.woocommerce-products-header__title{
  font-size:28px!important;margin:0 0 8px!important;color:var(--hff-text)!important;
}
.woocommerce-products-header .term-description{
  color:var(--hff-text2);font-size:15px;max-width:680px;
}

/* 7. mobile header */
@media(max-width:921px){
  .ast-primary-header-bar .ast-builder-grid-row{padding:8px 0!important}
  .site-logo-img img,.custom-logo{max-height:34px!important}
  .ast-archive-entry-banner{padding:22px 0 0!important}
  .ast-archive-entry-banner .ast-container{padding:0 20px}
  .ast-archive-entry-banner h1{font-size:21px!important}
  .woocommerce-products-header{padding:22px 20px 0!important}
  .woocommerce-products-header__title{font-size:21px!important}
}
/* ============================================================
   FOOTER
   Four footer widget areas, each holding one column built from the
   policy pages. Astra Pro is active, so its addon CSS is overridden here.
   ============================================================ */
.site-footer .widget{margin-bottom:0!important}
.site-footer .widget_custom_html{padding:0!important}

.hff-fcol{font-family:var(--hff-sans)}
.hff-ftitle{
  font-family:var(--hff-sans)!important;font-size:11.5px!important;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--hff-muted)!important;font-weight:600!important;
  margin:0 0 15px!important;
}
.hff-flist{list-style:none!important;margin:0!important;padding:0!important}
.hff-flist li{margin:0 0 10px!important;line-height:1.5}
.hff-flist a{
  font-size:13.5px!important;color:var(--hff-text2)!important;
  text-decoration:none!important;
}
.hff-flist a:hover{color:var(--hff-accent)!important}

.hff-flogo{display:block;height:34px;width:auto;max-width:180px;margin-bottom:14px}
.hff-fblurb{
  font-size:13px;color:var(--hff-text2);line-height:1.65;
  margin:0 0 14px;max-width:280px;
}
.hff-fmail{
  font-family:var(--hff-mono);font-size:13px;
  color:var(--hff-accent)!important;text-decoration:none!important;
}
.hff-fnote{font-size:12px;color:var(--hff-muted);margin:6px 0 0}

.hff-ftrust{display:flex;flex-direction:column;gap:7px;margin-top:18px}
.hff-fbadge{
  font-size:11.5px;color:var(--hff-text2);
  padding-left:16px;position:relative;line-height:1.5;
}
.hff-fbadge::before{
  content:"";position:absolute;left:0;top:6px;
  width:6px;height:6px;border-radius:50%;background:var(--hff-accent);
}
.hff-fpay{
  font-family:var(--hff-mono);font-size:11.5px;
  color:var(--hff-muted);margin:16px 0 0;
}

.hff-fbottom{
  border-top:1px solid var(--hff-border);
  margin-top:36px;padding-top:20px;
  display:flex;flex-direction:column;gap:6px;
  font-size:12px;color:var(--hff-muted);line-height:1.6;
}
.hff-flegal{font-size:11.5px}

/* Astra's own copyright row is redundant now */
.ast-footer-copyright{display:none!important}

@media(max-width:921px){
  .hff-fblurb{max-width:none}
  .hff-ftitle{margin-bottom:12px!important}
}
@media(max-width:600px){
  .hff-flogo{height:30px}
  .hff-fbottom{margin-top:24px;padding-top:16px}
}

/* ------------------------------------------------------------
   LOGO SIZING
   The header grid column is sized by its content, while the global
   `img{max-width:100%}` sizes the image from its container - the two
   waited on each other and the logo collapsed to 0x0. Pinning the
   height (and lifting max-width) breaks the loop.
   ------------------------------------------------------------ */
.site-header .custom-logo,
.site-header .site-logo-img img{
  height:40px!important;width:auto!important;
  max-width:none!important;max-height:none!important;
  display:block!important;
}
.site-header .custom-logo-link{display:inline-block!important;line-height:0!important}
.site-header .site-branding,
.site-header .ast-site-identity{flex:0 0 auto!important;padding:0!important}
.ast-primary-header-bar .site-header-primary-section-center{min-width:190px}

@media(max-width:921px){
  .site-header .custom-logo,
  .site-header .site-logo-img img{height:32px!important}
  .ast-primary-header-bar .site-header-primary-section-center{min-width:150px}
}

/* header tools sat at 80px tall and stretched the bar; align them to the row */
.ast-primary-header-bar .ast-header-woo-cart,
.ast-primary-header-bar .ast-site-header-cart,
.ast-primary-header-bar .ast-header-search,
.ast-primary-header-bar .ast-builder-layout-element{
  height:auto!important;min-height:0!important;align-items:center!important;
}
.ast-primary-header-bar .ast-site-header-cart .ast-cart-menu-wrap{position:relative}
.ast-primary-header-bar .ast-header-search .ast-search-menu-icon{
  height:auto!important;line-height:1!important;
}

/* ============================================================
   VARIATION PICKERS  (CartFlows Variation Swatches / cfvsw)
   The plugin replaces WooCommerce's native <select> with swatch
   buttons and hides the select via `.cfvsw-hidden-select{display:none
   !important}`. The select stays in the DOM and still drives the
   form, so reversing the two is safe - verified: changing the select
   resolves a real variation id and leaves Add to Cart enabled.
   ============================================================ */

/* 1. Archives: five plug buttons per card ate ~115px of every tile.
      The card already links through to the product page to choose. */
.woocommerce ul.products li.product .cfvsw_variations_form,
.woocommerce ul.products li.product .cfvsw-shop-variations,
.woocommerce ul.products li.product .cfvsw-swatches-container{
  display:none!important;
}

/* 2. Single product: swatches out, native dropdowns in */
.woocommerce div.product form.cart .cfvsw-swatches-container{display:none!important}
.woocommerce div.product form.cart .cfvsw-hidden-select{display:block!important}
.woocommerce div.product form.cart .cfvsw-hidden-select select,
.woocommerce div.product form.cart .variations select{
  display:block!important;width:100%!important;height:auto!important;
  padding:11px 34px 11px 13px!important;
  border:1px solid var(--hff-border)!important;border-radius:6px!important;
  background-color:#fff!important;color:var(--hff-text)!important;
  font-family:var(--hff-sans)!important;font-size:14px!important;line-height:1.4!important;
  appearance:auto!important;-webkit-appearance:menulist!important;
}
.woocommerce div.product form.cart .variations select:focus{
  border-color:var(--hff-accent)!important;
  outline:2px solid var(--hff-accent-wash)!important;outline-offset:1px;
}
.woocommerce div.product form.cart .variations{width:100%;margin-bottom:6px}
.woocommerce div.product form.cart .variations tr{display:block;margin-bottom:14px}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{display:block;padding:0!important;border:0!important}
.woocommerce div.product form.cart .variations .label label{
  display:block;margin:0 0 7px;font-size:13px!important;font-weight:600!important;
  color:var(--hff-text)!important;
}
.woocommerce div.product form.cart .reset_variations{
  font-size:12.5px;color:var(--hff-text2)!important;display:inline-block;margin-top:2px;
}

/* mobile: 16px on the control stops iOS zooming the page on focus */
@media(max-width:921px){
  .woocommerce div.product form.cart .cfvsw-hidden-select select,
  .woocommerce div.product form.cart .variations select{
    font-size:16px!important;padding:12px 34px 12px 13px!important;
  }
  .woocommerce div.product form.cart .variations tr{margin-bottom:12px}
}

/* WooCommerce's zoom overlay stays in the DOM at full image width on touch
   devices, where there is no hover to trigger it. Retire it on mobile. */
@media(max-width:921px){
  .woocommerce div.product .woocommerce-product-gallery img.zoomImg{display:none!important}
  .woocommerce div.product .woocommerce-product-gallery{overflow:hidden}
}

/* ============================================================
   PRODUCT DESCRIPTION LAYOUT
   Markup is now clean: <h2><strong>Title</strong></h2>, spec pairs as
   <li><strong>Label</strong>Value</li>, prose in <p>, photos in <p><img>.
   Wording is untouched - this is layout only.
   ============================================================ */
.woocommerce-Tabs-panel,
.woocommerce-Tabs-panel--description{
  font-family:var(--hff-sans);color:var(--hff-text2);
  padding-top:26px!important;
}

/* section headings: were 40px/800 and swamped the paragraph beneath */
.woocommerce-Tabs-panel h2{
  font-size:19px!important;font-weight:600!important;
  line-height:1.35!important;letter-spacing:-.015em!important;
  color:var(--hff-text)!important;
  margin:34px 0 14px!important;padding-bottom:9px!important;
  border-bottom:1px solid var(--hff-border);
}
.woocommerce-Tabs-panel h2:first-child{margin-top:0!important}
.woocommerce-Tabs-panel h2 strong{font-weight:600!important}
.woocommerce-Tabs-panel h3{
  font-size:15.5px!important;font-weight:600!important;
  color:var(--hff-text)!important;margin:24px 0 9px!important;
}

/* body copy: full contrast, comfortable measure */
.woocommerce-Tabs-panel p{
  font-size:14px!important;line-height:1.75!important;
  color:var(--hff-text2)!important;max-width:64ch;
  margin:0 0 13px!important;
}
.woocommerce-Tabs-panel p strong{color:var(--hff-text)!important;font-weight:600!important}

/* spec list -> aligned two-column card.
   padding-left + negative text-indent gives a hanging indent, so a value that
   wraps stays in the value column instead of running back under the label. */
.woocommerce-Tabs-panel > ul,
.woocommerce-Tabs-panel--description > ul{
  list-style:none!important;margin:0 0 22px!important;padding:0!important;
  border:1px solid var(--hff-border);border-radius:8px;overflow:hidden;
  background:var(--hff-surface);
}
.woocommerce-Tabs-panel > ul > li{
  display:block;font-size:13.5px;line-height:1.6;color:var(--hff-text2);
  padding:11px 16px 11px calc(16px + 190px);text-indent:-190px;
  border-bottom:1px solid var(--hff-border);margin:0!important;
}
.woocommerce-Tabs-panel > ul > li:nth-child(odd){background:var(--hff-bg)}
.woocommerce-Tabs-panel > ul > li:last-child{border-bottom:0}
.woocommerce-Tabs-panel > ul > li > strong:first-child{
  display:inline-block;width:176px;margin-right:14px;text-indent:0;
  color:var(--hff-text);font-weight:600;font-size:12.5px;
  vertical-align:top;
}

/* nested sub-lists (conductor / shielding composition) sit inside a row */
.woocommerce-Tabs-panel > ul > li > ul{
  list-style:disc!important;margin:9px 0 2px!important;
  padding-left:20px!important;text-indent:0;border:0;background:none;
}
.woocommerce-Tabs-panel > ul > li > ul > li{
  font-size:13px;color:var(--hff-text2);padding:0!important;
  text-indent:0;border:0;margin:0 0 5px!important;background:none!important;
}

/* inline photography: contained, framed, breathing */
.woocommerce-Tabs-panel img{
  display:block;max-width:100%;height:auto;
  border:1px solid var(--hff-border);border-radius:8px;
  margin:20px 0 6px;background:#fff;
}
.woocommerce-Tabs-panel p:has(> img){max-width:none}

/* tab bar */
.woocommerce div.product .woocommerce-tabs ul.tabs{
  padding:0!important;margin:0 0 4px!important;border-bottom:1px solid var(--hff-border)!important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none!important;border:0!important;border-radius:0!important;
  margin:0 4px 0 0!important;padding:0!important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;padding:11px 15px!important;font-size:13.5px!important;
  color:var(--hff-text2)!important;font-weight:500!important;
  border-bottom:2px solid transparent!important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--hff-text)!important;font-weight:600!important;
  border-bottom-color:var(--hff-accent)!important;
}

/* ---- mobile: the label column has no room, so stack it ---- */
@media(max-width:768px){
  .woocommerce-Tabs-panel h2{font-size:17px!important;margin:26px 0 12px!important}
  .woocommerce-Tabs-panel h3{font-size:14.5px!important}
  .woocommerce-Tabs-panel p{font-size:14px!important;line-height:1.7!important;max-width:none}
  .woocommerce-Tabs-panel > ul > li{
    padding:11px 14px!important;text-indent:0!important;
  }
  .woocommerce-Tabs-panel > ul > li > strong:first-child{
    display:block;width:auto;margin:0 0 3px;
    font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
    color:var(--hff-muted);
  }
  .woocommerce-Tabs-panel > ul > li > ul{padding-left:17px!important}
  .woocommerce-Tabs-panel img{margin:16px 0 4px;border-radius:6px}
  .woocommerce div.product .woocommerce-tabs ul.tabs{
    display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none}
  .woocommerce div.product .woocommerce-tabs ul.tabs li{flex:0 0 auto}
  .woocommerce div.product .woocommerce-tabs ul.tabs li a{
    padding:10px 13px!important;font-size:13px!important;white-space:nowrap;
  }
}



/* ============================================================
   POLICY PAGES (.hfp)
   Lived inline on each policy page until two of them lost their
   <style> wrapper on a re-save and rendered the CSS as body text.
   Served from <head> now, so no page can shed it again.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

.hfp{
  --bg:#FAFAF9;--surface:#FFFFFF;--surface-alt:#F1F3F5;
  --text:#16181C;--text2:#5B6169;--muted:#9AA0A8;--border:#E4E6E9;
  --accent:#1C5FA8;--accent-dark:#123F70;--accent-bg:#EAF2FB;
  --warn-bg:#FFF7E8;--warn-border:#F0D9A8;--warn-text:#7A5A16;
  --dark:#12151A;--radius:8px;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  font-family:var(--sans);color:var(--text);line-height:1.7;font-size:16px;
  -webkit-font-smoothing:antialiased;
  /* Astra's .entry-content[data-ast-blocks-layout] > * forces its 1200px content
     width onto us; !important restores a readable measure for long-form text */
  max-width:820px!important;width:auto!important;margin:0 auto!important;padding:8px 0 56px;
}
.hfp *{box-sizing:border-box}
.hfp h1,.hfp h2,.hfp h3,.hfp h4{font-family:var(--sans)!important;color:var(--text);letter-spacing:-.02em;font-weight:600}
.hfp a{color:var(--accent)!important;text-decoration:none!important}
.hfp a:hover{text-decoration:underline!important}
.hfp p{margin:0 0 16px}
.hfp ul,.hfp ol{margin:0 0 18px;padding-left:22px}
.hfp li{margin-bottom:9px}
.hfp strong{font-weight:600;color:var(--text)}

/* page head */
.hfp-head{border-bottom:1px solid var(--border);padding-bottom:24px;margin-bottom:32px}
.hfp-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.hfp-head h1{font-size:36px;line-height:1.2;margin:0 0 14px}
.hfp-intro{font-size:17px;color:var(--text2);margin:0}
.hfp-updated{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:16px}

/* sections */
.hfp-sec{margin-bottom:38px;scroll-margin-top:90px}
.hfp-sec h2{font-size:21px;margin:0 0 14px;padding-top:4px}
.hfp-sec h3{font-size:16px;margin:24px 0 10px;color:var(--text)}

/* table of contents */
.hfp-toc{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin-bottom:40px}
.hfp-toc h2{font-family:var(--mono)!important;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text2);margin:0 0 12px;font-weight:500}
.hfp-toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
.hfp-toc li{margin-bottom:7px;font-size:14px;break-inside:avoid}

/* callouts */
.hfp-note{background:var(--accent-bg);border:1px solid #D3E4F5;border-left:3px solid var(--accent);border-radius:6px;padding:16px 20px;margin:0 0 20px;font-size:14.5px}
.hfp-note p:last-child{margin-bottom:0}
.hfp-warn{background:var(--warn-bg);border:1px solid var(--warn-border);border-left:3px solid #D8A93C;border-radius:6px;padding:16px 20px;margin:0 0 20px;font-size:14.5px;color:var(--warn-text)}
.hfp-warn strong{color:var(--warn-text)}
.hfp-warn p:last-child{margin-bottom:0}

/* tables */
.hfp-tablewrap{overflow-x:auto;margin:0 0 20px;-webkit-overflow-scrolling:touch}
.hfp table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font-size:14px}
.hfp th,.hfp td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.hfp th{background:var(--surface-alt);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);font-weight:600;white-space:nowrap}
.hfp tbody tr:last-child td{border-bottom:none}

/* stat strip */
.hfp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:0 0 32px}
.hfp-stat{background:var(--surface);padding:20px 18px;text-align:center}
.hfp-stat b{display:block;font-family:var(--mono);font-size:21px;color:var(--accent-dark);font-weight:600;line-height:1.2}
.hfp-stat span{display:block;font-size:12px;color:var(--text2);margin-top:5px;line-height:1.45}

/* two-column cards */
.hfp-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 24px}
.hfp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.hfp-card h3{margin:0 0 12px;font-size:15px}
.hfp-card ul{margin:0;padding-left:18px}
.hfp-card li{font-size:14px;color:var(--text2)}

/* FAQ accordion */
.hfp-q{border-bottom:1px solid var(--border)}
.hfp-q summary{cursor:pointer;padding:18px 34px 18px 0;font-size:15.5px;font-weight:600;position:relative;list-style:none}
.hfp-q summary::-webkit-details-marker{display:none}
.hfp-q summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:20px;color:var(--accent);font-weight:400;line-height:1}
.hfp-q[open] summary::after{content:"\2212"}
.hfp-q .hfp-a{padding:0 0 20px;color:var(--text2);font-size:14.5px}
.hfp-q .hfp-a p:last-child,.hfp-q .hfp-a ul:last-child{margin-bottom:0}

/* contact block */
.hfp-contact{background:var(--dark);color:#EDEFF1;border-radius:var(--radius);padding:30px 32px;margin-top:44px}
.hfp-contact h2{color:#fff!important;font-size:19px;margin:0 0 10px}
.hfp-contact p{color:#B7BCC3;font-size:14.5px;margin:0 0 18px}
.hfp-contact a{color:#8FC1F0!important}
.hfp-cbtn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff!important;padding:11px 20px;border-radius:6px;font-size:14px;font-weight:500;text-decoration:none!important}
.hfp-cbtn:hover{background:#2a72c0;text-decoration:none!important}
.hfp-meta{margin-top:20px;padding-top:18px;border-top:1px solid #2B303A;font-family:var(--mono);font-size:12px;color:#8D949D;line-height:1.9}

@media(max-width:780px){
  .hfp{font-size:15.5px}
  .hfp-head h1{font-size:27px}
  .hfp-intro{font-size:15.5px}
  .hfp-sec h2{font-size:19px}
  .hfp-toc ol{columns:1}
  .hfp-stats{grid-template-columns:repeat(2,1fr)}
  .hfp-cards{grid-template-columns:1fr}
  .hfp-contact{padding:24px 20px}
  .hfp table{min-width:520px}
}



/* ============================================================
   HOMEPAGE (.hff-home)
   Was inline on the page until a re-save stripped its <style>
   wrapper and dumped the CSS into the body as text. Served from
   <head> now, where no content sanitiser can reach it.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Astra theme overrides: full-bleed page ---------- */
/* the theme header/footer now carry the shared menu and global styling, so the
   homepage uses them like every other page - only the content width is reset */
body.home .site-content .ast-container,body.home #primary,body.home .entry-content,body.home .hff-home{max-width:none!important;width:100%!important;padding:0!important;margin:0!important}
body.home .entry-header{display:none!important}
body.home{overflow-x:hidden!important}

/* ---------- Root ---------- */
.hff-home{
  --bg:#FAFAF9;--surface:#FFFFFF;--surface-alt:#F1F3F5;
  --text:#16181C;--text2:#5B6169;--muted:#9AA0A8;--border:#E4E6E9;
  --accent:#1C5FA8;--accent-dark:#123F70;--accent-bg:#EAF2FB;
  --dark:#12151A;--dark-text:#EDEFF1;--radius:8px;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  max-width:none!important;width:100%!important;margin:0!important;
  overflow-x:hidden;
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.hff-home *{box-sizing:border-box}
.hff-home img{display:block;width:100%;max-width:100%;height:auto}
/* beat Astra's .entry-content a underline */
.hff-home a{color:inherit!important;text-decoration:none!important;box-shadow:none!important}
.hff-home a:hover{text-decoration:none!important}
/* beat Astra's serif heading font */
.hff-home h1,.hff-home h2,.hff-home h3,.hff-home h4{
  font-family:var(--sans)!important;font-weight:600;letter-spacing:-.02em;margin:0;color:var(--text)
}
.hff-home p{margin:0}
.hff-home ul{margin:0;padding:0}

.hff-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.hff-mono{font-family:var(--mono)}
.hff-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;line-height:1.4}
.hff-ph{
  background:repeating-linear-gradient(135deg,var(--surface-alt),var(--surface-alt) 10px,#E9EBEE 10px,#E9EBEE 20px);
  border:1px solid var(--border);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:12px;text-align:center;padding:10px;line-height:1.45
}
.hff-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:6px;font-size:14px;font-weight:500;border:1px solid transparent;cursor:pointer;line-height:1.3}
.hff-btn-primary{background:var(--accent);color:#fff!important}
.hff-btn-primary:hover{background:var(--accent-dark)}
.hff-btn-outline{border-color:var(--border);color:var(--text)!important;background:var(--surface)}
.hff-chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11.5px;background:var(--accent-bg);color:var(--accent-dark);padding:5px 10px;border-radius:20px;border:1px solid #D3E4F5;line-height:1.4}
.hff-section{padding:72px 0}
.hff-alt{background:var(--surface-alt)}
.hff-section-head{max-width:640px;margin-bottom:40px}
.hff-section-head h2{font-size:26px;line-height:1.3;margin-bottom:10px}
.hff-section-head p{color:var(--text2);font-size:15px}

/* ---------- Hero ---------- */
.hff-hero{padding:80px 0 64px}
.hff-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hff-hero h1{font-size:44px;line-height:1.18;margin-bottom:18px}
.hff-lead{font-size:16px;color:var(--text2);max-width:460px;margin-bottom:28px}
.hff-hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.hff-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hff-hero-visual{aspect-ratio:1/1;max-height:430px}
.hff-hero-visual .hff-ph{height:100%}

/* ---------- Stats ---------- */
.hff-stats{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.hff-stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.hff-stat{padding:28px 32px;border-left:1px solid var(--border)}
.hff-stat:first-child{border-left:none}
.hff-stat-num{font-family:var(--mono);font-size:24px;font-weight:500;color:var(--accent-dark);line-height:1.2}
.hff-stat-label{font-size:12.5px;color:var(--text2);margin-top:6px;line-height:1.45}

/* ---------- Use cases ---------- */
.hff-usecases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hff-usecase-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;transition:border-color .15s,transform .15s}
.hff-usecase-card:hover{border-color:#B8CCE0;transform:translateY(-2px)}
a.hff-usecase-card{display:block;color:inherit}
a.hff-tab{text-decoration:none}
a.hff-tab:hover{border-color:#B8CCE0}
/* Real product imagery.
   Source photos are square with the cable centred; `cover` on a 16/10 box cropped
   the ends off, so these use `contain` on a square box - the whole cable shows. */
.hff-catimg{aspect-ratio:1/1;object-fit:contain;border-radius:7px;margin-bottom:16px;background:#fff;border:1px solid var(--border);padding:8px}
.hff-prodimg{aspect-ratio:1/1;object-fit:contain;border-bottom:1px solid var(--border);background:#fff;padding:10px}
a.hff-product-card{display:block;color:inherit;transition:border-color .15s,transform .15s}
a.hff-product-card:hover{border-color:#B8CCE0;transform:translateY(-2px)}
.hff-hero-visual img{width:100%;height:100%;object-fit:contain;background:#fff;padding:14px;border-radius:12px;border:1px solid var(--border);background:var(--surface)}
.hff-gallery-grid a{display:block;border-radius:6px;overflow:hidden;border:1px solid var(--border);background:var(--surface-alt)}
.hff-gallery-grid img{aspect-ratio:1/1;object-fit:cover;transition:transform .2s}
.hff-gallery-grid a:hover img{transform:scale(1.05)}
.hff-usecase-card .hff-ph{aspect-ratio:16/10;margin-bottom:16px}
.hff-usecase-card h3{font-size:15px;line-height:1.35;margin-bottom:6px}
.hff-usecase-card p{font-size:13px;color:var(--text2);margin-bottom:14px;line-height:1.5}
.hff-link{font-size:13px;color:var(--accent);font-weight:500}

/* ---------- Products ---------- */
.hff-tabs{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.hff-tab{font-size:13px;padding:8px 16px;border-radius:20px;border:1px solid var(--border);color:var(--text2);background:var(--surface);white-space:nowrap}
.hff-tab.hff-active{background:var(--dark);color:#fff;border-color:var(--dark)}
.hff-products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hff-product-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.hff-product-card .hff-ph{aspect-ratio:1/1;border-radius:0;border:none;border-bottom:1px solid var(--border)}
.hff-product-info{padding:14px 16px}
.hff-product-name{font-size:13.5px;font-weight:500;margin-bottom:5px;line-height:1.4}
.hff-product-spec{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:8px;line-height:1.4}
.hff-product-price{font-family:var(--mono);font-size:14px;font-weight:500}

/* ---------- Materials table ---------- */
.hff-table-scroll{width:100%;max-width:100%}
.hff-material-table{width:100%;max-width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font-size:13.5px}
.hff-material-table th,.hff-material-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.hff-material-table th{background:var(--surface-alt);font-weight:500;color:var(--text2);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.hff-material-table tbody tr:last-child td{border-bottom:none}
.hff-material-table td.hff-mono{font-size:12.5px;color:var(--text2)}

/* ---------- detail carousel ---------- */
.hff-carousel{position:relative;display:flex;align-items:center;gap:10px}
/* Flex with a PIXEL basis. Both grid-auto-columns: % and lex-basis: % leave
   the container unscrollable here (scrollLeft snaps straight back to 0) - a fixed
   px basis is the only variant that actually scrolls. */
.hff-ctrack{
  display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 0;flex:1;min-width:0;
  scrollbar-width:thin;scrollbar-color:#C9CFD6 transparent;
}
.hff-cslide{flex:0 0 230px}
.hff-ctrack::-webkit-scrollbar{height:6px}
.hff-ctrack::-webkit-scrollbar-thumb{background:#C9CFD6;border-radius:3px}
.hff-ctrack::-webkit-scrollbar-track{background:transparent}
.hff-ctrack:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hff-cslide{
  margin:0;scroll-snap-align:start;background:#fff;
  border:1px solid var(--border);border-radius:8px;overflow:hidden;
}
.hff-cslide img{aspect-ratio:1/1;object-fit:contain;padding:10px;display:block;width:100%}
.hff-cbtn{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--border);background:#fff;color:var(--text);
  font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,background .15s;
}
.hff-cbtn:hover{border-color:#B8CCE0;background:var(--accent-bg);color:var(--accent-dark)}
.hff-cbtn[disabled]{opacity:.35;cursor:default}
.hff-cnote{margin-top:20px;font-size:13.5px;color:var(--text2)}
.hff-cnote a{color:var(--accent)!important;font-weight:500}
/* ---------- Steps ---------- */
.hff-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hff-step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.hff-step-num{font-family:var(--mono);color:var(--accent);font-size:13px;margin-bottom:10px}
.hff-step h3{font-size:16px;margin-bottom:8px;line-height:1.35}
.hff-step p{font-size:13.5px;color:var(--text2);line-height:1.55}
.hff-step-select{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.hff-fake-select{border:1px solid var(--border);border-radius:6px;padding:9px 12px;font-size:12.5px;color:var(--text2);background:#FAFBFC;display:flex;justify-content:space-between;gap:10px}

/* ---------- Gallery ---------- */
.hff-gallery-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.hff-gallery-grid .hff-ph{aspect-ratio:1/1;font-size:10px}

/* ---------- Honest ---------- */
.hff-honest-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.hff-honest-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.hff-honest-card.hff-does{border-left:3px solid var(--accent)}
.hff-honest-card.hff-cant{border-left:3px solid var(--muted)}
.hff-honest-card h3{font-size:15px;margin-bottom:14px}
.hff-honest-card ul{list-style:none;font-size:13.5px;color:var(--text2);display:flex;flex-direction:column;gap:10px}
.hff-honest-card li{padding-left:18px;position:relative;line-height:1.55}
.hff-honest-card li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hff-honest-card.hff-cant li::before{background:var(--muted)}

/* ---------- Story ---------- */
.hff-story{background:var(--dark);color:var(--dark-text);padding:72px 0}
.hff-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hff-story .hff-eyebrow{color:#8FC1F0}
.hff-story h2{font-size:28px;line-height:1.3;margin-bottom:16px;color:#fff!important}
.hff-story p{color:#B7BCC3;font-size:14.5px;margin-bottom:14px;line-height:1.65}
.hff-story-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hff-story-photos .hff-ph{aspect-ratio:1/1.1;background:repeating-linear-gradient(135deg,#1D2129,#1D2129 10px,#242833 10px,#242833 20px);border-color:#2B303A;color:#7E8995}
/* workshop process photos */
.hff-craft{margin:0;border:1px solid #2B303A;border-radius:8px;overflow:hidden;background:#1A1F27}
.hff-craft img{aspect-ratio:4/5;object-fit:cover;display:block;width:100%}
.hff-craft figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#B7BCC3;padding:11px 12px;display:flex;align-items:center;gap:8px;border-top:1px solid #2B303A}
.hff-craft-num{color:#8FC1F0}
/* materials guide */
.hff-matgrid{display:grid;grid-template-columns:1fr 520px;gap:44px;align-items:center}
.hff-matcopy p{font-size:15px;color:var(--text2);margin-bottom:16px;line-height:1.7}
.hff-matlinks{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.hff-matlinks a{font-size:13.5px;color:var(--accent)!important;font-weight:500}
.hff-matlinks a:hover{color:var(--accent-dark)!important}
.hff-matfig{margin:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#12151A}
.hff-matfig img{display:block;width:100%;height:auto}

/* ---------- FAQ ---------- */
.hff-faq{max-width:780px}
.hff-faq-item{border-bottom:1px solid var(--border);padding:18px 0}
.hff-faq-q{font-size:14.5px;font-weight:600;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;line-height:1.45}
.hff-faq-a{font-size:13.5px;color:var(--text2);margin-top:10px;line-height:1.6}

/* ---------- Newsletter ---------- */
.hff-newsletter{background:var(--accent-bg);border:1px solid #D3E4F5;border-radius:12px;padding:40px 48px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.hff-newsletter h3{font-size:19px;margin-bottom:6px}
.hff-newsletter p{font-size:13.5px;color:var(--text2);line-height:1.55}
.hff-newsletter form{display:flex;gap:10px;flex-wrap:wrap}
.hff-newsletter input{border:1px solid var(--border);border-radius:6px;padding:11px 14px;font-size:14px;width:230px;max-width:100%;font-family:var(--sans);background:#fff}

/* ---------- Preview note ---------- */
.hff-tag-note{position:fixed;bottom:18px;right:18px;background:var(--dark);color:#fff;font-size:11.5px;padding:10px 16px;border-radius:6px;opacity:.9;font-family:var(--mono);max-width:250px;line-height:1.5;z-index:999}

/* ================= RESPONSIVE ================= */

/* Tablet */
@media(max-width:1080px){
  .hff-navlinks{gap:18px;font-size:13px}
  .hff-hero h1{font-size:38px}
  .hff-usecases-grid,.hff-products-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:900px){
  .hff-wrap{padding:0 24px}
  .hff-section,.hff-story{padding:56px 0}
  .hff-section-head{margin-bottom:32px}
  .hff-hero{padding:56px 0 48px}
  .hff-hero-grid,.hff-story-grid,.hff-honest-grid{grid-template-columns:1fr;gap:36px}
  .hff-hero h1{font-size:34px}
  .hff-lead{max-width:none}
  .hff-hero-visual{aspect-ratio:16/9;min-height:200px}
  .hff-stats-grid{grid-template-columns:repeat(2,1fr)}
  .hff-stat{border-left:1px solid var(--border);border-top:1px solid var(--border);padding:22px 24px}
  .hff-stat:nth-child(2n+1){border-left:none}
  .hff-stat:nth-child(-n+2){border-top:none}
  .hff-steps{grid-template-columns:1fr}
  .hff-footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .hff-gallery-grid{grid-template-columns:repeat(3,1fr)}
  .hff-ctrack{gap:12px}
  .hff-cslide{flex:0 0 200px}
  /* nav collapses to two rows, links stay visible & centered */
  .hff-nav{flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
  .hff-navlinks{order:3;width:100%;justify-content:flex-start;gap:14px 18px;font-size:12.5px;padding-top:12px;border-top:1px solid var(--border)}
}

/* Mobile */
@media(max-width:640px){
  .hff-wrap{padding:0 20px}
  .hff-section,.hff-story{padding:44px 0}
  .hff-section-head{margin-bottom:26px}
  .hff-section-head h2{font-size:22px}
  .hff-section-head p{font-size:14px}
  .hff-eyebrow{font-size:11px;margin-bottom:10px}

  .hff-topbar{font-size:11.5px;padding:8px 16px}
  .hff-logo img{height:30px;max-width:160px}
  .hff-footer .hff-logo img{height:30px}

  .hff-hero{padding:40px 0 40px}
  .hff-hero h1{font-size:28px;line-height:1.25;margin-bottom:14px}
  .hff-lead{font-size:15px;margin-bottom:22px}
  .hff-hero-chips{margin-bottom:24px;gap:6px}
  .hff-chip{font-size:11px;padding:4px 9px}
  .hff-hero-actions{gap:10px}
  .hff-hero-actions .hff-btn{flex:1 1 100%}
  .hff-hero-visual{aspect-ratio:4/3;min-height:190px}

  /* stats: 2x2, tighter */
  .hff-stat{padding:18px 16px}
  .hff-stat-num{font-size:20px}
  .hff-stat-label{font-size:11.5px}

  /* use cases: single column, short banner image */
  .hff-usecases-grid{grid-template-columns:1fr;gap:12px}
  .hff-usecase-card{padding:18px}
  .hff-usecase-card .hff-ph{aspect-ratio:16/6;margin-bottom:14px}

  /* products: 2 up, tighter type */
  .hff-products-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .hff-product-info{padding:12px}
  .hff-product-name{font-size:12.5px}
  .hff-product-spec{font-size:10px}
  .hff-product-price{font-size:13px}
  .hff-tabs{gap:6px;margin-bottom:22px}
  .hff-tab{font-size:12px;padding:7px 13px}

  /* MATERIALS TABLE -> stacked cards (kills horizontal scroll) */
  .hff-material-table{border:none;background:transparent}
  .hff-material-table thead{display:none}
  .hff-material-table,.hff-material-table tbody,.hff-material-table tr,.hff-material-table td{display:block;width:100%}
  .hff-material-table tbody tr{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px}
  .hff-material-table tbody tr:last-child{margin-bottom:0}
  .hff-material-table td{border:none!important;padding:6px 0;display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:13px;text-align:right}
  .hff-material-table td::before{content:attr(data-label);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:left;flex:0 0 auto;padding-top:2px}
  .hff-material-table td:first-child{padding-top:0;font-weight:600;font-size:14px}
  .hff-material-table td:last-child{padding-bottom:0}

  /* steps */
  .hff-step{padding:20px}
  .hff-step h3{font-size:15px}

  /* gallery */
  .hff-gallery-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .hff-story-photos{gap:8px}
  .hff-craft img{aspect-ratio:3/4}
  .hff-craft figcaption{font-size:9.5px;padding:8px 7px;gap:5px;letter-spacing:.03em}
  .hff-ctrack{gap:12px}
  .hff-cslide{flex:0 0 150px}
  .hff-cbtn{width:32px;height:32px;font-size:17px}
  .hff-cnote{font-size:13px}
  .hff-gallery-grid .hff-ph{font-size:9px;padding:4px}

  /* honest */
  .hff-honest-grid{gap:12px}
  .hff-honest-card{padding:20px}

  /* story */
  .hff-story h2{font-size:23px}
  .hff-story p{font-size:14px}
  .hff-story-photos{gap:8px}

  /* faq */
  .hff-faq-item{padding:16px 0}
  .hff-faq-q{font-size:14px}

  /* newsletter: full-width stacked form */
  .hff-newsletter{padding:26px 20px;flex-direction:column;align-items:stretch;gap:20px;border-radius:10px}
  .hff-newsletter h3{font-size:17px}
  .hff-newsletter form{flex-direction:column;width:100%;gap:10px}
  .hff-newsletter input{width:100%}
  .hff-newsletter .hff-btn{width:100%}

  /* footer */
  .hff-footer{padding:40px 0 24px}
  .hff-footer-grid{grid-template-columns:1fr 1fr;gap:24px 20px;margin-bottom:28px}
  .hff-footer-col:first-child{grid-column:1/-1}
  .hff-footer-note{max-width:none}
  .hff-footer-bottom{flex-direction:column;gap:8px;font-size:12px}

  /* preview note would cover content on small screens */
  .hff-tag-note{display:none}
}

@media(max-width:380px){
  .hff-wrap{padding:0 16px}
  .hff-hero h1{font-size:25px}
  .hff-products-grid{grid-template-columns:1fr}
  .hff-navlinks{font-size:12px;gap:12px 14px}
}

/* ============================================================
   CATEGORY PILLS - active label
   The blanket .hff-home a{color:inherit!important} further up also
   caught the selected pill, leaving black text on the near-black
   --dark fill. !important there outranks .hff-tab.hff-active{color:#fff}
   whatever its specificity, so the label needs matching weight.
   ============================================================ */
.hff-home a.hff-tab.hff-active{color:#fff!important}
.hff-products-grid[aria-busy="true"]{opacity:.45;transition:opacity .12s ease}

/* ============================================================
   GTRANSLATE SWITCHER PLACEMENT
   The plugin renders three copies and none land usefully: two in
   menu <li>s whose only child is position:absolute (the li goes to
   0 wide, the switcher ends up off-screen at x~2030), and one
   position:fixed bottom-left, sitting on the Joinchat button.
   The script keeps one and parks it here; these rules give the two
   slots their layout and hide the copies we do not use.
   ============================================================ */
.hff-gt-slot{display:flex;align-items:center}
#hff-gt-desktop{margin-right:14px}
#hff-gt-mobile{margin:0 0 12px}
.hff-gt-slot [id^="gtranslate_menu_wrapper"],
.hff-gt-slot .gt_switcher_wrapper{position:static!important;white-space:nowrap}
.hff-gt-hidden{display:none!important}
li.menu-item-gtranslate.hff-gt-empty{display:none!important}

/* Astra injects a 26px arrow SVG at the start of EVERY menu link, including
   items with no submenu. Its own nav hides it with theme CSS; the Site Tools
   drawer does not, so a stray chevron sat before every label there. The drawer
   has its own .hff-mobile-submenu-toggle for items that really have children. */
.hff-mobile-nav-menu .ast-icon.icon-arrow{display:none!important}

/* ============================================================
   DISPLAY CURRENCY SWITCHER
   Sits beside the language switcher. The store charges in USD;
   this only rewrites the figures a visitor reads while browsing,
   so the choice lives in localStorage and never reaches the
   LiteSpeed cache key.
   ============================================================ */
.hff-cur-slot{display:flex;align-items:center;gap:8px}
#hff-cur-desktop{margin-right:14px}
#hff-cur-mobile{margin:0 0 12px;flex-wrap:wrap}
.hff-cur-select{
  height:24px;padding:0 22px 0 8px;margin:0;
  border:1px solid #ccc;border-radius:3px;background:#fff;
  color:#666;font-size:12px;line-height:1;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.4' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:9px
}
.hff-cur-select:focus-visible{outline:2px solid #1c65ad;outline-offset:1px}
.hff-cur-hint{font-size:11px;color:#6a7784;white-space:nowrap}
#hff-cur-desktop .hff-cur-hint{display:none}   /* the title attribute carries it on desktop */
#hff-cur-mobile{width:100%}
#hff-cur-mobile .hff-cur-select{height:34px;font-size:13px}
#hff-cur-mobile .hff-cur-hint{flex:1 0 100%;margin-top:2px}

/* approximate figures should not read as the amount being charged */
.woocommerce-Price-amount[data-hff-usd]:not([data-hff-usd="skip"]){cursor:help}

.hff-cur-notice{
  margin:0 0 18px;padding:12px 15px;
  border:1px solid #e3d295;border-left:3px solid #b8912a;border-radius:4px;
  background:#fdf8e8;color:#4a3c14;font-size:13.5px;line-height:1.6
}
@media (max-width:640px){ .hff-cur-notice{font-size:13px;padding:11px 13px} }

/* ============================================================
   SWITCHER PAIR - matched sizing
   The language control is built by GTranslate's CDN script and
   the currency one is ours, so left alone they disagree on width
   (163 vs 303) and height (24 vs 34). In the mobile drawer both
   are forced to the same full-width box at a 44px touch target;
   GTranslate's own 24px height was below the usual minimum.
   !important throughout because GTranslate styles its markup
   from its CDN sheet, which loads after this one.
   ============================================================ */

/* ---- mobile drawer: one shared box ---- */
#hff-gt-mobile,
#hff-cur-mobile{width:100%;margin:0 0 10px;display:block}
#hff-cur-mobile{margin-bottom:4px}

#hff-gt-mobile .gt_switcher,
#hff-gt-mobile .gt_switcher .gt_selected{width:100%!important;float:none!important;display:block!important}

#hff-gt-mobile .gt_switcher .gt_selected a,
#hff-cur-mobile .hff-cur-select{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  height:44px!important;
  margin:0!important;
  padding:0 34px 0 12px!important;
  border:1px solid #c3ccd4!important;
  border-radius:6px!important;
  background-color:#fff!important;
  color:#2b3540!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:42px!important;
  text-decoration:none!important
}
#hff-gt-mobile .gt_switcher .gt_selected a img{vertical-align:middle;margin:-2px 8px 0 0}
/* GTranslate draws its own caret; ours is a background image on the select */
#hff-cur-mobile .hff-cur-select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%232b3540' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 13px center!important;
  background-size:10px!important
}
/* the open language list lines up with the closed box */
#hff-gt-mobile .gt_switcher .gt_option{
  width:100%!important;box-sizing:border-box!important;
  border:1px solid #c3ccd4!important;border-radius:6px!important;margin-top:2px!important}
#hff-gt-mobile .gt_switcher .gt_option a{
  padding:0 12px!important;font-size:14px!important;line-height:34px!important;height:34px!important}

#hff-cur-mobile .hff-cur-hint{
  display:block;width:100%;margin:6px 0 0;font-size:12px;color:#6a7784}

/* ---- desktop header: compact, but still a matched pair ---- */
#hff-gt-desktop .gt_switcher .gt_selected a,
#hff-cur-desktop .hff-cur-select{
  box-sizing:border-box!important;
  height:28px!important;line-height:26px!important;
  padding:0 26px 0 9px!important;
  border:1px solid #c9d1d9!important;border-radius:5px!important;
  background-color:#fff!important;color:#3b4854!important;
  font-size:12.5px!important
}
#hff-cur-desktop .hff-cur-select{background-position:right 9px center!important;background-size:9px!important}
#hff-gt-desktop .gt_switcher .gt_selected a img{vertical-align:middle;margin:-2px 6px 0 0}

/* GTranslate draws its caret as a::after with position:absolute, but leaves the
   anchor itself static - so the caret anchored to some outer box and sat at the
   top of our taller control. Give it the anchor to position against and centre it. */
#hff-gt-mobile .gt_switcher .gt_selected a,
#hff-gt-desktop .gt_switcher .gt_selected a{position:relative!important}
#hff-gt-mobile .gt_switcher .gt_selected a::after{
  top:50%!important;right:12px!important;margin-top:-8px!important;left:auto!important}
#hff-gt-desktop .gt_switcher .gt_selected a::after{
  top:50%!important;right:8px!important;margin-top:-8px!important;left:auto!important}


/* ============================================================
   DESKTOP LANGUAGE CONTROL - width and dropdown behaviour
   Two problems the header showed once "Guides" was added:
   - GTranslate fixes .gt_switcher at 163px and the label spelled
     the language out in full, so the pair of controls ate ~300px
     of the header row and pushed the nav onto the logo. The
     script shortens the desktop label to the code the flag
     already carries (EN / JA / KO), so the box must size to its
     content instead.
   - GTranslate's dropdown is position:relative, so opening it
     expanded the header from 73px to 183px and shoved everything
     upward - the "popping up" behaviour. It floats now.
   ============================================================ */
#hff-gt-desktop .gt_switcher{position:relative!important;width:auto!important}
#hff-gt-desktop .gt_switcher .gt_selected{width:auto!important}
#hff-gt-desktop .gt_switcher .gt_selected a{width:auto!important;min-width:0!important;white-space:nowrap}
#hff-gt-desktop .gt_switcher .gt_option{
  position:absolute!important;top:100%!important;left:0!important;
  width:176px!important;z-index:99999!important;margin-top:3px!important;
  /* GTranslate animates the panel open by setting an inline height it measures
     from the element in flow. Absolutely positioned it measures 0 and the list
     stayed clipped to 2px with every language present but invisible. */
  height:auto!important;max-height:280px!important;overflow-y:auto!important;
  border:1px solid #c9d1d9!important;border-radius:5px!important;box-sizing:border-box!important}


/* ============================================================
   MOBILE SEARCH SUBMIT
   Astra styles bare <button> with padding:19px 32px. The Site
   Tools rule sets the height but not the padding, so the button
   grew to 64px in a 48px grid track - and its content box came
   out at exactly 0px wide, which squeezed the magnifier SVG to
   zero width. That is why the control rendered as a blank blue
   block that also hung off the right edge of the screen.
   ============================================================ */
.hff-mobile-search-panel button[type="submit"]{
  padding:0!important;width:auto!important;min-width:0!important;flex:none!important}
.hff-mobile-search-panel button[type="submit"] svg{
  width:22px!important;height:22px!important;flex:none!important}

/* GTranslate ships .gt_switcher with overflow:hidden. That is fine while its
   dropdown is position:relative and grows the box, but ours is absolute, so the
   28px-tall switcher was clipping the whole 200px list - it was laid out, sized
   and populated, just cut off and not hit-testable. The slot also needs its own
   stacking context so the list paints above the header row. */
#hff-gt-desktop .gt_switcher{overflow:visible!important}
#hff-gt-desktop{position:relative!important;z-index:100000!important}

/* ============================================================
   GUIDES INDEX (/guides/)
   The page was one flat stack in which the H2s rendered larger
   than the H1, the body text was tiny beside them, and the three
   guide links - the only reason the page exists - sat as small
   bullets. Same words, regrouped: the three parallel sections
   become cards, the selection order becomes a numbered flow, and
   the closing paragraph becomes a call to action.
   ============================================================ */
.hfg{max-width:1120px;margin:0 auto;padding:0 4px 8px}

/* the theme title-cases headings, which was rewriting the copy on
   screen - "Start with device compatibility" was showing as
   "Start With Device Compatibility" */
.hfg h2{text-transform:none!important;letter-spacing:-.01em}

.hfg-lede{
  max-width:70ch;margin:0 0 40px;
  font-size:18px;line-height:1.72;color:#3d4954}

/* ---- the three guide cards ---- */
.hfg-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:52px}
.hfg-card{
  display:flex;flex-direction:column;
  padding:24px 24px 4px;
  border:1px solid #e1e7ed;border-radius:10px;background:#fff;
  box-shadow:0 1px 2px rgba(20,25,31,.04),0 6px 18px rgba(20,25,31,.045)}
.hfg-card h2{
  margin:0 0 12px!important;
  font-size:19px!important;line-height:1.35!important;font-weight:700;color:#14191f}
.hfg-card > p{
  margin:0 0 20px;flex:1 1 auto;
  font-size:14.5px;line-height:1.68;color:#525e6b}
.hfg-card ul{
  margin:0;padding:18px 0 20px;list-style:none;border-top:1px solid #eef1f4}
.hfg-card li{
  margin:0;padding:0;font-size:13.5px;line-height:1.6;color:#6a7784}
.hfg-card li a{
  display:block;margin-bottom:5px;
  font-size:15px;line-height:1.4;font-weight:650;color:#1c65ad;text-decoration:none!important}
.hfg-card li a:hover{text-decoration:underline}

/* ---- the selection order: a real sequence, so it gets numbers ---- */
.hfg-steps{
  margin:0 0 48px;padding:30px 32px 34px;
  border:1px solid #e1e7ed;border-radius:10px;background:#f7f9fb}
.hfg-steps h2{
  margin:0 0 22px!important;font-size:21px!important;font-weight:700;color:#14191f}
.hfg-steps ol{
  margin:0;padding:0;list-style:none;counter-reset:hfg}
.hfg-steps li{
  position:relative;margin:0 0 15px;padding-left:46px;
  font-size:15px;line-height:1.66;color:#3d4954}
.hfg-steps li:last-child{margin-bottom:0}
.hfg-steps li::before{
  counter-increment:hfg;content:counter(hfg);
  position:absolute;left:0;top:1px;
  width:30px;height:30px;border-radius:50%;
  background:#1c65ad;color:#fff;
  font-size:13px;font-weight:700;line-height:30px;text-align:center;
  font-variant-numeric:tabular-nums}

/* ---- closing call to action ---- */
.hfg-cta{
  padding:26px 30px;border:1px solid #cfe0f0;border-radius:10px;background:#f2f7fc}
.hfg-cta h2{
  margin:0 0 10px!important;font-size:19px!important;font-weight:700;color:#14191f}
.hfg-cta p{margin:0;font-size:15.5px;line-height:1.7;color:#3d4954}
.hfg-cta a{color:#1c65ad;font-weight:600;text-decoration:underline}

@media (max-width:1024px){
  .hfg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .hfg-lede{font-size:16.5px;margin-bottom:30px}
  .hfg-cards{grid-template-columns:1fr;gap:16px;margin-bottom:38px}
  .hfg-card{padding:20px 20px 2px}
  .hfg-steps{padding:24px 20px 26px;margin-bottom:34px}
  .hfg-steps li{padding-left:40px;font-size:14.5px}
  .hfg-steps li::before{width:27px;height:27px;line-height:27px;font-size:12.5px}
  .hfg-cta{padding:22px 20px}
}


/* ============================================================
   CHECKOUT PHONE - label / validation alignment
   The plugin marks billing_phone required, and WooCommerce
   renders aria-required="true" and a "Phone *" placeholder from
   that. The label text and the row's validate-required class come
   from a separate path that still reads the field as optional, so
   the control contradicted itself. These rules only apply while
   that stale "(optional)" span is present - once the plugin sets
   woocommerce_checkout_phone_field to "required" the span stops
   rendering and :has() switches the whole block off.
   ============================================================ */
#billing_phone_field label .optional,
#shipping_phone_field label .optional{display:none}
#billing_phone_field label:has(.optional)::after,
#shipping_phone_field label:has(.optional)::after{
  content:"*";margin-left:3px;color:#a32218;font-weight:600}