/* --- boxed layout, matching the homepage column ---
   Two wrappers need it, not one: .container carries the header, breadcrumb and
   page title, while the main content (product grid, sort bar) sits in
   .page-container. Boxing only .container left the grid running full-bleed
   under a boxed heading. */
.container,
.page-container{
  max-width:1240px !important;
  margin-left:auto !important;margin-right:auto !important;
  padding-left:20px !important;padding-right:20px !important}
/* the product grid uses negative gutters; keep it inside the column */
.woocommerce .products{margin-left:0 !important;margin-right:0 !important}

/* --- sticky bar: part search + tractor picker, on white --- */
.bl-topbar-hidden{display:none !important}
/* #faf9f7 - the same off-white as the "Your tractor" lane on the homepage.
   On a near-white bar the search field needs the hairline the picker fields
   already have, or it disappears into the background. */
.bl-topbar{background:#faf9f7 !important;border-bottom:1px solid #e4e2dd;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  transition:transform .25s ease, opacity .25s ease}

/* On the homepage the bar duplicates the hero search and the machine pickers,
   so it stays out of the way until the reader has scrolled past both. On every
   other page there is nothing to duplicate and it behaves as before. Default
   hidden in CSS rather than by script, so it cannot flash in before the scroll
   handler has run. */
/* Not scoped to the homepage. It was, which is why the header gate had no
   effect anywhere else: gate() was correctly withholding .bl-topbar-show on a
   product page, but with no matching rule the bar stayed opaque anyway.

   Hidden by default and revealed by the class, so if the script ever fails to
   run the bar stays out of sight rather than appearing unstyled - the failure
   direction we want.

   !important on both: Elementor's own sticky effects set transform and opacity
   on this element with !important, so plain declarations matched and still
   lost. */
.bl-topbar{
  transform:translateY(-100%) !important;opacity:0 !important;pointer-events:none}
.bl-topbar.bl-topbar-show{
  transform:none !important;opacity:1 !important;pointer-events:auto}

/* Mobile. Two icons in the bar - categories left, search right - each opening
   a panel underneath. Measured at 390px: search field 217px plus its button
   111px plus 40px padding is 368 of 390, so nothing else fits inline. Putting
   both searches in a panel also gives the machine picker room to stack, which
   it never had.

   The bar itself used to be hidden outright at this width, because the old
   detection measured the element and failed once it wrapped, leaving the raw
   legacy block on screen. Detection targets the container directly now, so the
   bar is styled at every width and can stay. */
@media (max-width:1100px){
  .bl-topbar .e-con-inner{
    flex-wrap:wrap !important;gap:0 !important;padding:0 !important;position:relative}

  .bl-tb-mob{
    display:flex !important;justify-content:space-between;align-items:center;
    flex:1 1 100%;padding:8px 12px;line-height:0}
  .bl-tb-mob-btn{
    /* 52 wide, not 44. The hamburger's drawn lines are 23px across, which left
       only 11px of green either side once the icon went up to 30px - the fill
       looked pinched around the glyph. 52 gives 14-15px, and the height stays
       at 44 so the bar does not grow. */
    width:52px;height:44px;               /* still a full touch target */
    display:flex;align-items:center;justify-content:center;padding:0;line-height:0;
    background:none;border:0;border-radius:10px;color:#1c1c1c;cursor:pointer;
    transition:background-color .12s ease,color .12s ease}
  .bl-tb-mob-btn:hover,
  .bl-tb-mob-btn:focus-visible{background:#204f46;color:#fff}
  /* open state: dark green with a white icon, so it reads as an active control
     rather than a hover tint */
  .bl-tb-mob-btn[aria-expanded="true"]{background:#204f46;color:#fff}
  .bl-tb-mob-btn[aria-expanded="true"]:hover{background:#1a4039}
  /* stroke, not fill - the payment icons taught us svg does not inherit colour.
     display:block matters too: an inline svg sits on the text baseline, which
     pushes it a couple of pixels off centre against the logo beside it. */
  .bl-tb-mob-btn svg{
    display:block;width:24px;height:24px;
    fill:none;stroke:currentColor;stroke-width:2}
  /* The theme's own mobile toggle (.ts-mobile-icon-toggle) is 40x30, so the
     hamburger reads small beside it at 24. Matching its width means the bar
     looks like a continuation of the header it replaces rather than a different
     control. Stroke thinned a touch so the glyph does not get heavier as it
     grows. */
  #bl-tb-menu-btn .bl-tb-ico{width:30px;height:30px;stroke-width:1.8}
  /* the icon and the cross swap on the same attribute that announces the state */
  .bl-tb-mob-btn .bl-tb-ico-x{display:none}
  .bl-tb-mob-btn[aria-expanded="true"] .bl-tb-ico{display:none}
  .bl-tb-mob-btn[aria-expanded="true"] .bl-tb-ico-x{display:block}

  .bl-tb-logo{display:flex;align-items:center;justify-content:center;
    flex:0 1 auto;min-width:0;padding:0 8px;text-decoration:none;line-height:0}
  .bl-tb-logo img{max-height:26px;width:auto;display:block}

  /* the two panels, closed by default */
  .bl-topbar .bl-topbar-search,
  .bl-topbar .bl-topbar-machine,
  .bl-topbar .bl-tb-cats{
    display:none !important;flex:1 1 100%;padding:0 12px 12px}
  .bl-topbar.bl-tb-open-search .bl-topbar-search,
  .bl-topbar.bl-tb-open-search .bl-topbar-machine{display:flex !important}
  .bl-topbar.bl-tb-open-menu .bl-tb-cats{display:block !important}

  /* the picker finally has room to stack */
  .bl-topbar .bl-topbar-machine{flex-direction:column;gap:8px;padding-top:0}
  .bl-topbar .bl-topbar-machine .bl-tb-combo{flex:1 1 auto;width:100%}
  .bl-topbar .bl-topbar-machine #bl-tb-go{width:100%}
  /* in the panel the search must fill the row - inline in the bar it was
     sized against the picker, which is not there any more */
  .bl-topbar .bl-topbar-search{flex:1 1 100% !important;max-width:none !important}
  /* .elementor-widget-container is the wrapper Elementor puts between the
     widget and the plugin's own markup. It shrank to 343px inside a 532px row
     and capped everything below it, so it has to be in this list too. */
  .bl-topbar .bl-topbar-search > .elementor-widget-container,
  .bl-topbar .aws-container,
  .bl-topbar .aws-search-form,
  .bl-topbar .aws-wrapper{width:100% !important;max-width:none !important}
  .bl-topbar .bl-topbar-search > .elementor-widget-container{flex:1 1 auto}
  .bl-topbar .aws-search-form{display:flex !important;gap:8px}
  .bl-topbar .aws-wrapper{flex:1 1 auto !important;min-width:0}
  .bl-topbar .bl-search-submit{flex:0 0 auto !important}
  .bl-topbar .aws-search-field{font-size:16px !important}  /* 16px stops iOS zooming on focus */

  .bl-tb-cats{max-height:60vh;overflow-y:auto}
  .bl-tb-cat-group{padding:0 0 10px}
  .bl-tb-cats h5{
    font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;
    font-size:12px;letter-spacing:.13em;color:#6b6b6b;margin:10px 0 6px}
  /* list-style has to go on the li as well as the ul - the theme sets disc on
     the item, so clearing it on the list alone left a bullet above every row */
  .bl-tb-cats ul{list-style:none;margin:0;padding:0}
  .bl-tb-cats li{margin:0;padding:0;list-style:none}
  .bl-tb-cats li::marker{content:none}
  /* One row height for both groups. The "Shop the range" rows carry a second
     line of description and came out 64px against 43px for the plain ones, so
     the two blocks read as different lists. A min-height plus centring gives
     them the same rhythm without padding the descriptions apart. */
  .bl-tb-cats a{
    display:flex;flex-direction:column;justify-content:center;
    min-height:64px;box-sizing:border-box;
    padding:11px 0;text-decoration:none;color:#1c1c1c;
    border-bottom:1px solid #e4e2dd}
  .bl-tb-cats a span{display:block;font-size:15.5px;font-weight:600}
  .bl-tb-cats a em{display:block;font-style:normal;font-size:13px;color:#6b6b6b;margin-top:1px}
  .bl-tb-cats a:active{color:#204f46}

  /* --- mobile menu: a drill-down over the same routes as the desktop cascade.
     Two stacked levels; level 1 slides out of the way rather than unmounting,
     so returning is instant and the scroll position is not lost. --- */
  /* The drill-down now lives in the theme's mobile sidebar as well as being
     reachable from the sticky bar, so its styling cannot be nested under
     .bl-tb-cats any more. */
  .bl-mm{position:relative}
  .bl-mm-l1{display:block}
  .bl-mm.is-in .bl-mm-l1{display:none}
  .bl-mm-l2{display:none}
  .bl-mm-l2.is-on{display:block}

  .bl-mm-row{
    display:flex !important;align-items:center;gap:10px;
    padding:13px 16px 13px 18px !important;border-bottom:1px solid #eceae5;
    text-decoration:none !important;color:#1c1c1c}
  .bl-mm-row:last-child{border-bottom:0}
  .bl-mm-n{flex:1 1 auto;min-width:0;font-size:15.5px;font-weight:600;line-height:1.3}
  .bl-mm-c{flex:none;font-size:12px;color:#8a8a8a;font-variant-numeric:tabular-nums}
  /* A plus, not a chevron. A chevron says "this goes somewhere"; these rows
     open in place, and a plus is the sign people already read as "more inside".
     Built from two bars so it stays crisp and takes the row's colour. */
  .bl-mm-arw{
    flex:none;position:relative;width:13px;height:13px;
    border:0;transform:none;margin-left:2px;color:#9aa4a0}
  .bl-mm-arw::before,
  .bl-mm-arw::after{content:"";position:absolute;background:currentColor;border-radius:1px}
  .bl-mm-arw::before{left:0;right:0;top:5.5px;height:2px}
  .bl-mm-arw::after{top:0;bottom:0;left:5.5px;width:2px}
  .bl-mm-row:active{color:#204f46}
  .bl-mm-row:active .bl-mm-arw{color:#204f46}
  .bl-mm-rule{height:1px;background:#e4e2dd;margin:10px 16px 10px 18px}

  .bl-mm-back{
    display:flex;align-items:center;gap:8px;width:100%;
    background:none;border:0;border-bottom:1px solid #eceae5;
    padding:12px 16px 12px 18px;margin:0 0 2px;
    font:inherit;font-size:14px;font-weight:600;color:#204f46;cursor:pointer;text-align:left}
  .bl-mm-back::before{
    content:"";width:8px;height:8px;border-left:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg);flex:none}
  .bl-tb-cat-group:last-child a{font-weight:500}
}

/* Above the breakpoint none of the icon-mode chrome shows - no hamburger, no
   magnifier, and no logo. The bar there is search plus the machine picker, and
   the site header is a scroll away above it.

   The bar still waits for the header to scroll off (see gate()), so it replaces
   the header rather than sitting on top of it. That gate is why the theme's
   86px header reserve could go: nothing needs the room any more. */
@media (min-width:1101px){
  .bl-tb-mob,.bl-tb-cats{display:none !important}
}
.bl-topbar .e-con-inner{
  display:flex !important;align-items:center;gap:12px;flex-wrap:nowrap;
  max-width:1240px;margin:0 auto;padding:13px 20px !important;width:100%}
.bl-topbar .bl-topbar-search{flex:0 0 340px;max-width:340px;min-width:0}
.bl-topbar .aws-container{width:100%}
/* the 🚜 in front of the field is a ::before on the wrapper */
.bl-topbar .aws-wrapper::before{content:none !important;display:none !important}

/* tractor picker, injected beside the search */
/* the Elementor HTML widget that now carries the picker - it needs to flex
   like the element it replaced, and Elementor gives widgets width:100% */
.bl-topbar .bl-topbar-pick{flex:1 1 auto;min-width:0;width:auto;display:flex}
.bl-topbar .bl-topbar-pick > .elementor-widget-container{flex:1 1 auto;min-width:0;display:flex}
.bl-topbar-machine{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.bl-topbar-machine .bl-tb-combo{position:relative;flex:1 1 170px;min-width:0}
/* Every control in the bar is pinned to one height and shape.
   The theme styles input[type=text] at a higher specificity than a plain
   .bl-topbar-machine input, which is why an earlier attempt at 8px corners and
   56px height never applied - the fields stayed 40px with square corners while
   the button sat at 56. Setting height explicitly, rather than deriving it from
   padding and line-height, keeps them identical whatever the theme does. */
.bl-topbar .bl-topbar-machine input[type="text"]{
  width:100% !important;height:56px !important;
  padding:0 14px !important;line-height:normal !important;
  border:1px solid #dcdad6 !important;border-radius:8px !important;
  font-family:inherit !important;font-size:15px !important;
  background:#fff !important;color:#1c1c1c !important;
  min-height:0 !important;margin:0 !important;box-shadow:none !important;box-sizing:border-box}
.bl-topbar .bl-topbar-machine input[type="text"]:focus{
  outline:2px solid #a3784b;outline-offset:-2px;border-color:#a3784b !important}
.bl-topbar .bl-topbar-machine input[type="text"]:disabled{
  background:#f4f3f1 !important;color:#9a9a9a !important}
.bl-topbar-machine input:disabled{background:#f4f3f1;color:#9a9a9a}
.bl-topbar-machine ul{
  position:absolute;z-index:500;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;
  list-style:none;background:#fff;border:1px solid #cfcdc8;border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.14);max-height:300px;overflow-y:auto}
.bl-topbar-machine li{display:flex;justify-content:space-between;gap:10px;
  padding:9px 11px;border-radius:5px;cursor:pointer;font-size:14px;color:#1c1c1c}
.bl-topbar-machine li em{font-style:normal;font-size:11.5px;color:#6b6b6b;font-variant-numeric:tabular-nums}
.bl-topbar-machine li:hover,.bl-topbar-machine li.is-active{background:#204f46;color:#fff}
.bl-topbar-machine li:hover em,.bl-topbar-machine li.is-active em{color:rgba(255,255,255,.75)}
.bl-topbar-machine .bl-tb-none{color:#6b6b6b;cursor:default;font-size:13.5px}
/* clear (x), same as the homepage picker */
.bl-topbar .bl-topbar-machine .bl-tb-clear{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none !important;border:0 !important;padding:4px 7px !important;
  font-size:20px;line-height:1;color:#6b6b6b;cursor:pointer;border-radius:4px;
  height:auto !important;width:auto !important;min-height:0 !important}
.bl-topbar .bl-topbar-machine .bl-tb-clear:hover{color:#1c1c1c;background:#efedea !important}
/* room for the x so long model names do not run under it */
.bl-topbar .bl-topbar-machine input[type="text"]{padding-right:34px !important}
.bl-topbar .bl-topbar-machine #bl-tb-go{
  flex:0 0 auto;background:#204f46;color:#fff;border:1px solid #204f46;border-radius:8px;
  height:56px !important;padding:0 24px !important;line-height:normal !important;
  font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap;box-sizing:border-box}
.bl-topbar-machine #bl-tb-go:disabled{opacity:.4;cursor:not-allowed}
.bl-topbar-machine #bl-tb-go:hover:not(:disabled){filter:brightness(1.08)}
/* The picker used to be simply hidden here, which left 768-1100px with no
   picker and no way to reach one - a dead zone between the full bar and the
   icon treatment. Both now live in the search panel below 1100px, so one
   breakpoint governs and there is no gap. */
@media (max-width:1100px){
  .bl-topbar .bl-topbar-search{flex:1 1 auto;max-width:none}
}
/* dressed like the hero search, at bar scale */
/* The form itself must contribute nothing visible: its white background was
   showing as a pale rim around the field and the button, which the two picker
   inputs did not have. Transparent, no padding, no border - the input and the
   button supply the colour, and the radius clips their outer corners. */
.bl-topbar .aws-search-form{
  display:flex !important;height:56px !important;align-items:stretch;
  background:transparent !important;padding:0 !important;
  border:1px solid #dcdad6 !important;   /* the hairline the picker fields carry */
  border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box}
/* AWS puts a 2px #ccc border on .aws-wrapper, and that wrapper spans the whole
   field-and-button unit - it was the grey rim around the search box, and the
   reason it measured 60px against everything else's 56px. */
.bl-topbar .aws-wrapper{
  border:0 !important;border-radius:0 !important;background:#fff !important;height:56px !important}
.bl-topbar .aws-wrapper{position:relative;flex:1;min-width:0;display:flex;height:auto;overflow:visible}
.bl-topbar input.aws-search-field{
  flex:1;width:100%;min-width:0;border:0 !important;border-radius:0 !important;
  height:56px !important;padding:0 44px 0 16px !important;line-height:normal !important;
  font-size:15px !important;font-family:inherit;background:#fff;color:#1c1c1c;
  min-height:0 !important;margin:0 !important;box-sizing:border-box}
.bl-topbar input.aws-search-field:focus{outline:0;background:#fff}
.bl-topbar .bl-search-submit,
.bl-topbar .aws-search-btn,
.bl-topbar button[type="submit"]{
  flex:0 0 auto;border:0 !important;border-radius:0 !important;
  background:#204f46 !important;color:#fff !important;
  font-weight:700 !important;font-size:14px !important;letter-spacing:.02em;
  padding:0 26px !important;cursor:pointer;height:56px !important;min-height:0 !important;width:auto !important}
.bl-topbar .bl-search-submit:hover,
.bl-topbar .aws-search-btn:hover{filter:brightness(1.08)}
/* clear (x) centred against the taller field, as on the homepage */
/* margin-right:84px was left over from when the SEARCH button lived inside the
   wrapper - setting only margin-top left it in place and pushed the x 84px
   short of the field's edge. The spinner needs the same treatment. */
/* flex-centred rather than line-height-centred. The x glyph (U+00D7) sits high
   in its em box, so a 30px line-height put the ink above the middle even though
   the box measured centred. Centring the box and letting the glyph size itself
   at line-height:1 puts the ink where the eye expects it. */
.bl-topbar .aws-search-form .aws-search-clear{
  top:50% !important;bottom:auto !important;right:8px !important;left:auto !important;
  height:30px !important;width:34px !important;margin:-15px 0 0 0 !important;
  padding:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important}
.bl-topbar .aws-search-form .aws-loader{
  right:14px !important;left:auto !important;top:50% !important;
  margin:-10px 0 0 0 !important}
/* transform:none and background:none matter. AWS puts translateY(-15px) and a
   30x30 grey fill (rgb(224,224,224)) on this span, which is what drew a grey
   square 15px above the field's centre line, between the field and the SEARCH
   button. The parent div was correctly centred all along, which is why
   measuring it said everything was fine. */
.bl-topbar .aws-search-form .aws-search-clear span{
  position:static !important;top:auto !important;margin:0 !important;
  transform:none !important;background:none !important;
  border:0 !important;padding:0 !important;
  display:block !important;font-size:20px !important;line-height:1 !important;
  color:#6b6b6b !important}
.bl-topbar .aws-search-form .aws-search-clear:hover span{color:#1c1c1c !important}
.bl-topbar .aws-search-result{z-index:400;text-align:left}

/* "View all results" at the foot of the AJAX dropdown. AWS ships it as a plain
   blue link (rgb(33,117,155)) in a 55px row, which read as one more result
   rather than the way out of the list. Dressed as the SEARCH button - same
   #204f46, same white label. This lives in the site-wide sheet, not the
   homepage one: the same dropdown opens from the sticky bar and the mobile
   panel on every page. Unscoped for the same reason - an earlier version was
   glued to `.hv2 .hv2-search-aws .aws-search-form`, so it only ever painted
   the hero. */
.aws-search-result .aws_search_more,
.aws-search-result a.aws_result_item.aws_search_more{
  display:block !important;
  background:#204f46 !important;
  color:#fff !important;
  text-align:center !important;
  font-weight:700 !important;
  font-size:13.5px !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  border:0 !important;
  padding:14px 15px !important;
  transition:background-color .12s ease}
.aws-search-result .aws_search_more:hover,
.aws-search-result a.aws_result_item.aws_search_more:hover{
  background:#1a4039 !important;color:#fff !important}

/* --- "Sort by", and select boxes generally --------------------------------
   Moved here from the archive stylesheet, which fixed two faults at once.
   It only loaded on archive pages, so the same control on cart and checkout
   kept the theme's square dark box; and the colours it used (--c-green,
   --c-tan) are declared on `.woocommerce .products`, which this control sits
   outside - so every var() in it resolved to nothing. That is why hovering an
   option turned the label white with no background behind it: white on white.
   Literal hex below, so the rules cannot depend on a variable scope they are
   not inside. */
.woocommerce-ordering{display:flex;align-items:center;gap:10px}
.woocommerce-ordering > span{font-size:13.5px;color:#6b6b6b}
.woocommerce-ordering ul.orderby,
.product-per-page-form ul.perpage{position:relative;margin:0;padding:0;list-style:none}
.woocommerce-ordering ul.orderby > li,
.product-per-page-form ul.perpage > li{
  display:flex !important;align-items:center !important;position:relative;
  margin:0;list-style:none;height:42px;padding:0 14px !important;
  border:1px solid #dcdad6 !important;border-radius:8px !important;
  background:#fff !important;line-height:1 !important;
  cursor:pointer;transition:border-color .15s}
.woocommerce-ordering ul.orderby > li:hover,
.woocommerce-ordering ul.orderby > li:focus-within,
.product-per-page-form ul.perpage > li:hover{
  border-color:#a3784b !important;background:#fff !important;color:#1c1c1c !important}

/* Reset only the closed control's own label. An earlier version used `li *`,
   which also matched the option links inside the panel and wiped their hover
   background while leaving the white text - the disappearing-text bug. */
.woocommerce-ordering .orderby-current,
.product-per-page-form .perpage-current{
  display:flex !important;align-items:center !important;
  height:100% !important;line-height:1 !important;
  border:0 !important;background:none !important;
  padding:0 20px 0 0 !important;position:relative;
  font-size:14px;color:#1c1c1c;white-space:nowrap}
.woocommerce-ordering .orderby-current:hover,
.product-per-page-form .perpage-current:hover{background:none !important;color:#1c1c1c !important}
.woocommerce-ordering .orderby-current::after,
.product-per-page-form .perpage-current::after{
  position:absolute !important;right:0 !important;
  top:50% !important;bottom:auto !important;
  transform:translateY(-50%) !important;
  margin:0 !important;padding:0 !important;
  color:#6b6b6b !important;font-size:11px !important;line-height:1 !important}

/* The theme paints a second, square, dark-bordered box behind the panel with
   ul::before, offset 8px down. That is the hard edge that showed above the
   rounded dropdown. */
.woocommerce .woocommerce-ordering .orderby ul::before,
.product-per-page-form ul.perpage ul::before{content:none !important;display:none !important}

.woocommerce-ordering ul.dropdown,
.product-per-page-form ul.perpage ul{
  position:absolute;z-index:60;left:0;top:calc(100% + 5px);min-width:100%;
  margin:0;padding:4px !important;list-style:none;background:#fff !important;
  border:1px solid #cfcdc8 !important;border-radius:8px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.13)}
.woocommerce-ordering ul.dropdown li,
.product-per-page-form ul.perpage ul li{
  margin:0;list-style:none;border:0 !important;padding:0 !important;height:auto}
.woocommerce-ordering ul.dropdown a,
.product-per-page-form ul.perpage ul a{
  display:block !important;padding:9px 12px !important;border-radius:5px;
  font-size:14px;line-height:1.3;color:#1c1c1c !important;
  text-decoration:none;white-space:nowrap;background:transparent}
.woocommerce-ordering ul.dropdown a:hover,
.woocommerce-ordering ul.dropdown a.current,
.product-per-page-form ul.perpage ul a:hover,
.product-per-page-form ul.perpage ul a.current{
  background:#204f46 !important;color:#fff !important}

/* The slide-out cart's Checkout button, in the same dark green as Search and
   Proceed to Checkout. The theme ships it black, and it previously only got a
   colour on the product page, so the same button changed appearance depending
   on where you added from. */
#ts-shopping-cart-sidebar a.checkout-button,
#ts-shopping-cart-sidebar .button.checkout-button,
#ts-shopping-cart-sidebar .checkout-button,
.ts-floating-sidebar a.checkout-button,
.ts-floating-sidebar .button.checkout-button{
  background:#204f46 !important;border-color:#204f46 !important;color:#fff !important}
#ts-shopping-cart-sidebar a.checkout-button:hover,
#ts-shopping-cart-sidebar .button.checkout-button:hover,
#ts-shopping-cart-sidebar .checkout-button:hover,
.ts-floating-sidebar a.checkout-button:hover,
.ts-floating-sidebar .button.checkout-button:hover{
  background:#1a4039 !important;border-color:#1a4039 !important;color:#fff !important}

/* Native selects - cart, checkout, variation pickers - get the same rounded
   box, so the site has one select style rather than two. The AWS search field
   is excluded; it is styled with the search bar. */
.woocommerce select:not(.aws-search-field),
.woocommerce-page select:not(.aws-search-field),
.woocommerce form select:not(.aws-search-field){
  height:42px;padding:0 34px 0 12px;
  border:1px solid #dcdad6;border-radius:8px;background-color:#fff;
  font-size:14px;color:#1c1c1c}
.woocommerce select:focus,
.woocommerce-page select:focus{outline:0;border-color:#a3784b}

/* --- main navigation: a touch smaller --- */
header.ts-header .main-menu > li > a,
header.ts-header .main-menu .menu-item > a{font-size:15px !important}

/* --- product page: the gallery carried 90px of left padding, so the image
       box sat inset from the green "Check before you order" bar above it --- */
.woocommerce div.product .woocommerce-product-gallery{padding-left:0 !important}

/* --- category jump buttons (catalogue, QTP, shop) --- */
.bl-cat-jump{margin:24px 0 34px}
.bl-cat-jump h2{font-size:21px;margin:0 0 4px}
.bl-cat-jump p{margin:0 0 16px;color:#6b6b6b;font-size:15px}
.bl-cat-jump p a{color:#204f46;text-decoration:underline}
.bl-cat-jump-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.bl-cat-jump-item{display:flex;align-items:flex-start;gap:11px;
  padding:13px 15px;border:1px solid #e4e2dd;border-radius:10px;background:#fff;
  text-decoration:none;color:#1c1c1c;line-height:1.35;font-size:14px;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.bl-cat-jump-item:hover{border-color:#a3784b;color:#1c1c1c;
  box-shadow:0 4px 14px rgba(0,0,0,.06);transform:translateY(-2px)}
.bl-cat-jump-n{flex:0 0 auto;min-width:26px;height:26px;border-radius:6px;
  background:#204f46;color:#fff;font-weight:700;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.bl-cat-jump-t{flex:1;padding-top:3px}
.bl-cat-jump-c{flex:0 0 auto;padding-top:3px;font-size:12.5px;color:#6b6b6b;font-variant-numeric:tabular-nums}
/* the shop page cards carry a line of description under the name */
.bl-cat-jump-item.has-desc{flex-direction:column;gap:5px}
.bl-cat-jump-item.has-desc .bl-cat-jump-t{padding-top:0;font-weight:700}
.bl-cat-jump-d{display:block;font-weight:400;font-size:13px;color:#6b6b6b;line-height:1.4}

/* --- brands A-Z: same button treatment as the category jump links --- */
/* The plugin floats the <li> and styles it as well as the <a>, so a border on
   the link sat inside the plugin's own box - two rings per letter - and the
   floats left them on staggered baselines. Flex on the list, and the <li>
   stripped back to a plain wrapper. */
.pwb-az-listing .pwb-az-listing-header ul{
  display:flex;flex-wrap:wrap;gap:10px 18px;list-style:none;margin:0 0 6px;padding:0}
.pwb-az-listing .pwb-az-listing-header li{
  float:none !important;display:block !important;list-style:none !important;
  margin:0 !important;padding:0 !important;border:0 !important;background:none !important}
.pwb-az-listing .pwb-az-listing-header a{
  display:flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;
  border:1px solid #e4e2dd;border-radius:8px;background:#fff;
  font-weight:700;font-size:13.5px;line-height:1;text-transform:uppercase;
  color:#204f46;text-decoration:none;
  transition:border-color .15s,background .15s}
.pwb-az-listing .pwb-az-listing-header a:hover{border-color:#a3784b;background:#faf9f7}
.pwb-az-listing-title{font-size:19px;margin:26px 0 12px}
/* the plugin lays these out in fixed columns; display:contents lets the links
   flow into one responsive grid instead */
.pwb-az-listing-row-in{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.pwb-az-listing-col{display:contents}
.pwb-az-listing-content ul,
.pwb-az-listing-col ul{list-style:none;margin:0;padding:0;display:contents}
.pwb-az-listing-row-in li{margin:0;list-style:none}
.pwb-az-listing-row-in a{
  display:block;padding:12px 14px;border:1px solid #e4e2dd;border-radius:10px;
  background:#fff;color:#1c1c1c;text-decoration:none !important;
  font-size:14px;line-height:1.35;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.pwb-az-listing-row-in a:hover{
  border-color:#a3784b;color:#1c1c1c;
  box-shadow:0 4px 14px rgba(0,0,0,.06);transform:translateY(-2px)}

/* --- footer: Direction 03, "the ledger" -----------------------------------
   The structure and every link live in the Elementor footer block (#55204) so
   they stay editable in the builder; the type and colour live here.

   The containers are addressed through :has() on the widget classes rather
   than through classes of their own. Elementor applies _css_classes to
   widgets but silently drops it on containers, and the generated
   elementor-element-<id> classes change every time the block is rebuilt, so
   they are no use as hooks. All ten selectors below were checked against the
   rendered page and resolve 1:1 - six for the columns, one for each of the
   rest. */

#colophon{background:#14211d !important;color:#c9d6d1}
#colophon a{color:inherit;text-decoration:none}

/* the dark band runs edge to edge; the content sits on the same 1240px rail
   as everything above it. Padding the container rather than capping its width
   is what keeps those two things independent. */
#colophon > .elementor > .e-con,
#colophon > .elementor > .e-con > .e-con-inner{
  padding-left:max(20px, calc((100% - 1240px) / 2)) !important;
  padding-right:max(20px, calc((100% - 1240px) / 2)) !important}
#colophon > .elementor > .e-con > .e-con-inner{
  padding-left:0 !important;padding-right:0 !important}

/* --- the claim, and the call to action opposite it --- */
#colophon .e-con:has(> .e-con > .bl-ft-claim){
  flex-direction:row !important;flex-wrap:wrap;gap:34px 60px;align-items:flex-end;
  padding-top:56px !important;padding-bottom:34px !important}
#colophon .e-con:has(> .bl-ft-claim){flex:1 1 430px;min-width:0}
/* gap:0 - an Elementor container carries its own gap between widgets, which
   was spreading the three lines of the call to action apart; the spacing
   below is done with margins so it can be tuned per line. */
/* width:auto matters. Elementor gives a child container width:100%, and with
   flex-basis:auto that resolves to the full 1240px, so the call to action
   claimed a whole row and wrapped below the claim instead of sitting beside
   it. The columns escaped this only because their flex-basis is a length. */
#colophon .e-con:has(> .bl-ft-cta-phone){
  flex:0 1 auto;width:auto;margin-left:auto;text-align:right;gap:0}

#colophon .bl-ft-claim p{
  font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(24px,2.9vw,40px);line-height:1.06;letter-spacing:.01em;
  color:#fff;margin:0}
#colophon .bl-ft-accent{color:#a3784b}

#colophon .bl-ft-cta-eyebrow p{
  font-family:Oswald,sans-serif;font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#7fb3a0;margin:0 0 8px}
#colophon .bl-ft-cta-phone p{margin:0 0 10px}
#colophon .bl-ft-cta-phone a{
  font-family:Oswald,sans-serif;font-weight:600;font-size:clamp(24px,2.6vw,34px);
  line-height:1.05;color:#fff;font-variant-numeric:tabular-nums;
  transition:color .15s ease}
#colophon .bl-ft-cta-phone a:hover{color:#a3784b}
#colophon .bl-ft-cta-text p{margin:0}
#colophon a.bl-ft-cta-link{
  font-size:14px;font-weight:600;color:#a3784b;
  border-bottom:1px solid rgba(163,120,75,.45);padding-bottom:2px;
  transition:color .15s ease,border-color .15s ease}
#colophon a.bl-ft-cta-link:hover{color:#c99a67;border-color:#c99a67}

/* --- six tight columns --- */
#colophon .e-con:has(> .e-con > .bl-ft-h){
  flex-direction:row !important;flex-wrap:wrap;gap:30px;
  border-top:1px solid #28403a;
  padding-top:40px !important;padding-bottom:36px !important}
#colophon .e-con:has(> .bl-ft-h){flex:1 1 148px;min-width:0;gap:0}
/* the hours need more room than a column of one-word links: "Monday -
   Friday" against "9.00 - 18.00" does not fit 148px without wrapping */
#colophon .e-con:has(> .bl-ft-hours){flex:1.35 1 205px}

#colophon .bl-ft-h{margin:0 0 16px}
#colophon .bl-ft-h h4{
  font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;
  font-size:13px;letter-spacing:.13em;color:#7fb3a0;margin:0}

#colophon .bl-ft-list .elementor-icon-list-items{margin:0;padding:0;list-style:none}
#colophon .bl-ft-list .elementor-icon-list-item{margin:0 0 9px}
#colophon .bl-ft-list .elementor-icon-list-item a{
  font-size:14px;color:#c9d6d1;transition:color .15s ease}
#colophon .bl-ft-list .elementor-icon-list-item a:hover{color:#fff}

/* the hours read as a small table rather than another column of links */
#colophon .bl-ft-hours p{
  display:flex;justify-content:space-between;gap:12px;
  margin:0 0 7px;font-size:13px;color:#9fb0aa;white-space:nowrap}
#colophon .bl-ft-hours b{
  color:#c9d6d1;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

/* --- the bottom bar --- */
#colophon .e-con:has(> .e-con > .bl-ft-legal){
  flex-direction:row !important;flex-wrap:wrap;gap:12px 26px;align-items:center;
  border-top:1px solid #28403a;
  padding-top:20px !important;padding-bottom:28px !important}
#colophon .e-con:has(> .bl-ft-legal){flex:1 1 auto;width:auto;min-width:0}
#colophon .e-con:has(> .bl-ft-addr){
  flex:0 1 auto;margin-left:auto;
  flex-direction:row !important;flex-wrap:wrap;align-items:center;gap:10px 18px;width:auto}
#colophon .bl-ft-legal p,
#colophon .bl-ft-addr p{margin:0;font-size:13px;color:#7e918b}
#colophon .bl-ft-legal a{color:#c9d6d1;border-bottom:1px solid transparent}
#colophon .bl-ft-legal a:hover{border-color:#7e918b}

#colophon .e-con:has(> .bl-ft-pay-icon){
  flex-direction:row !important;gap:12px;align-items:center;width:auto}
#colophon .bl-ft-pay-icon{width:auto}
#colophon .bl-ft-pay-icon .elementor-icon{font-size:26px;line-height:1}
/* Elementor renders these as inline <svg class="e-font-icon-svg">, not <i>,
   and the svg does not take its fill from the parent's colour - it computed
   black on the dark ground. Set the fill directly, as on the cart bin. */
#colophon .bl-ft-pay-icon .elementor-icon svg{
  fill:#7e918b;width:26px;height:26px;display:block;transition:fill .15s ease}
#colophon .bl-ft-pay-icon:hover .elementor-icon svg{fill:#c9d6d1}

@media (max-width:800px){
  #colophon .e-con:has(> .bl-ft-cta-phone){margin-left:0;text-align:left}
  #colophon .e-con:has(> .bl-ft-addr){margin-left:0}
}

/* --- header: drop the social / Contact / Blog strip (all in the footer) --- */
header.ts-header .header-top{display:none !important}

/* --- mega menu: remove the empty divider block at the top of the panel, and
       the second rule that appeared against the header's own border --- */
.ts-megamenu-widgets-container > .elementor > *:first-child{display:none !important}
.ts-megamenu-widgets-container .elementor-widget-divider,
.ts-megamenu-widgets-container .elementor-divider{display:none !important}
header.ts-header .main-menu .sub-menu,
header.ts-header .ts-megamenu-widgets-container,
header.ts-header .ts-megamenu-widgets-container > .elementor{
  border-top:0 !important;border-bottom:0 !important}
/* The panel had 74px of top padding and NO background, so with the page dimmed
   to rgba(0,0,0,.4) behind it a dark strip showed between the white header and
   the white panel content - a band that read as a border above and below the
   navigation. White background, and only enough padding to breathe. */
header.ts-header .main-menu .sub-menu{
  background:#fff !important;padding:24px 0 28px !important}

/* --- mega menu: full category titles, split over two columns --- */
/* Column headings: the Special column uses a standalone <h6> at 18px/500 while
   the others use a bold span at 12.5px/900 inside the first list row. Match the
   h6 to the list style, and give every heading the same breathing room above. */
.ts-megamenu-widgets-container .elementor-heading-title{
  font-size:12.5px !important;font-weight:900 !important;line-height:15.625px !important;
  padding-top:16px !important;padding-bottom:7px !important;margin:0 !important}
.ts-megamenu-widgets-container ul li.bl-mega-title,
.ts-megamenu-widgets-container ul li.bl-mega-title.elementor-icon-list-item{
  padding-top:16px !important;padding-bottom:7px !important}
/* min-width:0 alone was wrong. It removes the content floor that stops a flex
   item shrinking, and the row it sits in is flex-wrap:nowrap with a 32px gap -
   so at laptop widths, where four columns plus gaps no longer fit, they all
   collapsed together to the left instead of wrapping. A flex-basis gives them a
   width to hold, and letting the row wrap means a column drops to the next line
   rather than being crushed. */
.ts-megamenu-widgets-container .e-con:has(> .bl-mega-col){
  flex-wrap:wrap !important}
.ts-megamenu-widgets-container .bl-mega-col{
  min-width:0;flex:1 1 180px !important}
/* tighter type so the long Industriehof titles sit in a shorter panel */
.ts-megamenu-widgets-container a{font-size:12.5px !important;line-height:1.25 !important}
.ts-megamenu-widgets-container .bl-mega-col a{display:block;white-space:normal}
.ts-megamenu-widgets-container li,
.ts-megamenu-widgets-container .elementor-icon-list-item{
  margin-bottom:0 !important;padding-top:3px !important;padding-bottom:3px !important}
.ts-megamenu-widgets-container .elementor-icon-list-text{line-height:1.25 !important}

/* The theme sets .ts-header{margin-top:86px !important} to reserve room for the
   fixed bar. Below 1100px the bar stays hidden until the header has scrolled
   away, so that reserve is 86px of empty space at the top of every inner page -
   the gap visible on a phone. The bar is position:fixed and overlays when it
   does appear, so nothing needs the room. Above 1100px the bar shows straight
   away - but it no longer does at any width, so the reserve is empty space
   everywhere and goes entirely.

   header.ts-header (0,1,1) beats the theme's .ts-header (0,1,0); both carry
   !important, so specificity decides. This lives in the site-wide sheet on
   purpose - the first attempt went into bl_hv2_css(), which only prints on the
   homepage, so it never reached the pages with the gap. */
header.ts-header{margin-top:0 !important}

/* Product page on mobile: put the buy box directly under the photo.
   bl-ihof-direction-a.php injects the dimensions table and the side section
   INSIDE .woocommerce-product-gallery__wrapper, so on a single column they sit
   between the image and the summary - title at 1,534px and Add to cart at
   1,758px on a 390px screen. There is only one real gallery slide; the height
   was never the gallery's.

   The two panels are moved after the summary by bl_product_mobile_order()
   below. This just makes them full width once they are out of the gallery. */
@media (max-width:1100px){
  .woocommerce-product-gallery__wrapper{display:block !important}

  /* Line the photo and the panels up with the Add to cart button.
     Measured at 400px: the gallery box carries padding-right:70px - a desktop
     rule leaving room for the thumbnail rail - so the image ran 41-289 (248px)
     while the button ran 41-359 (318px), and the photo read visibly narrower
     than everything under it. Padding the gallery 21px each side puts its
     content box on exactly the button's edges. */
  /* The inset that matters is on .woocommerce-product-gallery__image, which
     carries padding:20px - padding on the outer gallery did not reach the
     image. 21px each side puts its content box on 41-359, the button's exact
     edges. */
  .woocommerce-product-gallery{padding:0 !important}
  .woocommerce-product-gallery__image{padding:0 21px !important}
  .woocommerce-product-gallery__image img,
  .woocommerce-product-gallery img{
    width:100% !important;max-width:100% !important;height:auto !important}
  /* Full width, matching .bla-buy and .bla-oem either side of them (both
     20-380). An earlier pass inset these by 21px to line up with the Add to
     cart button, which put them on the inner 318px rail while the blocks above
     and below stayed on the outer 360px one - the mismatch was more obvious
     than the alignment it bought. */
  .bla-dims,
  .bla-sec--side{
    width:auto !important;max-width:none !important;float:none !important;
    margin-left:0 !important;margin-right:0 !important}

  /* .bla-dims is a flex ROW - on the desktop two-column layout its heading,
     subtitle and attribute grid sit side by side. In a 318px column that turned
     the heading into a 78px-wide, 532px-tall ribbon of stacked letters, with
     the grid crushed to 97px. Stack them instead, and give the six attribute
     cells two real columns. */
  .bla-dims{display:block !important}
  .bla-dims__h,
  .bla-dims__sub{width:auto !important;height:auto !important}
  .bla-dims__h{margin:0 0 4px !important}
  .bla-dims__sub{margin:0 0 14px !important}
  .bla-dims__grid{
    width:auto !important;height:auto !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}



/* iOS zooms the page in when you focus a field smaller than 16px, and once it
   has zoomed the page can be panned left and right - which reads as a broken
   layout. It only started showing after maximum-scale=1 was removed from the
   viewport tag to allow pinch-zoom: before that iOS could not zoom at all, so
   the undersized fields were harmless. The zoom fix is worth keeping (people
   zoom to read a part number), so the fields go up to 16px instead.

   Measured on the homepage at 390px: hv2-make, hv2-series and hv2-brand were
   all 15px. The hero search was already 17px, which is why the hero never
   triggered it. */
@media (max-width:1100px){
  .hv2 input[type="text"],
  .hv2 input[type="search"],
  .hv2 select,
  .bl-topbar input[type="text"],
  .bl-topbar input[type="search"],
  .woocommerce input[type="text"],
  .woocommerce input[type="search"],
  .woocommerce input[type="email"],
  .woocommerce input[type="tel"],
  .woocommerce input[type="number"],
  .woocommerce textarea{font-size:16px !important}

  /* The generic selectors above lose to more specific theme rules even though
     both carry !important - specificity still decides between them. These match
     the exact rules that won: the sticky bar's picker, the homepage picker, and
     the block cart's quantity box (13px). */
  .bl-topbar .bl-topbar-machine input[type="text"],
  .hv2 .hv2-lane-form .hv2-combo input[type="text"],
  .wc-block-components-quantity-selector__input,
  html body .aws-search-field,
  html body input[type="search"]{font-size:16px !important}
}

/* The AWS field inside the sticky bar, on every width.

   Two faults, both visible once the search panel opened on a phone:

   1. The tractor icon was back - not as an <img> this time but as a
      background-image on the input, with padding-left:48px reserving space for
      it. That is why the typed text started so far in from the left. Removing
      the image alone would have left the 48px gap, so both go.

   2. .aws-search-clear and .aws-loader are positioned top:50% with no
      translate, so their top edge sat on the centre line and the glyph hung
      below it. They need the half-height shift back. */
/* Long selector on purpose: a plain .bl-topbar .aws-search-field lost to
   whatever AWS ships, and the 48px stayed. */
.bl-topbar .aws-container .aws-search-form .aws-wrapper .aws-search-field{
  background-image:none !important;
  padding-left:16px !important}

/* No transform here, deliberately. AWS centres .aws-search-clear with
   top:28px and margin-top:-15px, which is already correct - adding
   translateY(-50%) applied a second -15px and pushed the glyph 15px above
   centre. The earlier reading of top:50% with no transform was taken while the
   button was hidden, so the percentage had not resolved; that is what made it
   look like the shift was missing. */


/* NOTE: this block is deliberately last. Equal specificity is settled by
   source order, and these rules have to beat the bar and picker styling
   defined above them. Sitting earlier in the file, it only ever won on
   the homepage. */

/* -- the plain header dropdown (How it Works?) ---------------------------
   .ts-normal-menu is the theme's non-mega dropdown, and the only menu item
   using it, so none of this reaches the Shop mega menu.

   As it stood the panel had no horizontal padding at all - every link sat
   hard against its left edge - and no border, shadow or radius, so it read
   as a bare white rectangle floating on a white page. The links were 15px
   against the 12.5px used across the mega menu. */
header.ts-header .main-menu li.ts-normal-menu > ul.sub-menu{
  padding:10px 0 !important;
  border:1px solid #e4e2dd !important;
  border-radius:8px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.10) !important}
/* the theme draws a divider across the foot of the panel that serves nothing
   once the panel has a border of its own */
header.ts-header .main-menu li.ts-normal-menu > ul.sub-menu::before,
header.ts-header .main-menu li.ts-normal-menu > ul.sub-menu::after{display:none !important}
header.ts-header .main-menu li.ts-normal-menu > ul.sub-menu > li{padding:0 !important;margin:0 !important;border:0 !important}
/* The highlight takes the Shop panel's pale green (.blc-item in
   bl-shop-cascade) but runs the full width of the dropdown rather than sitting
   inset from it - a narrow panel of four items reads better as full-width bars
   than as a stack of small pills. */
header.ts-header .main-menu li.ts-normal-menu > ul.sub-menu > li > a{
  display:block !important;
  /* the theme makes each li a flex container, so a plain display:block anchor
     shrinks to its text (139px in a 250px panel) and the highlight stops short
     of the edge. flex-grow makes it take the full row. */
  flex:1 1 auto !important;
  padding:9px 20px !important;
  margin:0 !important;
  border-radius:0 !important;
  font-size:13.5px !important;line-height:1.35 !important;font-weight:500 !important;
  color:#1c1c1c !important;
  transition:background-color .12s ease,color .12s ease}
header.ts-header .main-menu li.ts-normal-menu > ul.sub-menu > li > a:hover,
header.ts-header .main-menu li.ts-normal-menu > ul.sub-menu > li > a:focus-visible{
  background:#e9f1ee !important;color:#204f46 !important}

/* -- flyout cart above the sticky header ---------------------------------
   The cart panel (.ts-sidebar-content) is z-index 99991 and its dimming
   overlay 994, while the sticky header's Elementor wrapper is 99999. So the
   header painted over the open cart - elementFromPoint over the panel
   returned the header - and stayed undimmed and clickable behind it.
   Raised only in the .active state, which is the theme's own open flag, so
   nothing changes while the flyout is closed. Applies to every floating
   sidebar, not just the cart: an open flyout should always win. */
.ts-floating-sidebar.active .overlay{z-index:100001 !important}
.ts-floating-sidebar.active .ts-sidebar-content{z-index:100002 !important}

/* -- add-to-cart feedback -------------------------------------------------
   WooCommerce's own add-to-cart.js puts .loading on the button while the
   request is in flight and swaps it for .added when the fragments come back,
   so no JS of ours is needed - but the theme paints nothing for either state
   on these cards (measured: ::after content is "none" in both), which is why
   a click looked like it had done nothing.

   The marker is absolutely positioned rather than inline so the centred label
   does not jump sideways when the state changes. */
@keyframes bl-atc-spin{to{transform:translateY(-50%) rotate(360deg)}}

.hv2-btn.add_to_cart_button,
.woocommerce .products .product .product-group-button-price .loop-add-to-cart a,
.single-product .products .product .product-group-button .loop-add-to-cart a{
  position:relative}

.hv2-btn.add_to_cart_button.loading,
.woocommerce .products .product .product-group-button-price .loop-add-to-cart a.loading,
.single-product .products .product .product-group-button .loop-add-to-cart a.loading{
  pointer-events:none;opacity:.85}

.hv2-btn.add_to_cart_button.loading::after,
.woocommerce .products .product .product-group-button-price .loop-add-to-cart a.loading::after,
.single-product .products .product .product-group-button .loop-add-to-cart a.loading::after{
  content:'';position:absolute;right:12px;top:50%;
  width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  transform:translateY(-50%);
  animation:bl-atc-spin .6s linear infinite}

.hv2-btn.add_to_cart_button.added::after,
.woocommerce .products .product .product-group-button-price .loop-add-to-cart a.added::after,
.single-product .products .product .product-group-button .loop-add-to-cart a.added::after{
  content:'\2713';position:absolute;right:12px;top:50%;
  transform:translateY(-50%);
  font-size:15px;font-weight:700;line-height:1}

@media (prefers-reduced-motion:reduce){
  .hv2-btn.add_to_cart_button.loading::after,
  .woocommerce .products .product .product-group-button-price .loop-add-to-cart a.loading::after,
  .single-product .products .product .product-group-button .loop-add-to-cart a.loading::after{
    animation-duration:2s}
}

/* WooCommerce's own script appends a "View cart" link after the button once a
   product is added. The theme hides it on its own cards
   (.woocommerce .product a.added_to_cart) but that selector does not reach the
   new homepage cards, so it only showed up there. */
/* The bare selector is specificity 0,1,1 and loses to the card button rule
   (.woocommerce .products .product .product-group-button-price .loop-add-to-cart a
   at 0,5,1), which sets display:block !important - so "View cart" came back as
   a full tan button under every card that had been added to. Matching that
   context beats it; the bare selector stays for the homepage cards. */
.woocommerce .products .product .product-group-button-price .loop-add-to-cart a.added_to_cart,
.woocommerce .products .product .product-group-button .loop-add-to-cart a.added_to_cart,
.woocommerce .products .product .loop-add-to-cart a.added_to_cart,
.single-product .products .product .product-group-button .loop-add-to-cart a.added_to_cart,
a.added_to_cart{display:none !important}

/* -- cart page (this site runs the block cart, not the classic table) ------

   Quantity: the input is 45px wide and the theme's generic input rule puts
   20px of padding on each side, leaving a 5px content box for the digit -
   measured scrollWidth 48 against clientWidth 45, which is exactly why the
   number was pushed right and clipped. The block's own stylesheet does set
   padding:.4em 0, but it ships that rule inside :where(), which carries zero
   specificity, so the theme's plain input selector won. */
.wc-block-components-quantity-selector__input{
  padding-left:0 !important;padding-right:0 !important;
  text-align:center !important}

/* Fitment and accessory lists inside a cart item's description carry 6px of
   vertical padding per <li> from the theme's list styling, which stretched a
   four-line list down most of the row. */
.wc-block-components-product-metadata__description ul,
.wc-block-components-product-metadata__description ol{
  margin-top:2px !important;margin-bottom:2px !important}
.wc-block-components-product-metadata__description li{
  padding-top:0 !important;padding-bottom:0 !important;
  margin-top:0 !important;margin-bottom:0 !important}
.wc-block-components-product-metadata__description p{margin:0 0 4px !important}

/* The fitment and accessory lists account for 996px of the 2,862px the item
   list runs to - about a third of the page - and by the cart the customer has
   already chosen the part, so none of it is helping them check out. The part
   number stays: it is carried in the product title, not here. Also applies to
   the checkout order summary, which renders the same block. */
.wc-block-components-product-metadata__description{display:none !important}

/* The order summary is 263px tall beside 2,904px of items, so "Proceed to
   checkout" was off-screen for nearly the whole page. Sticky needs the flex
   item to stop stretching first, hence align-self; 101px clears the 85px
   sticky header plus a gap. */
.wc-block-cart__sidebar{
  align-self:flex-start !important;
  position:sticky !important;
  top:101px !important}

/* A row read "EUR 550.44" under the name and "EUR 2,201.75" on the right with
   nothing to explain the gap. The quantity is written onto the element by
   bl_cart_qty_multiplier() below, and only when it is above 1. */
.wc-block-cart-item__prices[data-bl-qty]::after{
  content:' \00d7 ' attr(data-bl-qty);
  opacity:.6;font-weight:600;white-space:nowrap}

/* Parts are identified by eye, so the thumbnail earns more room than 64px. */
.wc-block-cart-item__image{width:104px !important}
.wc-block-cart-item__image img{width:92px !important;height:auto !important}

/* The bin sat one mis-click from the "-" stepper. It now lives on the title
   line instead, lifted out of the quantity row entirely - so that row is back
   to holding just the stepper. */
.wc-block-cart-item__quantity{
  width:100% !important;
  justify-content:flex-start !important;
  align-items:center !important}

.wc-block-cart-item__wrap{position:relative !important}
.wc-block-cart-item__remove-link{
  position:absolute !important;right:0 !important;top:0 !important;
  margin:0 !important;padding:0 !important;
  color:inherit;opacity:.5;
  transition:opacity .15s ease,color .15s ease}
/* The icon is an inline <svg> whose path carries no fill of its own. Routing
   it through currentColor did not work - the computed fill stayed black even
   with an !important colour forced on the button - so the hover colour is set
   on the fill directly. #eb4019 is the product-title colour. */
.wc-block-cart-item__remove-link svg{display:block}
.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link:focus-visible{opacity:1}
.wc-block-cart-item__remove-link:hover svg,
.wc-block-cart-item__remove-link:hover svg path,
.wc-block-cart-item__remove-link:focus-visible svg,
.wc-block-cart-item__remove-link:focus-visible svg path{fill:#eb4019 !important}

/* keep a long title from running under the bin */
.wc-block-cart-item__wrap .wc-block-components-product-name{padding-right:34px !important}

/* breathing room between the title and the unit price below it */
.wc-block-cart-item__prices{margin-top:8px !important}

/* The Total column was 13px, the same size as the small print, against a 16px
   title - it is the figure the customer is actually checking, so it matches
   the title now. */
.wc-block-cart-item__total .wc-block-components-product-price{
  font-size:16px !important;font-weight:600 !important}

/* The checkout button shipped as #32373C, the block default and the only
   near-black left on the page. Same green as the hero and the header SEARCH
   button. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background-color:#204f46 !important;color:#fff !important;border-color:#204f46 !important}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  background-color:#1a4039 !important;color:#fff !important}

/* Item titles were 13px - too small to scan a part number against, which is
   the one thing a customer checks on this page. */
.wc-block-cart-item__wrap .wc-block-components-product-name{
  font-size:16px !important;font-weight:600 !important;line-height:1.35 !important}