/*
Theme Name: MerakParts Pro
Theme URI: https://example.com/merakparts-pro
Description: 重型机械与工程车辆配件电商主题。深度集成 WooCommerce，询盘走 ZC Inquiry 插件（不含购物车结账下单，以询盘为主）。工业配色体系：信号白 60%（底色/内容区/产品卡片）、工程灰 30%（导航层/分段色带/侧栏/页脚）、工业橙 10%（Logo/按钮/高亮/促销标签）。全站不使用黑色底。Barlow Condensed + Inter 字体，统一描边图标系统。
Version: 2.4.0
Author: ZC
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: fridayparts-pro
Tags: woocommerce, e-commerce, industrial, custom-colors, custom-menu, sticky-header
*/

/* =========================================================
   1. Design tokens
   Palette ratio — signal white 60% (base/content/cards),
   engineering gray 30% (nav tier, bands, panels, footer),
   industrial orange 10% (action). No black surfaces.
========================================================= */
:root{
  /* --- Deep space gray: 60% — nav, footer, side rail, page base ---
     Monotonic ladder, darkest first. fp_dynamic_css() recomputes 950→500
     from the single Customizer colour `fp_color_primary`, so re-tinting the
     entire shell means changing that one value. */
  --fp-ink-950:#121518;
  --fp-ink-900:#1D2126;
  --fp-ink-850:#1F2429;
  --fp-ink-800:#22272D;
  --fp-ink-750:#252A31;
  --fp-ink-700:#282E35;
  --fp-ink-600:#3E4349;
  --fp-ink-500:#4B535C;
  --fp-ink-400:#6B7480;
  --fp-ink-300:#9AA3AE;
  --fp-ink-200:#C8CED5;
  --fp-ink-100:#E3E7EB;
  --fp-ink-50:#F1F3F5;

  /* --- Surface roles — this is where the 60/30/10 contract is declared.
     Everything structural points at a ROLE, never at a raw ink step, so the
     ratio survives a re-tint.

     v2.3.0 flips the shell from a deep-gray carrier to a LIGHT one: 信号白 is
     now the 60% carrier (page base, header, content), 灰 the 30% (nav tier,
     alternating bands, panels, footer) and 橙 stays the 10% action colour.
     Deliberately no black anywhere — the darkest surface on the page is the
     charcoal footer. --- */
  --fp-chrome:#FFFFFF;                /* topbar — the logo ships on white */
  --fp-base:#FFFFFF;                  /* page 底色 — the 60% carrier */
  --fp-base-alt:#F4F6F8;              /* alternating section band */
  --fp-nav:#F5F7F9;                   /* nav tier, a shade off the topbar */
  --fp-panel:#F4F6F8;                 /* secondary panels (was dark) */
  --fp-panel-2:#EAEEF2;
  --fp-line:#E2E6EA;                  /* hairline on light */
  --fp-line-strong:#CFD6DC;
  --fp-on-chrome:#1F2429;             /* text/icons on the shell */
  --fp-on-chrome-soft:#5D6772;

  /* Legacy role names kept as aliases so every component that already points
     at a role follows the flip without being touched. The names still read
     "dark" but now resolve light — renaming them across 1000 lines would be
     churn for no behavioural gain. */
  --fp-dark-panel:var(--fp-panel);
  --fp-dark-panel-2:var(--fp-panel-2);
  --fp-dark-line:var(--fp-line);
  --fp-on-dark:var(--fp-on-chrome);
  --fp-on-dark-soft:var(--fp-on-chrome-soft);

  /* --- Charcoal footer — the one deep block on the page. Grey, not black. --- */
  --fp-footer:#2A3036;
  --fp-footer-2:#22272C;
  --fp-footer-line:#3B434B;
  --fp-on-footer:#FFFFFF;
  --fp-on-footer-soft:#AEB7C0;

  /* --- Signal white: content surfaces. On a white base a card can no longer
     separate by fill alone, so cards now carry `--fp-line`. --- */
  --fp-white:#FFFFFF;
  --fp-surface:#FFFFFF;
  --fp-surface-2:#F5F7F9;

  /* --- Industrial orange: 10% — logo, CTA, highlight, promo tags, 关键行动点 --- */
  --fp-accent:#F26A21;
  --fp-accent-600:#DD5A12;
  --fp-accent-700:#B8480C;
  --fp-accent-800:#8C3D13;
  --fp-accent-50:#FEF1E9;
  /* Orange lifted for dark backgrounds — #F26A21 on ink reads muddy at small
     sizes, so text/icons on dark use the brighter step. */
  --fp-accent-on-dark:#FF7B2E;

  /* --- Contrast-safe accent roles -----------------------------------------
     White on the vivid orange is only 3.8:1 — fine for large display text,
     short of AA for the 12–16px labels that buttons, badges and tabs are made
     of. So any accent surface carrying SMALL white text uses `--fp-accent-cta`
     (5.3:1); the vivid step stays for big panels, which instead put DARK ink
     on orange (4.9:1) and read like machine signage. */
  --fp-accent-cta:var(--fp-accent-700);
  --fp-accent-cta-hover:var(--fp-accent-800);
  --fp-on-accent-strong:var(--fp-ink-950);
  /* Secondary text on the shell. Was ink-300 (light grey for a dark carrier);
     on the white shell it has to invert or it disappears. */
  --fp-muted-dark:var(--fp-on-chrome-soft);

  /* --- Status --- */
  --fp-star:#F5A524;
  /* The bright gold is 2.0:1 on a white card. Review cards are white, so they
     get a deeper amber that still reads as a star rating but clears AA. */
  --fp-star-on-light:#A15F00;
  --fp-success:#2F9E44;
  --fp-danger:#D93B3B;

  /* --- Semantic aliases (Customizer writes these) --- */
  --fp-primary:#282E35;
  --fp-primary-dark:#22272D;
  --fp-primary-darker:#1D2126;
  --fp-accent-dark:#DD5A12;
  --fp-text:#22272E;
  --fp-heading:#14181D;
  --fp-muted:#6B7480;
  --fp-light:#F1F3F5;
  --fp-light-2:#E9ECEF;
  --fp-border:#E3E7EB;

  /* --- Type ---
     Barlow Condensed carries every heading and control label (industrial,
     space-efficient); Inter carries running text. Display steps are fluid so
     they scale continuously instead of snapping at breakpoints. */
  --fp-font-head:"Barlow Condensed","Oswald","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --fp-font-body:"Inter","Helvetica Neue","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --fp-fs-2xs:11px;
  --fp-fs-xs:12px;
  --fp-fs-sm:13.5px;
  --fp-fs-base:15.5px;
  --fp-fs-md:16px;
  --fp-fs-lg:18px;
  --fp-fs-xl:clamp(19px,.6rem + .85vw,22px);
  --fp-fs-2xl:clamp(22px,.9rem + 1.1vw,27px);
  --fp-fs-3xl:clamp(26px,1rem + 1.9vw,36px);
  --fp-fs-4xl:clamp(32px,1rem + 3vw,48px);

  /* Line height + tracking, tokenised so the condensed and body faces stay
     optically matched instead of being tuned per-component. */
  --fp-lh-tight:1.08;
  --fp-lh-head:1.16;
  --fp-lh-body:1.65;
  --fp-tracking-tight:-.01em;
  --fp-tracking-head:.005em;
  --fp-tracking-wide:.03em;
  --fp-tracking-caps:.08em;

  /* --- Space (4px base) --- */
  --fp-sp-1:4px;  --fp-sp-2:8px;  --fp-sp-3:12px; --fp-sp-4:16px;
  --fp-sp-5:20px; --fp-sp-6:24px; --fp-sp-8:32px; --fp-sp-10:40px;
  --fp-sp-12:48px;--fp-sp-16:64px;
  /* Fluid section rhythm — replaces the three breakpoint overrides. */
  --fp-section-y:clamp(40px,2rem + 2.2vw,76px);
  --fp-gutter:clamp(16px,1rem + .8vw,28px);

  /* --- Icons — one grid, one stroke, sized by token --- */
  --fp-icon-xs:16px;
  --fp-icon-sm:18px;
  --fp-icon:22px;
  --fp-icon-lg:28px;
  --fp-icon-xl:40px;
  --fp-icon-stroke:1.75;

  /* --- Shape --- */
  --fp-radius-xs:3px;
  --fp-radius:4px;
  --fp-radius-md:6px;
  --fp-radius-lg:10px;
  --fp-radius-pill:999px;

  /* --- Elevation — tuned for a white carrier: a shadow that read as "lift"
     on deep gray turns into a bruise on white, so these are much softer and
     tinted with the shell's blue-gray rather than pure black. --- */
  --fp-shadow-sm:0 1px 2px rgba(31,36,41,.06);
  --fp-shadow:0 4px 14px rgba(31,36,41,.10);
  --fp-shadow-lg:0 14px 38px rgba(31,36,41,.16);

  --fp-container:1280px;
  --fp-ease:cubic-bezier(.4,0,.2,1);
}

/* =========================================================
   2. Base
========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--fp-font-body);
  font-size:var(--fp-fs-base);
  line-height:var(--fp-lh-body);
  color:var(--fp-text);
  background:var(--fp-base);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv02","cv03","cv04";
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:color .16s var(--fp-ease);}
a:hover{color:var(--fp-accent);}
h1,h2,h3,h4,h5{
  font-family:var(--fp-font-head);
  color:var(--fp-heading);
  line-height:var(--fp-lh-head);
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:var(--fp-tracking-head);
  text-wrap:balance;
}
h1{font-size:var(--fp-fs-4xl);line-height:var(--fp-lh-tight);}
h2{font-size:var(--fp-fs-3xl);}
h3{font-size:var(--fp-fs-xl);}
h4{font-size:var(--fp-fs-md);}
button{font-family:inherit;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
p{margin:0 0 1em;}
:focus-visible{outline:2px solid var(--fp-accent);outline-offset:2px;}

/* ---- Surface primitive ----------------------------------------------------
   `.fp-surface` marks a subtree as a content panel — 主要内容区 / 产品展示 /
   卡片. On the white shell the panel no longer separates by fill, so the
   hairline is what does the work; keeping the definition in one class is what
   stops card framing from drifting as components are added. */
.fp-surface{
  background:var(--fp-surface);
  color:var(--fp-text);
  border:1px solid var(--fp-line);
  border-radius:var(--fp-radius-md);
}
.fp-surface h1,.fp-surface h2,.fp-surface h3,.fp-surface h4,.fp-surface h5{color:var(--fp-heading);}
.fp-surface a{color:var(--fp-text);}
.fp-surface a:hover{color:var(--fp-accent-cta-hover);}

.fp-main{display:block;background:var(--fp-base);}
.fp-container{max-width:var(--fp-container);margin:0 auto;padding:0 var(--fp-gutter);}
.fp-section{padding:var(--fp-section-y) 0;background:var(--fp-base);}
.fp-section--gray{background:var(--fp-base-alt);}
/* Consecutive sections sharing a background would otherwise stack two full
   pads into ~128px of unexplained void. Collapse to a single gap; a real
   colour change still gets the full double pad, which reads as a break. */
.fp-section--gray + .fp-section--gray,
.fp-section:not(.fp-section--gray) + .fp-section:not(.fp-section--gray){padding-top:0;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}

/* Section heading — condensed caps over an orange rule. Uppercase + wide
   tracking is what makes Barlow Condensed read as signage rather than as a
   squeezed body face. */
.fp-sec-head{text-align:center;margin-bottom:var(--fp-sp-10);}
.fp-sec-head h2{
  font-size:var(--fp-fs-3xl);
  margin:0;
  text-transform:uppercase;
  letter-spacing:var(--fp-tracking-wide);
  color:var(--fp-on-dark);
  background:none!important; /* neutralise legacy inline rule hack */
  padding:0;
  display:block;
}
.fp-sec-head h2::after{
  content:"";display:block;width:72px;height:4px;border-radius:2px;
  background:var(--fp-accent);margin:var(--fp-sp-4) auto 0;
}
.fp-sec-head .fp-sub{color:var(--fp-muted-dark);font-size:var(--fp-fs-sm);margin:var(--fp-sp-3) 0 0;}
.fp-sec-head--rule::before{display:none;} /* legacy */
/* Section head sitting inside a white panel */
.fp-surface .fp-sec-head h2{color:var(--fp-heading);}

/* =========================================================
   3. Icons — one system, driven by `color`
========================================================= */
.fp-i{width:var(--fp-icon);height:var(--fp-icon);flex:0 0 auto;display:block;}
svg.fp-i--stroke{fill:none;stroke:currentColor;stroke-width:var(--fp-icon-stroke);}
svg.fp-i--solid{fill:currentColor;stroke:none;}
.fp-i--xs{--fp-icon:var(--fp-icon-xs);--fp-icon-stroke:1.9;}
.fp-i--sm{--fp-icon:var(--fp-icon-sm);--fp-icon-stroke:1.85;}
.fp-i--lg{--fp-icon:var(--fp-icon-lg);--fp-icon-stroke:1.6;}
/* Optical compensation: a stroke that reads correct at 22px looks heavy once
   the same 24-unit grid is blown up, so large sizes step the weight down. */
.fp-i--xl{--fp-icon:var(--fp-icon-xl);--fp-icon-stroke:1.35;}

/* =========================================================
   4. Buttons — squared industrial geometry
========================================================= */
.fp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--fp-sp-2);
  font-family:var(--fp-font-head);font-weight:700;font-size:var(--fp-fs-md);
  letter-spacing:.02em;
  padding:11px 24px;border-radius:var(--fp-radius);border:2px solid transparent;
  cursor:pointer;transition:background-color .16s var(--fp-ease),border-color .16s var(--fp-ease),color .16s var(--fp-ease),transform .16s var(--fp-ease);
  text-align:center;line-height:1.25;
}
.fp-btn:active{transform:translateY(1px);}
/* Primary action = industrial orange */
.fp-btn-primary{background:var(--fp-accent-cta);color:#fff;border-color:var(--fp-accent-cta);}
.fp-btn-primary:hover{background:var(--fp-accent-cta-hover);border-color:var(--fp-accent-cta-hover);color:#fff;}
/* Secondary solid = deep space gray */
.fp-btn-blue,.fp-btn-ink{background:var(--fp-ink-700);color:#fff;border-color:var(--fp-ink-700);}
.fp-btn-blue:hover,.fp-btn-ink:hover{background:var(--fp-ink-900);border-color:var(--fp-ink-900);color:#fff;}
/* Outline orange — fills on hover, keeps orange area low in dense grids. The
   deep step is the default because the shell is light; the bright step only
   survives on a photo scrim or the charcoal footer. */
.fp-btn-outline{background:transparent;color:var(--fp-accent-700);border-color:var(--fp-accent);}
.fp-footer .fp-btn-outline,.fp-onphoto .fp-btn-outline{color:var(--fp-accent-on-dark);}
.fp-btn-outline:hover{background:var(--fp-accent-cta);border-color:var(--fp-accent-cta);color:#fff;}
/* Neutral ghost — light by default now that every surface it lands on is light. */
.fp-btn-ghost{background:var(--fp-white);color:var(--fp-ink-700);border-color:var(--fp-line-strong);}
.fp-btn-ghost:hover{border-color:var(--fp-accent-cta);color:#fff;background:var(--fp-accent-cta);}
.fp-footer .fp-btn-ghost,.fp-onphoto .fp-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42);}
.fp-btn-lg{padding:15px 36px;font-size:var(--fp-fs-lg);}
.fp-btn-sm{padding:8px 16px;font-size:var(--fp-fs-sm);}
.fp-btn-block{display:flex;width:100%;}
/* Uppercase is the industrial register the condensed face was picked for. */
.fp-btn{text-transform:uppercase;letter-spacing:var(--fp-tracking-wide);}

/* =========================================================
   5. Promo bar
========================================================= */
.fp-promobar{font-size:var(--fp-fs-sm);}
.fp-promobar__inner{
  max-width:var(--fp-container);margin:0 auto;padding:9px var(--fp-sp-5);
  display:flex;align-items:center;justify-content:center;gap:var(--fp-sp-3);flex-wrap:wrap;position:relative;
}
.fp-promobar__text{font-weight:500;}
.fp-promobar__link{font-weight:700;font-family:var(--fp-font-head);letter-spacing:.02em;text-decoration:underline;text-underline-offset:3px;}
.fp-promobar__close{
  position:absolute;right:var(--fp-sp-5);top:50%;transform:translateY(-50%);
  background:transparent;border:0;font-size:22px;line-height:1;opacity:.7;padding:0 4px;
}
.fp-promobar__close:hover{opacity:1;}

/* =========================================================
   6. Header — two-tier light chrome
   Topbar is white because the wordmark ships on white; the nav tier steps
   one shade into grey so the two tiers read as separate without spending a
   colour band, and a 3px accent rule closes the whole header.
========================================================= */
.fp-header{position:relative;z-index:50;}
.fp-topbar{background:var(--fp-chrome);color:var(--fp-on-chrome);border-bottom:1px solid var(--fp-line);}
.fp-topbar__inner{
  display:flex;align-items:center;gap:var(--fp-sp-5);
  padding:var(--fp-sp-4) var(--fp-gutter);max-width:var(--fp-container);margin:0 auto;
}
.fp-logo{flex:0 0 auto;display:flex;align-items:center;gap:10px;}
.fp-logo img{max-height:46px;width:auto;}
/* Logo mark — a key orange touchpoint */
.fp-logo__mark{
  width:34px;height:34px;flex:0 0 auto;border-radius:var(--fp-radius);
  background:var(--fp-accent);color:#fff;display:flex;align-items:center;justify-content:center;
}
.fp-logo__mark .fp-i{--fp-icon:21px;--fp-icon-stroke:2;}
.fp-logo__text{
  font-family:var(--fp-font-head);font-weight:700;font-size:29px;
  color:var(--fp-on-chrome);letter-spacing:.01em;line-height:1;white-space:nowrap;
}
.fp-logo__text b,.fp-logo__text .fp-accent-word{color:var(--fp-accent);font-weight:700;}

/* Select Model is the one solid control in the topbar — charcoal, so it holds
   its own against a white field without adding a second orange. */
.fp-selectmodel{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--fp-sp-2);
  background:var(--fp-ink-900);border:1px solid var(--fp-ink-900);
  color:#fff;font-family:var(--fp-font-head);font-weight:600;font-size:var(--fp-fs-md);
  letter-spacing:.02em;padding:10px 20px;border-radius:var(--fp-radius);white-space:nowrap;
  cursor:pointer;
  transition:background-color .16s var(--fp-ease),border-color .16s var(--fp-ease),color .16s var(--fp-ease);
}
.fp-selectmodel:hover{background:var(--fp-accent-cta);border-color:var(--fp-accent-cta);color:#fff;}
.fp-selectmodel .fp-i{--fp-icon:19px;}

.fp-search{flex:1 1 auto;max-width:620px;}
.fp-search form{
  display:flex;align-items:center;background:#fff;border-radius:var(--fp-radius);
  overflow:hidden;border:1px solid var(--fp-line-strong);transition:border-color .16s var(--fp-ease),box-shadow .16s var(--fp-ease);
}
.fp-search form:focus-within{border-color:var(--fp-accent);box-shadow:0 0 0 3px rgba(242,106,33,.14);}
.fp-search input[type=search]{
  flex:1;border:0;outline:0;padding:11px 18px;font-size:var(--fp-fs-base);
  font-family:var(--fp-font-body);color:var(--fp-text);background:transparent;
}
.fp-search input[type=search]::placeholder{color:var(--fp-ink-400);}
.fp-search button{
  flex:0 0 auto;border:0;background:var(--fp-accent-cta);color:#fff;
  padding:0 20px;align-self:stretch;display:flex;align-items:center;
  transition:background-color .16s var(--fp-ease);
}
.fp-search button:hover{background:var(--fp-accent-cta-hover);}

.fp-header-actions{flex:0 0 auto;display:flex;align-items:center;gap:var(--fp-sp-4);margin-left:auto;}
.fp-header-actions a{color:var(--fp-on-chrome);display:inline-flex;align-items:center;gap:6px;font-size:var(--fp-fs-sm);}
.fp-header-actions a:hover{color:var(--fp-accent-cta);}
.fp-divider{width:1px;height:22px;background:var(--fp-line);}
.fp-country{display:inline-flex;align-items:center;gap:5px;color:var(--fp-on-chrome);font-size:var(--fp-fs-sm);font-weight:600;cursor:pointer;white-space:nowrap;}
.fp-country__flag{font-size:var(--fp-fs-lg);line-height:1;}
.fp-country__code{letter-spacing:.03em;}
.fp-country__caret{width:12px;height:12px;fill:currentColor;opacity:.7;}
.fp-country:hover{color:var(--fp-accent-cta);}
.fp-cart,.fp-wishlist{position:relative;}
.fp-wishlist .fp-wishlist__count,
.fp-cart .fp-cart__count{
  position:absolute;top:-7px;right:-10px;background:var(--fp-accent);color:#fff;
  font-size:var(--fp-fs-2xs);font-weight:700;min-width:18px;height:18px;line-height:18px;
  text-align:center;border-radius:var(--fp-radius-pill);padding:0 5px;font-variant-numeric:tabular-nums;
}

/* Nav bar — second, slightly greyer tier, closed by a full-width accent
   hairline that separates chrome from content without spending a whole band
   on orange. */
.fp-navbar{background:var(--fp-nav);border-bottom:3px solid var(--fp-accent);}
.fp-navbar__inner{display:flex;align-items:center;gap:2px;max-width:var(--fp-container);margin:0 auto;padding:0 var(--fp-gutter);}
/* The catalogue trigger is the only solid orange block in the header — it is
   the control the客户 specifically asked to make obvious. */
.fp-cat-toggle{
  display:inline-flex;align-items:center;gap:var(--fp-sp-2);color:#fff;
  font-family:var(--fp-font-head);font-weight:700;font-size:var(--fp-fs-md);
  letter-spacing:var(--fp-tracking-caps);text-transform:uppercase;
  padding:15px 22px;margin-right:var(--fp-sp-3);
  background:var(--fp-accent-cta);border:0;position:relative;
  transition:background-color .16s var(--fp-ease);
}
.fp-cat-toggle:hover,.fp-cat-toggle[aria-expanded="true"]{background:var(--fp-accent-cta-hover);}
.fp-cat-toggle .fp-i{--fp-icon:19px;}

.fp-menu{display:flex;align-items:center;flex-wrap:wrap;}
.fp-menu li{position:relative;}
.fp-menu > li > a{
  display:block;padding:14px 16px;color:var(--fp-ink-700);
  font-family:var(--fp-font-head);font-weight:600;font-size:var(--fp-fs-md);
  letter-spacing:.02em;position:relative;
}
.fp-menu > li > a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;
  background:var(--fp-accent);transform:scaleX(0);transition:transform .18s var(--fp-ease);
}
.fp-menu > li > a:hover,.fp-menu > li.current-menu-item > a{color:var(--fp-accent-cta);}
.fp-menu > li > a:hover::after,.fp-menu > li.current-menu-item > a::after{transform:scaleX(1);}
.fp-menu .fp-fire::before{content:"";}
.fp-menu .fp-fire > a{color:var(--fp-accent-cta);}

/* Dropdown submenus — white sheet with a hairline, matching the content
   surfaces the nav now sits on. */
.fp-menu ul.sub-menu{
  position:absolute;top:100%;left:0;min-width:230px;background:var(--fp-white);
  border:1px solid var(--fp-line);box-shadow:var(--fp-shadow-lg);border-radius:0 0 var(--fp-radius-md) var(--fp-radius-md);
  padding:6px 0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s var(--fp-ease),transform .18s var(--fp-ease),visibility .18s;z-index:60;
}
.fp-menu li:hover > ul.sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.fp-menu ul.sub-menu li a{
  display:block;padding:9px 18px;color:var(--fp-ink-600);font-size:var(--fp-fs-sm);
  font-weight:500;font-family:var(--fp-font-body);border-left:2px solid transparent;
}
.fp-menu ul.sub-menu li a:hover{background:var(--fp-panel);color:var(--fp-accent-cta);border-left-color:var(--fp-accent);}
.fp-menu ul.sub-menu ul.sub-menu{top:0;left:100%;}

/* ---- Catalogue drawer -----------------------------------------------------
   Replaces the old full-width mega panel. A left slide-out rail holding the
   whole catalogue — Shop by / Category / About — with each category opening
   its children in a flyout beside the rail. Same model as the reference site;
   the win over a 4-column mega row is that the tree is browsable without the
   panel having to fit above the fold. */
.fp-mega{
  position:fixed;top:0;bottom:0;left:0;width:var(--fp-drawer-w,340px);
  background:var(--fp-white);box-shadow:var(--fp-shadow-lg);
  z-index:130;display:flex;flex-direction:column;
  transform:translateX(-104%);visibility:hidden;
  transition:transform .28s var(--fp-ease),visibility .28s;
}
.fp-mega.is-open{transform:translateX(0);visibility:visible;}
.fp-mega__backdrop{
  position:fixed;inset:0;background:rgba(31,36,41,.48);z-index:125;
  opacity:0;visibility:hidden;transition:opacity .28s var(--fp-ease),visibility .28s;
}
.fp-mega__backdrop.is-open{opacity:1;visibility:visible;}

/* Account strip — orange, so the drawer opens on the brand colour */
.fp-mega__head{
  flex:0 0 auto;display:flex;align-items:center;gap:var(--fp-sp-3);
  background:var(--fp-accent-cta);color:#fff;padding:var(--fp-sp-5) var(--fp-sp-5);
}
.fp-mega__head .fp-i{--fp-icon:26px;}
.fp-mega__head b{font-family:var(--fp-font-head);font-size:var(--fp-fs-lg);letter-spacing:var(--fp-tracking-wide);font-weight:700;}
.fp-mega__head a{color:#fff;}
/* Docked inside the orange header rather than floating outside the rail —
   outside it landed on top of the Select Model button in the topbar. */
.fp-mega__close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:34px;height:34px;border-radius:var(--fp-radius-pill);border:0;
  background:rgba(255,255,255,.18);color:#fff;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s var(--fp-ease);
}
.fp-mega__close:hover{background:#fff;color:var(--fp-accent-cta);}

.fp-mega__scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;}
.fp-mega__group + .fp-mega__group{border-top:8px solid var(--fp-panel);}
.fp-mega__group h4{
  margin:0;padding:var(--fp-sp-4) var(--fp-sp-5) var(--fp-sp-2);
  font-size:var(--fp-fs-lg);color:var(--fp-heading);
  letter-spacing:var(--fp-tracking-wide);
}
.fp-mega__link{
  display:flex;align-items:center;gap:var(--fp-sp-3);
  padding:11px var(--fp-sp-5);font-size:var(--fp-fs-base);color:var(--fp-text);
  border-bottom:1px solid var(--fp-line);
}
.fp-mega__link:last-child{border-bottom:0;}
.fp-mega__link:hover{background:var(--fp-panel);color:var(--fp-accent-cta);}

/* Brand choices live inside the catalogue as well as on the dedicated A-Z
   page, so users can enter either side of the product taxonomy directly. */
.fp-mega__brandgrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
  padding:var(--fp-sp-2) var(--fp-sp-5) var(--fp-sp-3);
}
.fp-mega__brandgrid a{
  min-width:0;padding:8px 9px;border:1px solid var(--fp-line);border-radius:var(--fp-radius);
  background:var(--fp-panel);color:var(--fp-ink-600);font-size:var(--fp-fs-xs);
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fp-mega__brandgrid a:hover{background:var(--fp-accent-cta);border-color:var(--fp-accent-cta);color:#fff;}
.fp-mega__viewall-inline{
  display:inline-block;margin:0 var(--fp-sp-5) var(--fp-sp-4);color:var(--fp-accent-cta);
  font-family:var(--fp-font-head);font-weight:700;font-size:var(--fp-fs-sm);
  letter-spacing:var(--fp-tracking-wide);text-transform:uppercase;
}

/* Category row — thumbnail plate + label + chevron */
.fp-mega__cat{
  display:flex;align-items:center;gap:var(--fp-sp-3);width:100%;
  padding:9px var(--fp-sp-5);border-bottom:1px solid var(--fp-line);
  background:transparent;border-left:0;border-right:0;border-top:0;
  font-family:var(--fp-font-body);font-size:var(--fp-fs-base);color:var(--fp-text);
  text-align:left;cursor:pointer;transition:background-color .14s var(--fp-ease),color .14s var(--fp-ease);
}
.fp-mega__cat:hover,.fp-mega__cat.is-active{background:var(--fp-panel);color:var(--fp-accent-cta);}
.fp-mega__cat-thumb{
  width:40px;height:40px;flex:0 0 40px;border-radius:var(--fp-radius);overflow:hidden;
  background:var(--fp-panel);display:flex;align-items:center;justify-content:center;color:var(--fp-ink-400);
}
.fp-mega__cat-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;}
.fp-mega__cat-thumb .fp-i{--fp-icon:22px;}
.fp-mega__cat-name{flex:1 1 auto;line-height:1.35;}
.fp-mega__cat-caret{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;opacity:.55;}
.fp-mega__cat:hover .fp-mega__cat-caret,.fp-mega__cat.is-active .fp-mega__cat-caret{opacity:1;}

/* Flyout holding one category's children, docked to the right of the rail */
.fp-mega__flyout{
  position:absolute;top:0;bottom:0;left:100%;width:min(560px,52vw);
  background:var(--fp-white);border-left:1px solid var(--fp-line);
  box-shadow:var(--fp-shadow-lg);padding:var(--fp-sp-6) var(--fp-sp-6) var(--fp-sp-8);
  overflow-y:auto;display:none;
}
.fp-mega__flyout.is-open{display:block;}
.fp-mega__flyout h5{
  font-family:var(--fp-font-head);font-size:var(--fp-fs-xl);color:var(--fp-heading);
  margin:0 0 var(--fp-sp-4);padding-bottom:var(--fp-sp-3);
  border-bottom:2px solid var(--fp-accent);letter-spacing:var(--fp-tracking-wide);
}
.fp-mega__flyout ul{columns:2;column-gap:var(--fp-sp-6);}
.fp-mega__flyout li{break-inside:avoid;}
.fp-mega__flyout li a{display:block;padding:6px 0;font-size:var(--fp-fs-sm);color:var(--fp-ink-600);}
.fp-mega__flyout li a:hover{color:var(--fp-accent-cta);}
.fp-mega__flyout .fp-mega__viewall{
  display:inline-block;margin-top:var(--fp-sp-5);font-family:var(--fp-font-head);
  font-weight:700;color:var(--fp-accent-cta);letter-spacing:var(--fp-tracking-wide);text-transform:uppercase;
}
@media(max-width:992px){.fp-mega__flyout{display:none!important;}}
@media(max-width:420px){
  .fp-mega{--fp-drawer-w:86vw;}
}

/* Sticky */
.fp-header.is-sticky .fp-navbar{position:fixed;top:0;left:0;right:0;z-index:80;box-shadow:var(--fp-shadow-lg);}
body.fp-has-sticky{--fp-sticky-pad:56px;}

/* Mobile menu */
.fp-mobile-toggle{display:none;background:transparent;border:0;color:var(--fp-on-chrome);padding:6px;}
.fp-mobile-toggle .fp-i{--fp-icon:26px;--fp-icon-stroke:1.7;}
.fp-mobile-drawer{
  position:fixed;inset:0 22% 0 0;background:var(--fp-white);z-index:120;
  transform:translateX(-105%);transition:transform .3s var(--fp-ease);
  overflow-y:auto;box-shadow:var(--fp-shadow-lg);
}
.fp-mobile-drawer.is-open{transform:translateX(0);}
.fp-mobile-backdrop{position:fixed;inset:0;background:rgba(31,36,41,.48);z-index:110;opacity:0;visibility:hidden;transition:opacity .3s var(--fp-ease),visibility .3s;}
.fp-mobile-backdrop.is-open{opacity:1;visibility:visible;}
.fp-mobile-drawer__head{background:var(--fp-chrome);color:var(--fp-on-chrome);padding:var(--fp-sp-4) var(--fp-sp-5);display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--fp-accent);}
.fp-mobile-drawer__head .fp-logo__text{font-size:23px;}
.fp-mobile-drawer__head img{max-height:36px;width:auto;}
.fp-mobile-drawer__close{background:transparent;border:0;color:var(--fp-on-chrome);font-size:26px;line-height:1;}
.fp-mobile-model{
  width:calc(100% - 2 * var(--fp-sp-5));margin:var(--fp-sp-4) var(--fp-sp-5);
  display:flex;align-items:center;justify-content:center;gap:var(--fp-sp-2);
  padding:12px 16px;border:0;border-radius:var(--fp-radius);background:var(--fp-ink-900);color:#fff;
  font-family:var(--fp-font-head);font-weight:700;font-size:var(--fp-fs-md);letter-spacing:var(--fp-tracking-wide);
}
.fp-mobile-model .fp-i{--fp-icon:19px;}
.fp-mobile-menu li a{
  display:block;padding:14px var(--fp-sp-5);border-bottom:1px solid var(--fp-line);
  color:var(--fp-ink-700);font-weight:600;font-family:var(--fp-font-head);font-size:var(--fp-fs-md);
  letter-spacing:var(--fp-tracking-wide);text-transform:uppercase;
}
.fp-mobile-menu li a:hover{color:var(--fp-accent-cta);background:var(--fp-panel);}
.fp-mobile-menu .sub-menu{background:var(--fp-panel);}
.fp-mobile-menu .sub-menu a{padding-left:var(--fp-sp-10);font-weight:500;font-size:var(--fp-fs-sm);font-family:var(--fp-font-body);text-transform:none;letter-spacing:0;}

/* Machine finder modal. It uses the managed WooCommerce Brand and Equipment
   attributes, so the options automatically follow the catalogue backend. */
.fp-model-selector[hidden]{display:none;}
.fp-model-selector{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:var(--fp-sp-5);}
.fp-model-selector__backdrop{position:absolute;inset:0;background:rgba(18,21,24,.66);backdrop-filter:blur(3px);}
.fp-model-selector__dialog{
  position:relative;z-index:1;width:min(620px,100%);max-height:calc(100vh - 2 * var(--fp-sp-5));overflow-y:auto;
  padding:var(--fp-sp-10);border-top:5px solid var(--fp-accent);border-radius:var(--fp-radius-lg);
  background:var(--fp-white);box-shadow:0 24px 70px rgba(18,21,24,.32);
}
.fp-model-selector__close{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border:1px solid var(--fp-line);
  border-radius:var(--fp-radius-pill);background:var(--fp-panel);color:var(--fp-ink-700);
  font-size:25px;line-height:1;cursor:pointer;
}
.fp-model-selector__close:hover{background:var(--fp-accent-cta);border-color:var(--fp-accent-cta);color:#fff;}
.fp-model-selector__eyebrow{
  display:block;margin-bottom:var(--fp-sp-2);font-family:var(--fp-font-head);font-weight:700;
  font-size:var(--fp-fs-sm);letter-spacing:var(--fp-tracking-caps);text-transform:uppercase;color:var(--fp-accent-cta);
}
.fp-model-selector__dialog h2{margin:0 40px var(--fp-sp-3) 0;font-size:clamp(30px,4vw,44px);}
.fp-model-selector__dialog > p{margin-bottom:var(--fp-sp-6);color:var(--fp-ink-500);}
.fp-model-selector__form{display:grid;grid-template-columns:1fr 1fr;gap:var(--fp-sp-3) var(--fp-sp-4);}
.fp-model-selector__form label{
  font-family:var(--fp-font-head);font-weight:700;font-size:var(--fp-fs-md);color:var(--fp-heading);
}
.fp-model-selector__form label:nth-of-type(1){grid-column:1;grid-row:1;}
.fp-model-selector__form label:nth-of-type(2){grid-column:2;grid-row:1;}
.fp-model-selector__form select{
  width:100%;min-height:48px;padding:0 40px 0 14px;border:1px solid var(--fp-line-strong);
  border-radius:var(--fp-radius);background:var(--fp-white);color:var(--fp-text);font:inherit;
}
.fp-model-selector__form select:focus{outline:3px solid rgba(242,106,33,.2);border-color:var(--fp-accent);}
.fp-model-selector__actions{grid-column:1/-1;display:flex;align-items:center;gap:var(--fp-sp-4);margin-top:var(--fp-sp-3);}
.fp-model-selector__hint{color:#9d2c20;font-size:var(--fp-fs-sm);font-weight:600;}
.fp-model-selector__shortcuts{
  display:flex;flex-wrap:wrap;gap:var(--fp-sp-5);margin-top:var(--fp-sp-6);padding-top:var(--fp-sp-4);
  border-top:1px solid var(--fp-line);
}
.fp-model-selector__shortcuts a{color:var(--fp-accent-cta);font-family:var(--fp-font-head);font-weight:700;}

/* =========================================================
   7. Hero
========================================================= */
.fp-hero{position:relative;background:var(--fp-base);}
.fp-hero__grid{display:grid;grid-template-columns:1fr 340px;max-width:var(--fp-container);margin:0 auto;}
.fp-hero__slider{position:relative;overflow:hidden;background:var(--fp-panel);}
.fp-hero__slides{display:flex;transition:transform .5s var(--fp-ease);}
.fp-hero__slide{min-width:100%;position:relative;}
.fp-hero__slide img,.fp-hero__slide-bg{width:100%;height:clamp(300px,30vw,420px);object-fit:cover;}
/* Scrim keeps the caption legible whatever the uploaded banner looks like.
   Light now: the headline is charcoal-on-photo, which is what lets the hero
   belong to a white page instead of punching a dark hole in it. */
.fp-hero__slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 32%,rgba(255,255,255,.34) 58%,rgba(255,255,255,0) 76%);
}
.fp-hero__caption{position:absolute;left:6%;top:50%;transform:translateY(-50%);max-width:54%;z-index:2;}
.fp-hero__caption h2{
  font-size:clamp(30px,3.6vw,52px);line-height:var(--fp-lh-tight);margin-bottom:var(--fp-sp-3);
  color:var(--fp-heading);text-transform:uppercase;font-weight:700;letter-spacing:var(--fp-tracking-wide);
}
.fp-hero__caption h2 span{display:block;}
.fp-hero__caption h2 .fp-hero-t1{color:var(--fp-heading);}
.fp-hero__caption h2 span + span{color:var(--fp-accent-600);}
.fp-hero__caption p{
  font-size:var(--fp-fs-lg);font-weight:600;color:var(--fp-ink-500);
  font-family:var(--fp-font-head);letter-spacing:var(--fp-tracking-wide);margin:0;
}
.fp-hero__dots{position:absolute;left:6%;bottom:var(--fp-sp-5);display:flex;gap:6px;}
.fp-hero__dots button{width:28px;height:4px;border-radius:2px;border:0;background:rgba(31,36,41,.22);cursor:pointer;}
.fp-hero__dots button.is-active{background:var(--fp-accent);}

/* The value-prop rail is the page's single largest deliberate block of accent.
   Putting the 10% here rather than dusting it over the product grid keeps the
   catalogue calm while still meeting the ratio. */
/* Keeps the VIVID orange (it is the page's signature block) and puts dark ink
   on it rather than white — 4.9:1 instead of 3.8:1, and it reads like a machine
   data plate, which is the register this theme is in. */
.fp-hero__aside{
  background:var(--fp-accent-600);color:var(--fp-on-accent-strong);
  padding:var(--fp-sp-8) var(--fp-sp-6);
  display:flex;flex-direction:column;justify-content:center;gap:var(--fp-sp-6);
}
.fp-hero__feat{display:flex;align-items:center;gap:var(--fp-sp-4);}
.fp-hero__feat + .fp-hero__feat{border-top:1px solid rgba(18,21,24,.22);padding-top:var(--fp-sp-6);}
.fp-hero__feat .fp-i{--fp-icon:34px;--fp-icon-stroke:1.6;color:var(--fp-on-accent-strong);}
.fp-hero__feat b{
  font-family:var(--fp-font-head);font-size:var(--fp-fs-lg);text-transform:uppercase;
  display:block;line-height:1.1;letter-spacing:var(--fp-tracking-wide);font-weight:700;
  color:var(--fp-on-accent-strong);
}
.fp-hero__feat b em{color:#fff;font-style:normal;}
.fp-hero__feat span{font-size:var(--fp-fs-sm);color:var(--fp-on-accent-strong);opacity:1;font-weight:500;}

/* Promo cards row */
.fp-promos{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--fp-sp-5);
  max-width:var(--fp-container);margin:var(--fp-sp-8) auto;padding:0 var(--fp-gutter);
}
.fp-promo{
  position:relative;border-radius:var(--fp-radius-lg);overflow:hidden;min-height:220px;
  display:flex;align-items:center;color:#fff;background-size:cover;background-position:center;
  box-shadow:var(--fp-shadow);
}
.fp-promo::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,19,22,.86) 0%,rgba(16,19,22,.55) 55%,rgba(16,19,22,.18) 100%);
}
/* Art-less promo → solid accent panel (no scrim, inverted button). Same
   dark-ink-on-vivid-orange treatment as the hero rail, for the same reason. */
.fp-promo--flat{background:var(--fp-accent-600);}
.fp-promo--flat::before{display:none;}
.fp-promo--flat .fp-promo__body{max-width:74%;}
.fp-promo--flat .fp-promo__body h3{color:var(--fp-on-accent-strong);}
.fp-promo--flat .fp-promo__body p{color:var(--fp-on-accent-strong);}
.fp-promo--flat .fp-btn-primary{background:var(--fp-ink-950);border-color:var(--fp-ink-950);}
.fp-promo--flat .fp-btn-primary:hover{background:#000;border-color:#000;}
.fp-promo__body{position:relative;z-index:1;padding:var(--fp-sp-8);max-width:68%;}
.fp-promo__body h3{color:#fff;font-size:var(--fp-fs-2xl);margin-bottom:var(--fp-sp-2);text-transform:uppercase;letter-spacing:var(--fp-tracking-wide);}
.fp-promo__body p{font-size:var(--fp-fs-sm);color:var(--fp-ink-200);margin-bottom:var(--fp-sp-4);}
.fp-promo__tag{
  position:absolute;top:0;right:0;background:var(--fp-accent-cta);color:#fff;
  font-family:var(--fp-font-head);font-weight:700;font-size:var(--fp-fs-xs);
  letter-spacing:.06em;text-transform:uppercase;padding:7px 14px;
  border-bottom-left-radius:var(--fp-radius-md);z-index:2;
}

/* =========================================================
   8. Category showcase
========================================================= */
/* Nav-by-type cards. Wayfinding, not 产品展示 — they take the grey panel fill
   so they read as chrome next to the white product cards, and spend their
   contrast on an orange icon plate. */
.fp-typecats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--fp-sp-4);}
.fp-typecat{
  background:var(--fp-dark-panel);border:1px solid var(--fp-dark-line);border-radius:var(--fp-radius-md);
  padding:var(--fp-sp-5);display:flex;align-items:center;gap:var(--fp-sp-4);
  transition:border-color .18s var(--fp-ease),background-color .18s var(--fp-ease),transform .18s var(--fp-ease);
}
.fp-typecat:hover{border-color:var(--fp-accent);background:var(--fp-dark-panel-2);transform:translateY(-2px);}
.fp-typecat__icon{
  width:54px;height:54px;flex:0 0 auto;border-radius:var(--fp-radius-md);
  background:var(--fp-accent);display:flex;align-items:center;justify-content:center;
  color:#fff;transition:background-color .18s var(--fp-ease);
}
.fp-typecat__icon .fp-i{--fp-icon:27px;--fp-icon-stroke:1.6;}
.fp-typecat:hover .fp-typecat__icon{background:var(--fp-accent-700);}
.fp-typecat h3{font-size:var(--fp-fs-md);margin:0 0 2px;color:var(--fp-heading);}
.fp-typecat span{font-size:var(--fp-fs-xs);color:var(--fp-muted-dark);}

/* Product-image category grid */
/* Flex (not grid) so a tab holding only a couple of sub-categories stays centred
   instead of hugging the left edge of an otherwise empty six-column row. */
.fp-catgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--fp-sp-4);--fp-catcols:6;}
.fp-catcard{flex:0 0 calc((100% - (var(--fp-catcols) - 1) * var(--fp-sp-4)) / var(--fp-catcols));max-width:220px;}
.fp-catcard{background:transparent;border-radius:var(--fp-radius-md);text-align:center;transition:transform .18s var(--fp-ease);}
.fp-catcard:hover{transform:translateY(-3px);}
/* Catalogue photos are shot on white, so the plate stays white and the
   hairline is what makes it a tile on a white page. */
.fp-catcard__img{
  background:var(--fp-surface);border:1px solid var(--fp-line);border-radius:var(--fp-radius-md);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:var(--fp-sp-3);transition:border-color .18s var(--fp-ease),box-shadow .18s var(--fp-ease);
}
.fp-catcard:hover .fp-catcard__img{border-color:var(--fp-accent);box-shadow:var(--fp-shadow);}
.fp-catcard__img img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply;}
.fp-catcard__ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--fp-ink-300);}
.fp-catcard__ph .fp-i{--fp-icon:56px;--fp-icon-stroke:1.35;}
.fp-catcard h4{
  font-size:var(--fp-fs-sm);margin:var(--fp-sp-3) 0 0;color:var(--fp-ink-600);
  font-weight:600;font-family:var(--fp-font-body);line-height:1.4;
}
.fp-catcard:hover h4{color:var(--fp-accent-cta);}
.fp-viewall{text-align:center;margin-top:var(--fp-sp-10);}

/* Category tabs — the active tab is a solid orange chip. A 1px underline was
   spending none of the accent budget on the one control that actually steers
   the section. */
/* Eight parent categories will not fit one row at any realistic width, so the
   rail wraps instead of clipping the last label mid-word behind the container
   edge — a horizontal scroller with no visible affordance just looked broken. */
.fp-cattabs__nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--fp-sp-2);
  border-bottom:1px solid var(--fp-line);
  margin-bottom:var(--fp-sp-8);padding-bottom:var(--fp-sp-5);
}
.fp-cattabs__tab{
  appearance:none;background:var(--fp-white);border:1px solid var(--fp-line-strong);border-radius:var(--fp-radius);
  padding:10px 16px;font-family:var(--fp-font-head);font-weight:600;font-size:var(--fp-fs-sm);
  letter-spacing:var(--fp-tracking-wide);line-height:1.3;color:var(--fp-ink-600);cursor:pointer;white-space:nowrap;
  text-transform:uppercase;
  transition:color .15s var(--fp-ease),background-color .15s var(--fp-ease),border-color .15s var(--fp-ease);
}
.fp-cattabs__tab:hover{color:var(--fp-accent-cta);border-color:var(--fp-accent);}
.fp-cattabs__tab.is-active{color:#fff;background:var(--fp-accent-cta);border-color:var(--fp-accent-cta);}
.fp-cattabs__panel[hidden]{display:none;}

/* Brand tags — pure text tiles on the grey panel fill. */
.fp-brands{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--fp-sp-3);}
.fp-brandtag{
  border:1px solid var(--fp-line);border-radius:var(--fp-radius-md);background:var(--fp-white);
  text-align:center;padding:var(--fp-sp-4) var(--fp-sp-2);font-family:var(--fp-font-head);
  font-weight:600;color:var(--fp-ink-600);font-size:var(--fp-fs-md);letter-spacing:var(--fp-tracking-wide);
  transition:border-color .18s var(--fp-ease),color .18s var(--fp-ease),background-color .18s var(--fp-ease),box-shadow .18s var(--fp-ease);
}
.fp-brandtag:hover{border-color:var(--fp-accent-cta);color:#fff;background:var(--fp-accent-cta);box-shadow:var(--fp-shadow);}

/* Equipment cards */
.fp-equip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--fp-sp-4);}
.fp-equipcard{
  position:relative;border-radius:var(--fp-radius-md);overflow:hidden;min-height:152px;
  display:flex;align-items:flex-end;color:#fff;background:var(--fp-ink-700);
  background-size:cover;background-position:center;
  transition:transform .2s var(--fp-ease),box-shadow .2s var(--fp-ease);
}
.fp-equip--catalog{gap:var(--fp-sp-5);}
.fp-equip--catalog .fp-equipcard{min-height:250px;}
.fp-equipcard:hover{transform:translateY(-3px);box-shadow:var(--fp-shadow-lg);}
/* The label now sits on a solid accent plate, so the full-height scrim that
   used to buy legibility is redundant — it was only muddying the machinery
   photos. Bottom-weighted wash instead. */
.fp-equipcard::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(12,15,18,.60) 0%,rgba(12,15,18,.12) 42%,rgba(12,15,18,0) 70%);
  transition:background .2s var(--fp-ease);
}
.fp-equipcard:hover::before{background:linear-gradient(0deg,rgba(12,15,18,.70) 0%,rgba(12,15,18,.20) 48%,rgba(12,15,18,0) 76%);}
/* Label is a solid accent plate rather than a hairline rule — it survives any
   photo underneath it and puts the accent where the eye already lands. */
.fp-equipcard__label{
  position:relative;z-index:1;font-family:var(--fp-font-head);
  font-weight:700;font-size:var(--fp-fs-md);letter-spacing:var(--fp-tracking-wide);line-height:1.25;
  text-transform:uppercase;color:#fff;background:var(--fp-accent-cta);
  padding:7px var(--fp-sp-4);border-radius:var(--fp-radius-xs);
  margin:0 var(--fp-sp-4) var(--fp-sp-4);
  transition:background-color .2s var(--fp-ease);
}
.fp-equipcard__label small{
  display:block;margin-top:2px;font-family:var(--fp-font-body);font-size:var(--fp-fs-xs);
  font-weight:500;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.88);
}
.fp-equipcard:hover .fp-equipcard__label{background:var(--fp-accent-700);}

/* =========================================================
   9. Reviews
========================================================= */
.fp-reviews__head{display:flex;align-items:center;justify-content:center;gap:var(--fp-sp-4);margin-bottom:var(--fp-sp-10);flex-wrap:wrap;}
.fp-reviews__score{font-family:var(--fp-font-head);font-weight:700;font-size:52px;color:var(--fp-accent-600);line-height:1;font-variant-numeric:tabular-nums;}
.fp-reviews__meta{text-align:left;}
.fp-stars{color:var(--fp-star);font-size:var(--fp-fs-lg);letter-spacing:2px;}
.fp-surface .fp-stars,.fp-review .fp-stars,.fp-prod-card .fp-stars{color:var(--fp-star-on-light);}
.fp-reviews__meta span{display:block;color:var(--fp-muted-dark);font-size:var(--fp-fs-sm);}
.fp-reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fp-sp-5);}
/* Testimonial cards are 卡片 → signal white, with the accent kept to the rule
   and the avatar so the block still reads as part of the same system. */
.fp-review{
  background:var(--fp-surface);color:var(--fp-text);border:1px solid var(--fp-line);border-radius:var(--fp-radius-md);
  border-left:4px solid var(--fp-accent);
  padding:var(--fp-sp-6);display:flex;flex-direction:column;
}
.fp-review .fp-stars{margin-bottom:var(--fp-sp-3);}
.fp-review p{font-size:var(--fp-fs-base);color:var(--fp-ink-500);margin-bottom:var(--fp-sp-4);flex:1;line-height:1.75;}
.fp-review__author{display:flex;align-items:center;gap:var(--fp-sp-3);}
/* Scoped past `.fp-review__author span`, which would otherwise force
   display:block on the avatar and kill its centring. */
.fp-review__author .fp-review__avatar{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 38px;border-radius:var(--fp-radius-pill);
  background:var(--fp-accent);color:#fff;font-family:var(--fp-font-head);
  font-weight:700;font-size:var(--fp-fs-md);line-height:1;
}
.fp-review__author > span:not(.fp-review__avatar){display:block;min-width:0;}
.fp-review__author b{display:block;font-size:var(--fp-fs-sm);color:var(--fp-heading);}
.fp-review__author b + span{display:block;font-size:var(--fp-fs-xs);color:var(--fp-muted);}

/* Feature cards — the icon plate is a full orange block, which is where a
   meaningful slice of the 10% actually lives on this page. */
.fp-features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fp-sp-5);}
.fp-feature{
  background:var(--fp-surface);color:var(--fp-text);border:1px solid var(--fp-line);border-radius:var(--fp-radius-md);
  overflow:hidden;transition:border-color .18s var(--fp-ease),transform .18s var(--fp-ease),box-shadow .18s var(--fp-ease);
}
.fp-feature:hover{border-color:var(--fp-accent);box-shadow:var(--fp-shadow-lg);transform:translateY(-2px);}
.fp-feature__img{height:132px;background:var(--fp-panel);background-size:cover;background-position:center;}
/* Tinted plate, not a solid one. On the dark shell three solid orange blocks
   in a row were the section's only bright note; on a white page they read as
   three billboards and blow the 10% budget on decoration. */
.fp-feature__img--icon{
  display:flex;align-items:center;justify-content:center;
  background:var(--fp-accent-50);color:var(--fp-accent-cta);
  border-bottom:1px solid var(--fp-line);
}
.fp-feature:hover .fp-feature__img--icon{background:var(--fp-accent);color:#fff;border-bottom-color:var(--fp-accent);}
.fp-feature__img--icon .fp-i{--fp-icon:48px;--fp-icon-stroke:1.5;}
.fp-feature__body{padding:var(--fp-sp-6);text-align:center;}
.fp-feature__body small{
  color:var(--fp-muted);font-weight:600;display:block;margin-bottom:var(--fp-sp-2);
  font-size:var(--fp-fs-xs);letter-spacing:var(--fp-tracking-caps);text-transform:uppercase;
}
.fp-feature__body h3{color:var(--fp-heading);font-size:var(--fp-fs-xl);margin-bottom:var(--fp-sp-3);}
.fp-feature__body a{font-weight:600;color:var(--fp-accent-700);font-size:var(--fp-fs-sm);}
.fp-feature__body a:hover{color:var(--fp-accent);}

/* Community CTA — grey band. It sits directly above the orange subscribe strip
   and the charcoal footer, so keeping it light is what stops the page ending
   in three consecutive dark blocks. */
.fp-community{background:var(--fp-base-alt);color:var(--fp-text);border-top:1px solid var(--fp-line);}
.fp-community__inner{
  display:grid;grid-template-columns:320px 1fr auto;align-items:center;gap:var(--fp-sp-8);
  max-width:var(--fp-container);margin:0 auto;padding:var(--fp-sp-12) var(--fp-gutter);
}
.fp-community__img{border-radius:var(--fp-radius-md);overflow:hidden;}
.fp-community__text h2{color:var(--fp-heading);text-transform:uppercase;letter-spacing:var(--fp-tracking-wide);}
.fp-community__text p{font-size:var(--fp-fs-base);color:var(--fp-ink-500);margin:0;}
.fp-community .fp-btn{white-space:nowrap;}

/* =========================================================
   10. Product grid + cards
========================================================= */
/* Product cards on a white page separate by hairline, not by fill. */
.fp-prod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--fp-sp-4);}
.fp-prod-card{
  background:var(--fp-surface);border:1px solid var(--fp-line);border-radius:var(--fp-radius-md);
  overflow:hidden;display:flex;flex-direction:column;position:relative;color:var(--fp-text);
  transition:border-color .18s var(--fp-ease),box-shadow .18s var(--fp-ease),transform .18s var(--fp-ease);
}
.fp-prod-card:hover{box-shadow:var(--fp-shadow-lg);border-color:var(--fp-accent);transform:translateY(-3px);}
.fp-prod-card__badge{
  position:absolute;top:10px;left:10px;background:var(--fp-accent-cta);color:#fff;
  font-family:var(--fp-font-head);font-size:var(--fp-fs-2xs);font-weight:700;
  letter-spacing:var(--fp-tracking-caps);text-transform:uppercase;padding:4px 9px;border-radius:var(--fp-radius-xs);z-index:2;
}
.fp-prod-card__img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:var(--fp-sp-4);background:var(--fp-surface);overflow:hidden;}
.fp-prod-card__img img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply;transition:transform .25s var(--fp-ease);}
.fp-prod-card:hover .fp-prod-card__img img{transform:scale(1.04);}
.fp-prod-card__body{padding:var(--fp-sp-4);display:flex;flex-direction:column;flex:1;border-top:1px solid var(--fp-ink-100);}
.fp-prod-card__title{
  font-family:var(--fp-font-body);font-size:var(--fp-fs-sm);line-height:1.5;color:var(--fp-text);
  font-weight:500;margin:0 0 var(--fp-sp-2);min-height:40px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fp-prod-card__title a{color:var(--fp-text);}
.fp-prod-card__title a:hover{color:var(--fp-accent-cta-hover);}
.fp-prod-card__sku{font-size:var(--fp-fs-xs);color:var(--fp-muted);margin-bottom:var(--fp-sp-2);font-variant-numeric:tabular-nums;}
/* Price carries the accent: it is the number the buyer is scanning for, and on
   a white card the darker orange step keeps AA contrast. */
.fp-prod-card__price{
  font-family:var(--fp-font-head);color:var(--fp-accent-700);font-weight:700;font-size:var(--fp-fs-xl);
  margin:0 0 var(--fp-sp-3);font-variant-numeric:tabular-nums;letter-spacing:var(--fp-tracking-head);
}
.fp-prod-card__price del{color:var(--fp-ink-400);font-weight:400;font-size:var(--fp-fs-sm);margin-left:6px;}
.fp-prod-card__price ins{text-decoration:none;color:var(--fp-accent-700);}
.fp-prod-card__price .fp-noprice{color:var(--fp-ink-500);font-size:var(--fp-fs-md);font-weight:600;}
/* The quote button is the card's whole purpose — give it a real target size
   rather than the shared small-button padding. */
.fp-prod-card__actions{margin-top:auto;display:flex;flex-direction:column;gap:8px;}
.fp-prod-card__actions .fp-btn,.fp-loop-cta .fp-btn{padding:12px 16px;font-size:var(--fp-fs-sm);}
/* Woo appends a "View cart" link after an AJAX add — it belongs under the
   button, not inline where it shoves the card layout sideways. */
.fp-prod-card__actions .added_to_cart{
  font-size:var(--fp-fs-sm);font-weight:600;color:var(--fp-accent-cta);
  text-align:center;text-decoration:underline;text-underline-offset:3px;
}
.fp-prod-card__actions .add_to_cart_button.loading{opacity:.65;}

/* =========================================================
   11. Floating rails
========================================================= */
.fp-siderail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:var(--fp-sp-3);}
.fp-siderail__coupon{
  background:var(--fp-accent-cta);color:#fff;writing-mode:vertical-rl;text-orientation:mixed;
  padding:18px 11px;font-family:var(--fp-font-head);font-weight:700;letter-spacing:2px;
  border-radius:var(--fp-radius-md) 0 0 var(--fp-radius-md);box-shadow:var(--fp-shadow-lg);
}
.fp-siderail__coupon:hover{background:var(--fp-accent-cta-hover);color:#fff;}
.fp-rail{display:flex;flex-direction:column;border-radius:var(--fp-radius-md) 0 0 var(--fp-radius-md);overflow:hidden;box-shadow:var(--fp-shadow-lg);border:1px solid var(--fp-line);border-right:0;}
.fp-rail a{
  background:var(--fp-white);width:80px;padding:13px 6px;text-align:center;
  color:var(--fp-ink-600);font-size:var(--fp-fs-2xs);font-weight:500;
  display:flex;flex-direction:column;align-items:center;gap:5px;line-height:1.3;
  transition:background-color .16s var(--fp-ease),color .16s var(--fp-ease);
}
.fp-rail a + a{border-top:1px solid var(--fp-line);}
.fp-rail a:hover{color:#fff;background:var(--fp-accent-cta);}
.fp-rail a .fp-i{--fp-icon:21px;}

/* Floating social */
.fp-social-float{position:fixed;bottom:var(--fp-sp-6);z-index:95;display:flex;flex-direction:column;gap:10px;}
.fp-social-float.pos-left{left:var(--fp-sp-5);}
.fp-social-float.pos-right{right:90px;}
.fp-social-float a{
  width:48px;height:48px;border-radius:var(--fp-radius-pill);display:flex;align-items:center;
  justify-content:center;color:#fff;box-shadow:var(--fp-shadow-lg);
  transition:transform .18s var(--fp-ease);position:relative;
}
.fp-social-float a:hover{transform:scale(1.08);color:#fff;}
.fp-social-float .fp-i{--fp-icon:25px;}
.fp-social-float .wa{background:#25d366;} .fp-social-float .tg{background:#229ed9;}
.fp-social-float .mail{background:var(--fp-ink-700);} .fp-social-float .tel{background:var(--fp-accent-cta);}
.fp-social-float .wx{background:#09b83e;} .fp-social-float .ig{background:#e1306c;}
.fp-social-float .fb{background:#1877f2;}
.fp-social-float .tip{
  position:absolute;right:60px;top:50%;transform:translateY(-50%);white-space:nowrap;
  background:var(--fp-ink-900);color:#fff;font-size:var(--fp-fs-xs);padding:5px 10px;
  border-radius:var(--fp-radius);opacity:0;visibility:hidden;transition:opacity .18s var(--fp-ease),visibility .18s;
}
.fp-social-float.pos-left .tip{right:auto;left:60px;}
.fp-social-float a:hover .tip{opacity:1;visibility:visible;}
.fp-wx-pop{position:fixed;inset:0;background:rgba(16,19,22,.6);z-index:130;display:none;align-items:center;justify-content:center;}
.fp-wx-pop.is-open{display:flex;}
.fp-wx-pop__box{background:var(--fp-white);padding:var(--fp-sp-6);border-radius:var(--fp-radius-lg);text-align:center;}
.fp-wx-pop__box img{width:220px;height:220px;object-fit:contain;}

/* =========================================================
   12. Subscribe + footer
========================================================= */
/* Conversion band — carries the accent at scale, between the light
   content area and the dark footer. */
/* Vivid: the only text on it is the 27px display heading, which clears AA for
   large text on the bright step. */
.fp-subscribe{background:var(--fp-accent-600);color:#fff;}
.fp-subscribe__inner{
  max-width:var(--fp-container);margin:0 auto;padding:var(--fp-sp-12) var(--fp-gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--fp-sp-6);flex-wrap:wrap;
}
.fp-subscribe h3{margin:0;font-size:var(--fp-fs-2xl);color:#fff;text-transform:uppercase;letter-spacing:var(--fp-tracking-wide);}
.fp-subscribe form{display:flex;gap:var(--fp-sp-3);flex:1;max-width:520px;}
.fp-subscribe input{
  flex:1;border:1px solid transparent;border-radius:var(--fp-radius);
  padding:11px 16px;font-size:var(--fp-fs-base);font-family:var(--fp-font-body);outline:0;background:var(--fp-white);
}
.fp-subscribe input:focus{border-color:var(--fp-ink-900);}
/* On the orange band the primary button must invert to stay legible */
.fp-subscribe .fp-btn-primary{background:var(--fp-ink-900);border-color:var(--fp-ink-900);color:#fff;}
.fp-subscribe .fp-btn-primary:hover{background:#000;border-color:#000;}

.fp-footer{background:var(--fp-footer);color:var(--fp-on-footer-soft);border-top:3px solid var(--fp-accent);}
.fp-footer a{color:var(--fp-on-footer-soft);}
.fp-footer a:hover{color:var(--fp-accent-on-dark);}
.fp-footer__cols{
  max-width:var(--fp-container);margin:0 auto;padding:var(--fp-sp-12) var(--fp-gutter) var(--fp-sp-8);
  display:grid;grid-template-columns:repeat(4,1fr) 1.25fr;gap:var(--fp-sp-8);
}
.fp-footer__col h4{
  color:var(--fp-on-footer);font-size:var(--fp-fs-md);margin-bottom:var(--fp-sp-4);
  letter-spacing:var(--fp-tracking-caps);text-transform:uppercase;position:relative;padding-bottom:var(--fp-sp-3);
}
.fp-footer__col h4::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;background:var(--fp-accent);}
.fp-footer__col li{margin-bottom:9px;font-size:var(--fp-fs-sm);}
.fp-footer__contact p{font-size:var(--fp-fs-sm);margin-bottom:var(--fp-sp-3);display:flex;gap:var(--fp-sp-2);align-items:flex-start;}
.fp-footer__contact .fp-i{--fp-icon:17px;color:var(--fp-accent);margin-top:3px;}
.fp-footer__social{display:flex;gap:var(--fp-sp-2);margin-top:var(--fp-sp-4);}
.fp-footer__social a{
  width:38px;height:38px;border-radius:var(--fp-radius);background:var(--fp-accent-cta);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background-color .18s var(--fp-ease);
}
.fp-footer__social a:hover{background:var(--fp-accent-cta-hover);color:#fff;}
.fp-footer__social .fp-i{--fp-icon:var(--fp-icon-sm);}
.fp-footer__bottom{border-top:1px solid var(--fp-footer-line);background:var(--fp-footer-2);}
.fp-footer__bottom-inner{
  max-width:var(--fp-container);margin:0 auto;padding:var(--fp-sp-5) var(--fp-gutter);
  display:flex;justify-content:space-between;gap:var(--fp-sp-4);flex-wrap:wrap;
  font-size:var(--fp-fs-sm);color:var(--fp-on-footer-soft);
}
.fp-footer__bottom-inner a{color:var(--fp-on-footer-soft);}
.fp-payments{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.fp-payments span{
  background:var(--fp-footer-line);border-radius:var(--fp-radius-xs);padding:4px 8px;
  font-size:var(--fp-fs-2xs);font-weight:700;color:#fff;
  font-family:var(--fp-font-head);letter-spacing:.04em;
}

/* =========================================================
   13. Pages / blog / sidebar
========================================================= */
.fp-page{padding:var(--fp-section-y) 0;background:var(--fp-base);}
.fp-page__head{position:relative;background:var(--fp-base-alt);color:var(--fp-text);padding:var(--fp-sp-10) 0;border-bottom:3px solid var(--fp-accent);}
.fp-page__head h1{position:relative;z-index:1;color:var(--fp-heading);font-size:var(--fp-fs-4xl);margin:0;text-transform:uppercase;letter-spacing:var(--fp-tracking-wide);}
.fp-page__head .fp-container{position:relative;z-index:1;}
.fp-page__head-sub{margin-top:var(--fp-sp-3);font-size:var(--fp-fs-lg);color:var(--fp-ink-500);max-width:70ch;}
.fp-page__head-sub p:last-child{margin-bottom:0;}
/* Category banner art. The photo is a category thumbnail shot for a product
   grid, not a banner, so it gets blurred and washed out — it is texture behind
   the heading, never something the reader is asked to look at. */
.fp-page__head--photo{background-size:cover;background-position:center;padding:clamp(36px,4vw,64px) 0;}
.fp-page__head--photo::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 45%,rgba(255,255,255,.62) 100%);
  backdrop-filter:blur(4px);
}
.fp-breadcrumb{font-size:var(--fp-fs-sm);color:var(--fp-muted-dark);margin-bottom:var(--fp-sp-3);}
.fp-breadcrumb a{color:var(--fp-muted-dark);}
.fp-breadcrumb a:hover{color:var(--fp-accent-cta);}
/* Slim breadcrumb bar (single product — no page banner there) */
.fp-crumbbar{background:var(--fp-base-alt);border-bottom:1px solid var(--fp-line);}
.fp-crumbbar .fp-container{padding-top:var(--fp-sp-3);padding-bottom:var(--fp-sp-3);}
.fp-crumbbar,.fp-crumbbar a{font-size:var(--fp-fs-sm);color:var(--fp-muted-dark);}
.fp-crumbbar a:hover{color:var(--fp-accent-cta);}

/* 主要内容区 — signal white, the one place long-form text lives. */
.fp-content{
  max-width:78ch;margin:0 auto;background:var(--fp-surface);color:var(--fp-text);
  padding:clamp(24px,3vw,52px);border-radius:var(--fp-radius-md);border:1px solid var(--fp-line);
}
.fp-content h1,.fp-content h2,.fp-content h3,.fp-content h4{color:var(--fp-heading);}
.fp-content img{border-radius:var(--fp-radius);margin:var(--fp-sp-4) 0;}
.fp-content h2{margin-top:1.5em;}
.fp-content > *:first-child{margin-top:0;}
/* `:not(.fp-btn)` matters: this rule is (0,2,0) and would otherwise repaint a
   button's label accent-orange on its own orange fill — the label vanished. */
.fp-content a:not(.fp-btn){color:var(--fp-accent-700);text-decoration:underline;text-underline-offset:2px;}

.fp-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fp-sp-6);}
.fp-post-card{
  background:var(--fp-surface);color:var(--fp-text);border:1px solid var(--fp-line);border-radius:var(--fp-radius-md);
  overflow:hidden;transition:box-shadow .18s var(--fp-ease),border-color .18s var(--fp-ease),transform .18s var(--fp-ease);
}
.fp-post-card:hover{box-shadow:var(--fp-shadow-lg);border-color:var(--fp-accent);transform:translateY(-3px);}
/* Rendered as an <a>, so display:block is required for height to apply. */
.fp-post-card__img{display:block;height:190px;background:var(--fp-ink-100);overflow:hidden;}
.fp-post-card__img img{width:100%;height:100%;object-fit:cover;}
.fp-post-card__body{padding:var(--fp-sp-5);}
.fp-post-card__body h3{font-size:var(--fp-fs-lg);color:var(--fp-heading);}
.fp-post-card__body a{color:var(--fp-heading);}
.fp-post-card__body a:hover{color:var(--fp-accent-cta-hover);}
.fp-post-card__meta{font-size:var(--fp-fs-xs);color:var(--fp-muted);margin-bottom:var(--fp-sp-2);}

/* 侧边栏 takes the grey panel fill so it reads as chrome beside white content. */
.fp-sidebar{display:flex;flex-direction:column;gap:var(--fp-sp-5);}
.fp-widget{background:var(--fp-panel);border:1px solid var(--fp-line);border-radius:var(--fp-radius-md);padding:var(--fp-sp-5);color:var(--fp-ink-600);}
.fp-widget__title{
  font-size:var(--fp-fs-md);margin:0 0 var(--fp-sp-3);color:var(--fp-heading);
  letter-spacing:var(--fp-tracking-caps);text-transform:uppercase;padding-bottom:var(--fp-sp-2);
  border-bottom:2px solid var(--fp-accent);
}
.fp-widget li{padding:6px 0;font-size:var(--fp-fs-sm);}

/* A–Z index (All Brands) */
.fp-azbar{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--fp-sp-8);
  padding-bottom:var(--fp-sp-4);border-bottom:1px solid var(--fp-line);
}
.fp-azbar a{
  min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--fp-line-strong);border-radius:var(--fp-radius);
  font-family:var(--fp-font-head);font-weight:700;color:var(--fp-ink-600);background:var(--fp-white);
}
.fp-azbar a:hover{background:var(--fp-accent-cta);border-color:var(--fp-accent-cta);color:#fff;}
.fp-azgroup{margin-bottom:var(--fp-sp-10);scroll-margin-top:110px;}
.fp-azgroup > h2{
  font-size:var(--fp-fs-2xl);margin-bottom:var(--fp-sp-4);color:var(--fp-accent-cta);
  border-bottom:2px solid var(--fp-line);padding-bottom:var(--fp-sp-2);
}
.fp-azcopy{margin-top:var(--fp-sp-10);}

.fp-pagination{display:flex;gap:6px;justify-content:center;margin-top:var(--fp-sp-10);}
.fp-pagination .page-numbers{
  display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;
  border:1px solid var(--fp-line-strong);border-radius:var(--fp-radius);padding:0 12px;
  color:var(--fp-ink-600);background:var(--fp-white);font-weight:600;font-size:var(--fp-fs-sm);
}
.fp-pagination .page-numbers.current{background:var(--fp-accent-cta);color:#fff;border-color:var(--fp-accent-cta);}
.fp-pagination .page-numbers:hover:not(.current){border-color:var(--fp-accent);color:var(--fp-accent-cta);}

/* =========================================================
   14. Responsive
========================================================= */
/* Section rhythm, gutters and every display step are fluid (clamp) now, so the
   breakpoints below only re-flow grids — no more re-declaring type scales. */
@media(max-width:1200px){
  .fp-catgrid{--fp-catcols:4;}
  .fp-prod-grid{grid-template-columns:repeat(4,1fr);}
  .fp-brands{grid-template-columns:repeat(5,1fr);}
  .fp-typecats{grid-template-columns:repeat(2,1fr);}
  .fp-mega__inner{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:992px){
  .fp-search{order:3;flex:1 1 100%;max-width:none;}
  .fp-topbar__inner{flex-wrap:wrap;gap:var(--fp-sp-4);}
  .fp-hero__grid{grid-template-columns:1fr;}
  .fp-hero__aside{flex-direction:row;flex-wrap:wrap;}
  .fp-hero__feat{flex:1 1 30%;}
  .fp-community__inner{grid-template-columns:1fr;text-align:center;}
  .fp-community__img{max-width:340px;margin:0 auto;}
  .fp-footer__cols{grid-template-columns:repeat(2,1fr);}
  .fp-equip{grid-template-columns:repeat(3,1fr);}
  .fp-reviews__grid{grid-template-columns:1fr;}
  .fp-features{grid-template-columns:1fr;}
  .fp-cat-toggle{display:none;}
  .fp-mega__inner{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .fp-catgrid{--fp-catcols:3;}
  .fp-prod-grid{grid-template-columns:repeat(2,1fr);}
  .fp-brands{grid-template-columns:repeat(3,1fr);}
  .fp-promos{grid-template-columns:1fr;}
  .fp-selectmodel span{display:none;}
  .fp-menu{display:none;}
  .fp-mobile-toggle{display:inline-flex;}
  .fp-navbar{display:none;}
  .fp-hero__caption{max-width:70%;}
  /* Stack the hero feature list — three across is unreadable on a phone */
  .fp-hero__aside{flex-direction:column;gap:var(--fp-sp-4);}
  .fp-hero__feat{flex:1 1 auto;}
  .fp-hero__slide img,.fp-hero__slide-bg{height:300px;}
  .fp-footer__cols{grid-template-columns:1fr;}
  .fp-posts{grid-template-columns:1fr;}
  .fp-mobile-drawer{inset:0 12% 0 0;}
}
@media(max-width:576px){
  .fp-catgrid{--fp-catcols:2;}
  .fp-typecats{grid-template-columns:1fr;}
  .fp-equip{grid-template-columns:repeat(2,1fr);}
  .fp-equip--catalog .fp-equipcard{min-height:190px;}
  .fp-siderail{display:none;}
  .fp-subscribe__inner{flex-direction:column;align-items:stretch;}
  .fp-subscribe form{max-width:none;}

  /* Phone header — `.fp-topbar__inner` already wraps, so nothing here is
     fixing an overflow; it is only keeping the row count down. Select Model is
     the widest control and the drawer already exposes the full category tree,
     so it is the one thing dropped. Wishlist / account / cart / region stay:
     they have no equivalent in the drawer. */
  .fp-topbar__inner{gap:var(--fp-sp-3);}
  .fp-logo__text{font-size:23px;}
  .fp-logo__mark{width:30px;height:30px;}
  .fp-logo__mark .fp-i{--fp-icon:18px;}
  .fp-selectmodel{display:none;}
  .fp-header-actions{gap:var(--fp-sp-3);min-width:0;}
  .fp-logo{min-width:0;}

  /* Category labels run longer than a phone viewport; nowrap would force the
     tab rail wider than the screen instead of letting the label break. */
  .fp-cattabs__tab{white-space:normal;text-align:center;}
  .fp-promo__body,.fp-promo--flat .fp-promo__body{max-width:100%;padding:var(--fp-sp-6);}
  /* The side rail it used to clear is hidden at this width. */
  .fp-social-float.pos-right{right:var(--fp-sp-4);}

  .fp-model-selector{padding:var(--fp-sp-3);align-items:end;}
  .fp-model-selector__dialog{width:100%;max-height:92vh;padding:var(--fp-sp-8) var(--fp-sp-5);border-radius:var(--fp-radius-lg) var(--fp-radius-lg) 0 0;}
  .fp-model-selector__form{grid-template-columns:1fr;}
  .fp-model-selector__form label:nth-of-type(1),.fp-model-selector__form label:nth-of-type(2){grid-column:auto;grid-row:auto;}
  .fp-model-selector__form select{grid-column:auto;}
  .fp-model-selector__actions{align-items:stretch;flex-direction:column;}
  .fp-model-selector__actions .fp-btn{width:100%;}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}