:root {
  --hf-teal: #00795C;
  --hf-teal-hover: #006B52;
  --hf-ink: #14231F;
  --hf-eucalyptus: #536862;
  --hf-sage: #faf6ee;
  --hf-line: #dcd2bf;
  --hf-canvas: #FFFFFF;
  --hf-surface: #FFFFFF;
  --hf-radius: 8px;
  --hf-shadow-ring: rgba(0, 70, 53, 0.10) 0 0 0 1px;
  --hf-page-shell: min(1200px, calc(100vw - 32px));
  --hf-button-height: 40px;
  --hf-button-compact-height: 34px;
  --hf-button-radius: 8px;
  --hf-button-padding: 10px 16px;
  --hf-button-compact-padding: 8px 12px;
  --hf-button-font-size: 13px;
  --hf-button-primary-bg: var(--hf-teal);
  --hf-button-primary-hover: var(--hf-teal-hover);
  --hf-button-secondary-bg: #ece4d5;
  --hf-button-secondary-hover: #e1d6c2;
  --hf-button-secondary-border: rgba(150, 120, 78, 0.22);
  --hf-button-shadow: rgba(0, 70, 53, 0.10) 0 0 0 1px;
  --hf-button-hover-shadow: rgba(0, 70, 53, 0.13) 0 8px 18px;
  --hf-rating-gold: #F5A623;
  --hf-rating-gold-muted: #F8D58A;
}

body {
  --wp--style--global--content-size: 1200px;
  font-family: "DM Sans", "Aptos", "Segoe UI", Arial, sans-serif;
  color: var(--hf-eucalyptus);
  background: var(--hf-canvas);
  letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--hf-teal);
  font-family: "DM Sans", "Aptos", "Segoe UI", Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.16;
}

h2 {
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
}

h3 {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.24;
}

h4 {
  font-size: 16px;
  line-height: 1.3;
}

h5 {
  font-size: 15px;
  line-height: 1.34;
}

h6 {
  font-size: 14px;
  line-height: 1.38;
}

p,
li {
  font-size: 15px;
  line-height: 1.58;
}

a {
  color: var(--hf-teal);
  font-weight: 600;
}

.wp-site-blocks {
  min-height: 100vh;
}

.hf-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: rgba(0, 70, 53, 0.10) 0 1px 18px;
}

.hf-header__inner {
  min-height: 78px;
}

.hf-header .wp-block-navigation a {
  color: var(--hf-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.hf-header .wp-block-navigation .wp-block-navigation__submenu-container a,
.hf-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-weight: 400;
}

.hf-header .wp-block-navigation a:hover {
  color: var(--hf-teal);
}

.hf-header .wp-block-shortcode a,
.trackbuttons a,
a.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--hf-radius);
  background: var(--hf-teal);
  color: var(--hf-surface);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: var(--hf-shadow-ring);
}

.hf-header .wp-block-shortcode a {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
}

.hf-header .wp-block-shortcode p {
  margin: 0;
}

.trackbuttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wrap,
.hf-wrap {
  width: var(--hf-page-shell);
  max-width: 1200px;
  margin-inline: auto;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}

.left,
.right {
  flex: 1 1 320px;
}

.dotpoints {
  padding-left: 18px;
}

.dotpoints li {
  margin-bottom: 6px;
}

.q,
.woocommerce ul.products li.product,
.woocommerce div.product div.images,
.woocommerce div.product .summary,
.woocommerce-cart-form,
.cart-collaterals,
.woocommerce-checkout-review-order,
.woocommerce form.checkout {
  border-radius: var(--hf-radius);
  background: var(--hf-surface);
  box-shadow: rgba(0, 70, 53, 0.10) 0 0 0 1px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  min-height: 40px;
  width: 100%;
  border: 0;
  border-radius: var(--hf-radius);
  background: var(--hf-surface);
  color: var(--hf-ink);
  padding: 9px 11px;
  font: inherit;
  box-shadow: var(--hf-shadow-ring);
}

select,
.woocommerce select,
.woocommerce-page select,
body.woocommerce div.product form.cart .variations select,
body.woocommerce.archive .woocommerce-ordering select,
.yith-wapo-block select,
.yith-wapo-addon select,
body #app select,
body #app .q select {
  box-sizing: border-box;
  display: block;
  min-height: 46px;
  height: 46px;
  width: 100%;
  max-width: 100%;
  padding: 0 42px 0 14px;
  border: 1px solid rgba(150, 120, 78, 0.18);
  border-radius: 10px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2300795C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  color: var(--hf-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 44px;
  text-align: left;
  vertical-align: middle;
  box-shadow:
    rgba(0, 70, 53, 0.08) 0 0 0 1px,
    rgba(0, 70, 53, 0.04) 0 10px 22px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

select::-ms-expand {
  display: none;
}

select:hover,
.woocommerce select:hover,
.woocommerce-page select:hover,
body.woocommerce div.product form.cart .variations select:hover,
body.woocommerce.archive .woocommerce-ordering select:hover,
.yith-wapo-block select:hover,
.yith-wapo-addon select:hover,
body #app select:hover,
body #app .q select:hover {
  border-color: rgba(0, 121, 92, 0.34);
  box-shadow:
    rgba(150, 120, 78, 0.16) 0 0 0 1px,
    rgba(0, 70, 53, 0.07) 0 14px 26px;
}

select:focus,
.woocommerce select:focus,
.woocommerce-page select:focus,
body.woocommerce div.product form.cart .variations select:focus,
body.woocommerce.archive .woocommerce-ordering select:focus,
.yith-wapo-block select:focus,
.yith-wapo-addon select:focus,
body #app select:focus,
body #app .q select:focus {
  outline: none;
  border-color: var(--hf-teal);
  box-shadow:
    rgba(150, 120, 78, 0.22) 0 0 0 3px,
    rgba(0, 70, 53, 0.10) 0 12px 26px;
}

select:disabled,
.woocommerce select:disabled,
.woocommerce-page select:disabled,
body #app select:disabled {
  cursor: not-allowed;
  color: var(--hf-muted);
  background-color: #f4f2ee;
  box-shadow: rgba(0, 70, 53, 0.06) 0 0 0 1px;
}

.select2-container .select2-selection--single,
.selectWoo-container .select2-selection--single,
.selectWoo-container .selectWoo-selection--single,
.woocommerce .select2-container .select2-selection--single {
  box-sizing: border-box;
  height: 46px;
  border: 1px solid rgba(150, 120, 78, 0.18);
  border-radius: 10px;
  background: #fff;
  box-shadow:
    rgba(0, 70, 53, 0.08) 0 0 0 1px,
    rgba(0, 70, 53, 0.04) 0 10px 22px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.selectWoo-container--default .select2-selection--single .select2-selection__rendered,
.selectWoo-container--default .selectWoo-selection--single .selectWoo-selection__rendered,
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 42px 0 14px;
  color: var(--hf-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 44px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
.selectWoo-container--default .select2-selection--single .select2-selection__arrow,
.selectWoo-container--default .selectWoo-selection--single .selectWoo-selection__arrow,
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 1px;
  right: 8px;
  width: 34px;
  height: 44px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b,
.selectWoo-container--default .select2-selection--single .select2-selection__arrow b,
.selectWoo-container--default .selectWoo-selection--single .selectWoo-selection__arrow b,
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--hf-teal) transparent transparent transparent;
}

.v-select .vs__dropdown-toggle {
  min-height: 46px;
  border: 1px solid rgba(150, 120, 78, 0.18);
  border-radius: 10px;
  background: #fff;
  box-shadow:
    rgba(0, 70, 53, 0.08) 0 0 0 1px,
    rgba(0, 70, 53, 0.04) 0 10px 22px;
}

.v-select .vs__selected,
.v-select .vs__search,
.v-select .vs__search::placeholder {
  color: var(--hf-ink);
  font-size: 14px;
  font-weight: 500;
}

.v-select .vs__actions {
  padding-right: 12px;
}

.v-select .vs__open-indicator {
  fill: var(--hf-teal);
}

body.woocommerce div.product form.cart .variations label,
.yith-wapo-addon .yith-wapo-addon-label,
body #app .form label {
  color: var(--hf-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

body.woocommerce div.product form.cart .variations .required,
.yith-wapo-addon .required,
body #app .required {
  color: #c2410c;
  text-decoration: none;
}

.genericon-star {
  color: var(--hf-rating-gold);
}

/* Featured-image page heroes. */
body.hf-has-featured-page-hero {
  overflow-x: clip;
}

body.hf-has-featured-page-hero main.wp-block-group {
  margin-block-start: 0 !important;
  overflow-x: clip;
}

body.hf-has-featured-page-hero main.wp-block-group > .wp-block-group:first-child {
  max-width: none !important;
  margin-block-start: 0;
  padding: 0 !important;
}

body.hf-has-featured-page-hero main.wp-block-group > .wp-block-group:first-child > *:not(.hf-page-hero) {
  display: none !important;
}

.hf-page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: clamp(300px, 40vw, 470px);
  margin: 0 calc(50% - 50vw) clamp(32px, 5vw, 62px) !important;
  overflow: hidden;
  background: #0e3028;
  color: #fff;
}

.hf-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(90deg, rgba(4, 31, 25, 0.72), rgba(4, 31, 25, 0.38) 46%, rgba(4, 31, 25, 0.08)),
    linear-gradient(180deg, rgba(150, 120, 78, 0.05), rgba(0, 75, 57, 0.42)),
    var(--hf-page-hero-image);
  background-position: center;
  background-size: cover;
  transform: scale(1.02);
}

.hf-page-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 36%;
  background: linear-gradient(180deg, rgba(4, 31, 25, 0), rgba(4, 31, 25, 0.38));
  pointer-events: none;
}

.hf-page-hero__inner {
  width: var(--hf-page-shell);
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(70px, 12vw, 150px) 0 clamp(58px, 9vw, 104px);
}

.hf-page-hero h1 {
  max-width: 840px;
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.08;
  text-shadow: rgba(0, 45, 34, 0.34) 0 2px 28px;
}


@media (max-width: 620px) {
  .hf-page-hero {
    min-height: 290px;
  }

  .hf-page-hero::before {
    background-position: center;
  }

  .hf-page-hero__inner {
    width: min(100% - 32px, 520px);
    padding: 88px 0 58px;
  }

  .hf-page-hero h1 {
    font-size: 27px;
  }

}

body.page:not(.home) :where(.wp-block-post-title.alignwide, .wc-block-store-notices.alignwide, .entry-content.alignwide, .entry-content > .alignwide) {
  box-sizing: border-box;
  width: var(--hf-page-shell) !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-id-6 .wp-block-post-title {
  display: none !important;
}

/* The "Online Shop" title above is hidden, so collapse the two block spacers
   that framed it — otherwise they leave a large empty gap at the top. */
body.page-id-6 .wp-block-spacer {
  height: 0 !important;
  min-height: 0 !important;
}

/* Product archive product grids, matched to the homepage product showcase. */
body.woocommerce.archive main.wp-block-group {
  padding-bottom: 0;
}

body.woocommerce.archive main.wp-block-group > .wp-block-breadcrumbs,
body.woocommerce.archive main.wp-block-group > .wp-block-query-title,
body.woocommerce.archive main.wp-block-group > .wp-block-term-description,
body.woocommerce.archive main.wp-block-group > .wp-block-group.alignwide {
  width: min(1200px, calc(100vw - 32px));
  max-width: 1200px !important;
  margin-inline: auto;
}

body.woocommerce.archive main.wp-block-group > .wp-block-breadcrumbs {
  margin-top: 24px;
  margin-bottom: 26px;
}

body.woocommerce.archive .wp-block-query-title {
  margin-bottom: 22px;
  color: var(--hf-teal);
  font-size: clamp(29px, 3vw, 42px);
  line-height: 1.06;
}

body.woocommerce.archive .wp-block-term-description {
  margin-bottom: 28px;
}

body.woocommerce.archive .wp-block-term-description h1,
body.woocommerce.archive .woocommerce-products-header__title {
  max-width: 980px;
  margin: 0 0 18px;
  color: var(--hf-teal);
  font-size: clamp(25px, 2.3vw, 33px);
  line-height: 1.12;
}

body.woocommerce.archive .wp-block-term-description p {
  max-width: 1040px;
  margin-bottom: 8px;
  color: var(--hf-ink);
  font-size: 15px;
  line-height: 1.58;
}

body.woocommerce.archive main.wp-block-group > .wp-block-group.alignwide {
  align-items: center;
  gap: 18px;
  margin-bottom: 0;
  padding-bottom: 24px;
}

body.woocommerce.archive .woocommerce-result-count {
  margin: 0;
  color: var(--hf-eucalyptus);
  font-size: 14px;
}

body.woocommerce.archive .woocommerce-ordering select {
  min-width: 190px;
  background-color: #fff;
  box-shadow: rgba(0, 70, 53, 0.10) 0 0 0 1px;
}

body.woocommerce.archive main.wp-block-group > header.entry-header {
  display: none;
}

body.woocommerce.archive main.wp-block-group > section#main {
  box-sizing: border-box;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc((100vw - 100%) / -2) !important;
  margin-right: calc((100vw - 100%) / -2) !important;
  padding: 46px 0 78px;
  border-block: 1px solid rgba(150, 120, 78, 0.10);
  background: #f9f6f2;
}

body.woocommerce.archive main.wp-block-group > section#main > .wrap {
  width: min(1200px, calc(100vw - 32px));
  max-width: 1200px;
  margin-inline: auto;
}

body.woocommerce.archive .wp-block-woocommerce-product-collection {
  width: 100%;
  max-width: none !important;
}

body.woocommerce.archive .wc-block-product-template,
body.woocommerce.archive .wc-block-product-template__responsive,
body.post-type-archive-product ul.products,
body.page-id-6 ul.products,
body.woocommerce.archive ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce.archive .wc-block-product-template::before,
body.woocommerce.archive .wc-block-product-template::after,
body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after,
body.page-id-6 ul.products::before,
body.page-id-6 ul.products::after,
body.woocommerce.archive ul.products::before,
body.woocommerce.archive ul.products::after {
  content: none !important;
  display: none !important;
}

body.woocommerce.archive li.wc-block-product,
body.woocommerce.archive ul.products li.product,
body.post-type-archive-product ul.products li.product,
body.page-id-6 ul.products li.product {
  display: flex !important;
  float: none !important;
  flex-direction: column;
  overflow: hidden;
  width: auto !important;
  min-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.07) 0 16px 38px;
  text-align: left;
}

body.woocommerce.archive li.wc-block-product > .wc-block-components-product-image,
body.woocommerce.archive ul.products li.product a.woocommerce-LoopProduct-link img,
body.post-type-archive-product ul.products li.product a.woocommerce-LoopProduct-link img,
body.page-id-6 ul.products li.product a.woocommerce-LoopProduct-link img {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 190px;
  margin: 0 !important;
  padding: 16px;
  border-bottom: 1px solid rgba(150, 120, 78, 0.10);
  background: #fff;
}

body.woocommerce.archive ul.products li.product a.woocommerce-LoopProduct-link img,
body.post-type-archive-product ul.products li.product a.woocommerce-LoopProduct-link img,
body.page-id-6 ul.products li.product a.woocommerce-LoopProduct-link img {
  box-sizing: border-box;
  display: block;
}

body.woocommerce.archive li.wc-block-product > .wc-block-components-product-image a,
body.woocommerce.archive li.wc-block-product > .wc-block-components-product-image img {
  display: block;
  width: 100%;
}

body.woocommerce.archive li.wc-block-product > .wc-block-components-product-image img,
body.woocommerce.archive ul.products li.product a.woocommerce-LoopProduct-link img,
body.post-type-archive-product ul.products li.product a.woocommerce-LoopProduct-link img,
body.page-id-6 ul.products li.product a.woocommerce-LoopProduct-link img {
  height: 230px;
  max-height: 230px;
  object-fit: contain !important;
  transition: transform 180ms ease;
}

body.woocommerce.archive li.wc-block-product > .wc-block-components-product-image:hover img,
body.woocommerce.archive ul.products li.product a.woocommerce-LoopProduct-link:hover img,
body.post-type-archive-product ul.products li.product a.woocommerce-LoopProduct-link:hover img,
body.page-id-6 ul.products li.product a.woocommerce-LoopProduct-link:hover img {
  transform: translateY(-2px);
}

body.woocommerce.archive li.wc-block-product > h2,
body.woocommerce.archive li.wc-block-product > h2.wp-block-post-title,
body.woocommerce.archive ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.page-id-6 ul.products li.product .woocommerce-loop-product__title {
  margin: 0 !important;
  padding: 22px 22px 0 !important;
  color: var(--hf-teal);
  font-size: 20px !important;
  font-weight: 300;
  line-height: 1.18 !important;
  text-align: left !important;
  text-wrap: balance;
}

body.woocommerce.archive li.wc-block-product > h2 a,
body.woocommerce.archive ul.products li.product a.woocommerce-LoopProduct-link,
body.post-type-archive-product ul.products li.product a.woocommerce-LoopProduct-link,
body.page-id-6 ul.products li.product a.woocommerce-LoopProduct-link {
  color: inherit;
  text-decoration: none;
}

body.woocommerce.archive ul.products li.product a.woocommerce-LoopProduct-link,
body.post-type-archive-product ul.products li.product a.woocommerce-LoopProduct-link,
body.page-id-6 ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

body.woocommerce.archive li.wc-block-product > .wp-block-woocommerce-product-price,
body.woocommerce.archive ul.products li.product .price,
body.post-type-archive-product ul.products li.product .price,
body.page-id-6 ul.products li.product .price {
  display: block;
  margin: 0 !important;
  padding: 14px 22px 0 !important;
  color: var(--hf-eucalyptus) !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.35;
  text-align: left !important;
}

body.woocommerce.archive li.wc-block-product > .wp-block-woocommerce-product-price .amount,
body.woocommerce.archive ul.products li.product .price .amount,
body.post-type-archive-product ul.products li.product .price .amount,
body.page-id-6 ul.products li.product .price .amount {
  color: var(--hf-ink);
  font-weight: 750;
}

body.woocommerce.archive ul.products li.product .star-rating,
body.post-type-archive-product ul.products li.product .star-rating,
body.page-id-6 ul.products li.product .star-rating {
  margin: 14px 22px 0 !important;
  color: var(--hf-rating-gold);
}

body .woocommerce .star-rating,
body .woocommerce .star-rating span,
body .woocommerce .star-rating span::before,
body .wc-block-components-product-rating__stars,
body .wc-block-components-product-rating__stars span,
body .genericon-star {
  color: var(--hf-rating-gold) !important;
}

body .woocommerce .star-rating::before,
body .wc-block-components-product-rating__stars::before {
  color: var(--hf-rating-gold-muted) !important;
}

body .woocommerce p.stars a,
body .woocommerce p.stars a::before {
  color: var(--hf-rating-gold) !important;
}

body.woocommerce.archive li.wc-block-product > .wp-block-woocommerce-product-button {
  display: none;
}

body.woocommerce.archive li.wc-block-product > form,
body.woocommerce.archive ul.products li.product > form,
body.post-type-archive-product ul.products li.product > form,
body.page-id-6 ul.products li.product > form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding: 18px 22px 22px;
}

body.woocommerce.archive li.wc-block-product > form .button,
body.woocommerce.archive ul.products li.product > form .button,
body.post-type-archive-product ul.products li.product > form .button,
body.page-id-6 ul.products li.product > form .button,
body.woocommerce.archive ul.products li.product .button,
body.post-type-archive-product ul.products li.product .button,
body.page-id-6 ul.products li.product .button {
  box-sizing: border-box;
  flex: 1 1 112px;
  min-height: 38px;
  margin: 0 !important;
  padding: 9px 13px;
  border: 1px solid transparent !important;
  border-radius: 7px;
  background: var(--hf-teal);
  color: #fff !important;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color 180ms ease, transform 180ms ease;
}

body.woocommerce.archive li.wc-block-product > form .button:first-child,
body.woocommerce.archive ul.products li.product > form .button:first-child,
body.post-type-archive-product ul.products li.product > form .button:first-child,
body.page-id-6 ul.products li.product > form .button:first-child {
  background: #efe9e0 !important;
  border-color: rgba(150, 120, 78, 0.18) !important;
  color: var(--hf-teal) !important;
}

body.woocommerce.archive li.wc-block-product > form .button:first-of-type,
body.woocommerce.archive ul.products li.product > form .button:first-of-type,
body.post-type-archive-product ul.products li.product > form .button:first-of-type,
body.page-id-6 ul.products li.product > form .button:first-of-type {
  background: #efe9e0 !important;
  border-color: rgba(150, 120, 78, 0.18) !important;
  color: var(--hf-teal) !important;
}

body.woocommerce.archive li.wc-block-product > form .button + .button,
body.woocommerce.archive ul.products li.product > form .button + .button,
body.post-type-archive-product ul.products li.product > form .button + .button,
body.page-id-6 ul.products li.product > form .button + .button {
  background: var(--hf-teal) !important;
  border-color: var(--hf-teal) !important;
  color: #fff !important;
}

body.woocommerce.archive li.wc-block-product > form .button:hover,
body.woocommerce.archive ul.products li.product > form .button:hover,
body.post-type-archive-product ul.products li.product > form .button:hover,
body.page-id-6 ul.products li.product > form .button:hover,
body.woocommerce.archive ul.products li.product .button:hover,
body.post-type-archive-product ul.products li.product .button:hover,
body.page-id-6 ul.products li.product .button:hover {
  background: var(--hf-teal-hover);
  transform: translateY(-1px);
}

body.woocommerce.archive li.wc-block-product > form .button:first-child:hover,
body.woocommerce.archive ul.products li.product > form .button:first-child:hover,
body.post-type-archive-product ul.products li.product > form .button:first-child:hover,
body.page-id-6 ul.products li.product > form .button:first-child:hover {
  background: #e7ded2 !important;
}

body.woocommerce.archive li.wc-block-product > form .button:first-of-type:hover,
body.woocommerce.archive ul.products li.product > form .button:first-of-type:hover,
body.post-type-archive-product ul.products li.product > form .button:first-of-type:hover,
body.page-id-6 ul.products li.product > form .button:first-of-type:hover {
  background: #e7ded2 !important;
  color: #005f49 !important;
}

body.woocommerce.archive .wp-block-query-pagination {
  width: min(1200px, calc(100vw - 32px));
  margin: 34px auto 0;
}

body.page-id-6 .entry-content > .woocommerce {
  width: min(1200px, calc(100vw - 32px));
  max-width: 1200px;
  margin: 18px auto 62px;
}

body.page-id-6 .entry-content > .woocommerce + hr,
body.page-id-6 .entry-content > hr {
  width: min(1200px, calc(100vw - 32px));
  margin: 54px auto 22px;
  border: 0;
  border-top: 1px solid rgba(150, 120, 78, 0.18);
}

body.page-id-6 .entry-content > h1,
body.page-id-6 .entry-content > h2,
body.page-id-6 .entry-content > h3,
body.page-id-6 .entry-content > p {
  width: min(1200px, calc(100vw - 32px));
  max-width: 1200px;
  margin-inline: auto;
}

body.page-id-6 .entry-content > .woocommerce:has(ul.products) {
  box-sizing: border-box;
  padding: 0;
}

/* Single product pages use the same shell width as the homepage showcase. */
body.single-product .woocommerce.product > section#main > .wrap {
  width: min(1200px, calc(100vw - 32px));
  max-width: 1200px;
  margin-inline: auto;
}

body.single-product .woocommerce.product > section#main > .wrap > main.wp-block-group {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.single-product .woocommerce.product .wp-block-columns.alignwide,
body.single-product .woocommerce.product .wc-block-breadcrumbs.alignwide,
body.single-product .woocommerce.product .wc-block-store-notices.alignwide,
body.single-product .woocommerce.product .wp-block-post-title,
body.single-product .woocommerce.product .wp-block-post-content,
body.single-product .woocommerce.product .woocommerce-tabs,
body.single-product .woocommerce.product .related.products,
body.single-product .woocommerce.product .upsells.products {
  width: 100%;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 980px) {
  body.woocommerce.archive .wc-block-product-template,
  body.woocommerce.archive .wc-block-product-template__responsive,
  body.post-type-archive-product ul.products,
  body.page-id-6 ul.products,
  body.woocommerce.archive ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  body.woocommerce.archive main.wp-block-group > .wp-block-breadcrumbs,
  body.woocommerce.archive main.wp-block-group > .wp-block-query-title,
  body.woocommerce.archive main.wp-block-group > .wp-block-term-description,
  body.woocommerce.archive main.wp-block-group > .wp-block-group.alignwide,
  body.woocommerce.archive main.wp-block-group > section#main > .wrap,
  body.page-id-6 .entry-content > .woocommerce,
  body.page-id-6 .entry-content > h1,
  body.page-id-6 .entry-content > h2,
  body.page-id-6 .entry-content > h3,
  body.page-id-6 .entry-content > p,
  body.page-id-6 .entry-content > .woocommerce + hr,
  body.page-id-6 .entry-content > hr {
    width: min(calc(100vw - 28px), 520px);
    margin-left: calc((100vw - 100%) / -2 + 14px) !important;
    margin-right: calc((100vw - 100%) / -2 + 14px) !important;
  }

  body.woocommerce.archive main.wp-block-group > .wp-block-group.alignwide {
    flex-wrap: wrap !important;
  }

  body.woocommerce.archive main.wp-block-group > section#main {
    padding: 32px 0 52px;
  }

  body.woocommerce.archive .wc-block-product-template,
  body.woocommerce.archive .wc-block-product-template__responsive,
  body.post-type-archive-product ul.products,
  body.page-id-6 ul.products,
  body.woocommerce.archive ul.products {
    grid-template-columns: 1fr !important;
  }

  body.single-product .woocommerce.product > section#main > .wrap,
  body.single-product .woocommerce.product .wp-block-columns.alignwide,
  body.single-product .woocommerce.product .wc-block-breadcrumbs.alignwide,
  body.single-product .woocommerce.product .wc-block-store-notices.alignwide,
  body.single-product .woocommerce.product .wp-block-post-title,
  body.single-product .woocommerce.product .wp-block-post-content,
  body.single-product .woocommerce.product .woocommerce-tabs,
  body.single-product .woocommerce.product .related.products,
  body.single-product .woocommerce.product .upsells.products {
    width: min(calc(100vw - 28px), 520px);
    max-width: 520px !important;
  }

  body.woocommerce.archive li.wc-block-product > .wc-block-components-product-image img,
  body.woocommerce.archive ul.products li.product a.woocommerce-LoopProduct-link img,
  body.post-type-archive-product ul.products li.product a.woocommerce-LoopProduct-link img,
  body.page-id-6 ul.products li.product a.woocommerce-LoopProduct-link img {
    height: 210px;
    max-height: 210px;
  }
}

/* Configurator UX polish. These selectors intentionally outrank the legacy
   shortcode style blocks while keeping the Vue markup untouched. */
.hiddenfence-product-configurator {
  clear: both;
  width: 100%;
  margin-top: clamp(24px, 4vw, 48px);
}

body.single-product .wp-block-columns:has(.hiddenfence-product-configurator) {
  align-items: flex-start;
  flex-wrap: wrap;
}

body.single-product .wp-block-column:has(.hiddenfence-product-configurator) {
  flex: 1 1 480px !important;
  min-width: min(100%, 420px);
}

body.single-product .hiddenfence-product-configurator,
body.single-product .hiddenfence-product-configurator #app,
body.single-product .hiddenfence-product-configurator #app .q {
  width: 100%;
  max-width: 100%;
}

body.single-product .woocommerce-product-gallery,
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image a,
body.single-product .woocommerce-product-gallery__image img {
  max-width: 100%;
}

body.single-product .woocommerce-product-gallery__wrapper {
  max-width: none !important;
}

body.single-product .woocommerce-product-gallery .flex-viewport {
  max-width: 100%;
}

body.single-product .woocommerce-product-gallery {
  overflow: hidden;
}

body.single-product .woocommerce-product-gallery .zoomImg {
  display: none !important;
}

body.single-product iframe {
  max-width: 100%;
}

body #app {
  width: var(--hf-page-shell);
  max-width: 1200px;
  min-height: auto;
  margin-inline: auto;
  padding: clamp(12px, 3vw, 28px) 0;
  color: var(--hf-ink);
  scroll-behavior: smooth;
}

body #app[v-cloak],
body .hiddenfence-product-configurator #app[v-cloak] {
  display: none !important;
}

body #app,
body #app * {
  box-sizing: border-box;
}

body #app > h2,
body #app > p {
  max-width: 720px;
  margin-inline: auto;
}

body #app .q {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto clamp(18px, 3vw, 28px);
  padding: clamp(22px, 3.4vw, 40px);
  border: 1px solid rgba(150, 120, 78, 0.16);
  border-radius: 8px;
  background: #fff;
  box-shadow:
    rgba(0, 70, 53, 0.08) 0 18px 45px,
    rgba(0, 70, 53, 0.08) 0 0 0 1px;
  text-align: center;
}

body #app .q img {
  max-width: 100%;
  height: auto;
}

body #app .q::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--hf-teal);
  opacity: 0.72;
}

body #app .q.complete {
  border-color: rgba(0, 121, 92, 0.34);
  box-shadow:
    rgba(0, 70, 53, 0.10) 0 20px 54px,
    rgba(0, 121, 92, 0.26) 0 0 0 1px;
}

body #app .q.complete .flex {
  align-items: center;
}

body #app .q.complete .left,
body #app .q.complete .right {
  text-align: left;
}

body #app .q.complete .left img,
body #app .q.complete .right img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
}

/* The installation-layouts reference diagram is a tall portrait image; the 420px
   height cap letterboxed it down to a small strip. Let it fill its column at full
   size so it is actually legible. */
body #app .q.complete .left img[src*="installation-layouts"],
body #app .q.complete .right img[src*="installation-layouts"] {
  max-height: none;
  height: auto;
}

body #app .q h1,
body #app .q h2,
body #app .q h3 {
  max-width: 820px;
  margin: 0 auto 16px;
  color: var(--hf-teal);
  text-align: center;
}

body #app .q h1 {
  font-size: clamp(22px, 2.2vw, 30px);
}

body #app .q h2 {
  font-size: clamp(19px, 1.8vw, 25px);
}

body #app .q h3 {
  font-size: clamp(17px, 1.5vw, 22px);
}

body #app .q p {
  max-width: 760px;
  margin: 0 auto 14px;
}

body #app .red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto 16px;
  padding: 8px 12px;
  border: 1px solid rgba(194, 82, 36, 0.18);
  border-radius: 6px;
  background: #fff6ef;
  color: #94441e;
  font-size: 13px;
  font-weight: 650;
}

body #app .red p {
  margin: 0;
}

body #app ul.radiolist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  align-items: stretch;
  justify-content: center;
  width: min(100%, 920px);
  margin: 18px auto 22px;
  padding: 0;
  gap: 10px;
}

body #app ul.radiolist li {
  display: flex;
  min-width: 0;
  margin: 0;
  list-style: none;
}

body #app ul.radiolist label {
  display: flex;
  position: relative;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 12px 10px;
  border: 1px solid var(--hf-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--hf-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  box-shadow: rgba(0, 70, 53, 0.06) 0 1px 0;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

body #app ul.radiolist label:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 121, 92, 0.34);
  background: #fbf9f7;
  box-shadow: rgba(0, 70, 53, 0.12) 0 10px 24px;
}

body #app ul.radiolist label:active {
  transform: translateY(0);
}

body #app ul.radiolist label.selected {
  border-color: var(--hf-teal);
  background: var(--hf-sage);
  color: var(--hf-ink);
  box-shadow:
    rgba(150, 120, 78, 0.22) 0 0 0 1px,
    rgba(0, 70, 53, 0.12) 0 12px 26px;
}

body #app ul.radiolist label.selected::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--hf-teal);
  box-shadow: 0 0 0 3px rgba(150, 120, 78, 0.12);
}

body #app ul.radiolist input[type="radio"] {
  accent-color: var(--hf-teal);
}

body #app ul.radiolist input.img {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
}

body #app ul.systems,
body #app ul.collartype {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  width: min(100%, 980px);
}

body #app ul.systems label,
body #app ul.collartype label {
  justify-content: flex-start;
  min-height: 100%;
  padding: 16px;
}

body #app ul.systems img,
body #app ul.collartype img {
  width: min(100%, 220px);
  max-height: 170px;
  object-fit: contain;
  margin: 0 auto 8px;
}

/* Collar size silhouettes: render both at a shared height with natural width
   (bottom-aligned) so the Medium/Large vs Toy/Small images line up and the real
   size difference reads — instead of being stretched to a common width, which made
   the small-dog image render taller than the large-dog one. */
body #app ul.collartype img {
  width: auto;
  height: clamp(54px, 6vw, 66px);
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
  margin: 0 auto 10px;
}

body #app ul.collartype label div,
body #app ul.systems label div {
  width: 100%;
  color: var(--hf-eucalyptus);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

body #app ul.collartype label div ul,
body #app ul.systems label div ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

body #app .colours {
  width: 46px;
  height: 46px;
  max-height: 46px;
  object-fit: cover;
  border-radius: 8px;
}

body #app img.collar {
  width: auto;
  max-width: 96px;
  max-height: 96px;
  object-fit: contain;
}

body #app .flex {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
}

body #app .left,
body #app .right {
  min-width: 0;
  flex: initial;
}

body #app .collarsetting {
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-radius: 8px;
  background: rgba(234, 243, 239, 0.42);
}

body #app .dragtorotate {
  position: static;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0 0 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--hf-sage);
  color: var(--hf-ink);
  font-size: 12px;
  font-weight: 650;
}

body #app .dragtorotate svg {
  flex: 0 0 auto;
}

body #app .productitems {
  width: min(100%, 920px);
  max-width: 920px;
  margin: 18px auto 24px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--hf-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.08) 0 12px 28px;
}

body #app .productitems th,
body #app .productitems td {
  padding: 12px;
  border-bottom: 1px solid var(--hf-line);
  color: var(--hf-ink);
  font-size: 14px;
  vertical-align: middle;
}

body #app .productitems tr:first-child td {
  background: var(--hf-sage);
  color: var(--hf-teal);
  font-weight: 750;
}

body #app .productitems tr:last-child td {
  border-bottom: 0;
  background: rgba(234, 243, 239, 0.45);
}

body #app .productitems td:first-child {
  width: 108px;
  text-align: center;
}

/* Phones: the summary table must fit without sideways scrolling — slimmer
   image column, tighter cells, item names wrap, prices stay on one line.
   table-layout/white-space are !important because a generic mobile rule
   (`body.page:not(...) .entry-content :where(table…) { table-layout: fixed }`)
   otherwise collapses the colspan'd columns — zero-width image column,
   header cells painted over each other. */
@media (max-width: 620px) {
  body #app .productitems {
    table-layout: auto !important;
  }

  body #app .productitems th,
  body #app .productitems td {
    padding: 9px 8px;
    font-size: 13px;
    white-space: normal !important;
  }

  body #app .productitems td:first-child {
    width: 56px;
  }

  body #app .productitems td:first-child img {
    width: 44px;
    height: 44px;
  }

  body #app .productitems td:last-child {
    white-space: nowrap !important;
  }

  /* The colspan'd header row misaligns once the image column collapses on
     phones ("Qty" floats over the item names) — and name/qty/price need no
     labels at this size. */
  body #app .productitems tr:first-child {
    display: none;
  }
}

body #app .form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  width: min(100%, 760px);
  max-width: 760px;
}

body #app .form > p,
body #app .form > div {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}

body #app .form textarea,
body #app textarea {
  min-height: 120px;
}

body #app input[type="text"],
body #app input[type="email"],
body #app input[type="tel"],
body #app input[type="number"],
body #app select,
body #app textarea {
  border: 1px solid rgba(150, 120, 78, 0.16);
  background: #fff;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

body #app input[type="text"]:focus,
body #app input[type="email"]:focus,
body #app input[type="tel"]:focus,
body #app input[type="number"]:focus,
body #app select:focus,
body #app textarea:focus {
  outline: none;
  border-color: var(--hf-teal);
  background: #fff;
  box-shadow:
    rgba(150, 120, 78, 0.24) 0 0 0 3px,
    rgba(0, 70, 53, 0.10) 0 10px 24px;
}

body #app input[type="number"] {
  max-width: 240px;
  text-align: center;
}

body #app .button,
body #app button.button,
body #app a.button {
  min-height: 42px;
  padding: 11px 18px;
  border-radius: 8px;
  background: var(--hf-teal);
  box-shadow:
    rgba(0, 70, 53, 0.16) 0 12px 24px,
    rgba(255, 255, 255, 0.18) 0 1px 0 inset;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

body #app .button:hover,
body #app button.button:hover,
body #app a.button:hover {
  transform: translateY(-1px);
  background: var(--hf-teal-hover);
  box-shadow:
    rgba(0, 70, 53, 0.22) 0 16px 30px,
    rgba(255, 255, 255, 0.20) 0 1px 0 inset;
}

body #app .button:active,
body #app button.button:active,
body #app a.button:active {
  transform: translateY(0);
}

body #app .button:focus-visible,
body #app button.button:focus-visible,
body #app a.button:focus-visible,
body #app a:focus-visible,
body #app label:focus-within {
  outline: 3px solid rgba(150, 120, 78, 0.25);
  outline-offset: 3px;
}

body #app button[disabled],
body #app .button[disabled],
body #app button.button:disabled {
  transform: none;
  background: #ded9d3;
  color: #81918c;
  box-shadow: none;
  cursor: wait;
}

body #app .previous {
  margin-top: 16px;
  text-align: left;
}

body #app .previous a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hf-eucalyptus);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

body #app .previous a:hover {
  color: var(--hf-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.single-product .hiddenfence-product-configurator {
  margin-top: clamp(18px, 3vw, 34px);
}

body.single-product .hiddenfence-product-configurator::before {
  content: "Configure your system";
  display: block;
  margin: 0 0 10px;
  color: var(--hf-teal);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 800;
  line-height: 1.15;
}

body.single-product .hiddenfence-product-configurator #app {
  width: 100%;
  max-width: 100%;
  padding: 0;
  counter-reset: hf-config-step;
}

body.single-product .hiddenfence-product-configurator #app > h2,
body.single-product .hiddenfence-product-configurator #app > p {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

body.single-product .hiddenfence-product-configurator #app .q {
  width: 100%;
  max-width: 100%;
  margin: 0 0 14px;
  padding: clamp(18px, 2.4vw, 28px);
  border-color: rgba(150, 120, 78, 0.18);
  background:
    linear-gradient(180deg, rgba(247, 251, 249, 0.96), #fff 160px);
  box-shadow:
    rgba(0, 70, 53, 0.08) 0 12px 26px,
    rgba(0, 70, 53, 0.07) 0 0 0 1px;
  text-align: left;
}

body.single-product .hiddenfence-product-configurator #app .q:not(.complete) {
  counter-increment: hf-config-step;
  border-color: rgba(0, 121, 92, 0.30);
  box-shadow:
    rgba(0, 70, 53, 0.12) 0 18px 36px,
    rgba(150, 120, 78, 0.16) 0 0 0 1px;
}

body.single-product .hiddenfence-product-configurator #app .q::before {
  height: 3px;
}

body.single-product .hiddenfence-product-configurator #app .q:not(.complete)::after,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected)::after {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

body.single-product .hiddenfence-product-configurator #app .q:not(.complete)::after {
  content: "Next";
  background: #f1ece3;
  color: var(--hf-teal);
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected)::after {
  content: "Selected";
  background: var(--hf-teal);
  color: #fff;
}

body.single-product .hiddenfence-product-configurator #app .q h1,
body.single-product .hiddenfence-product-configurator #app .q h2,
body.single-product .hiddenfence-product-configurator #app .q h3 {
  max-width: none;
  margin: 0 72px 14px 0;
  text-align: left;
}

body.single-product .hiddenfence-product-configurator #app .q h1 {
  font-size: clamp(20px, 1.8vw, 25px);
}

body.single-product .hiddenfence-product-configurator #app .q h2 {
  font-size: clamp(18px, 1.55vw, 22px);
}

body.single-product .hiddenfence-product-configurator #app .q h3 {
  font-size: clamp(16px, 1.35vw, 19px);
}

body.single-product .hiddenfence-product-configurator #app .q p {
  max-width: none;
  margin-inline: 0;
  font-size: 14px;
  line-height: 1.55;
}

body.single-product .hiddenfence-product-configurator #app .q .flex:has(.left.desktop:empty) {
  grid-template-columns: 1fr;
  gap: 0;
}

body.single-product .hiddenfence-product-configurator #app .q .left.desktop:empty {
  display: none;
}

body.single-product .hiddenfence-product-configurator #app .q .right {
  width: 100%;
}

body.single-product .hiddenfence-product-configurator #app .red {
  justify-content: flex-start;
  margin: 0 0 14px;
  border-color: rgba(194, 82, 36, 0.16);
  background: #fff7f0;
}

body.single-product .hiddenfence-product-configurator #app ul.radiolist {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 16px 0 18px;
  gap: 9px;
}

body.single-product .hiddenfence-product-configurator #app ul.radiolist label {
  min-height: 50px;
  padding: 11px 9px;
  background: #fff;
}

body.single-product .hiddenfence-product-configurator #app ul.systems,
body.single-product .hiddenfence-product-configurator #app ul.collartype {
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  width: 100%;
  margin-top: 16px;
}

body.single-product .hiddenfence-product-configurator #app ul.systems label,
body.single-product .hiddenfence-product-configurator #app ul.collartype label {
  min-height: 0;
  padding: 14px;
  text-align: center;
}

body.single-product .hiddenfence-product-configurator #app ul.systems img,
body.single-product .hiddenfence-product-configurator #app ul.collartype img {
  width: min(100%, 170px);
  max-height: 116px;
  margin-bottom: 10px;
}

body.single-product .hiddenfence-product-configurator #app ul.collartype img {
  width: auto;
  height: clamp(48px, 7vw, 60px);
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
}

body.single-product .hiddenfence-product-configurator #app ul.systems label div,
body.single-product .hiddenfence-product-configurator #app ul.collartype label div {
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

body.single-product .hiddenfence-product-configurator #app .collarsetting {
  margin-bottom: 12px;
  padding: 14px;
}

body.single-product .hiddenfence-product-configurator #app .collarsetting h3 {
  margin-right: 0;
  margin-bottom: 10px;
}

body.single-product .hiddenfence-product-configurator #app .collarsetting ul.collartype {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.single-product .hiddenfence-product-configurator #app .collarsetting ul.collartype label {
  padding: 12px;
}

body.single-product .hiddenfence-product-configurator #app .collarsetting ul.collartype img {
  width: min(100%, 108px);
  max-height: 74px;
}

body.single-product .hiddenfence-product-configurator #app .collarsetting ul.collartype .dotpoints {
  margin-top: 7px;
  padding-left: 15px;
  text-align: left;
}

body.single-product .hiddenfence-product-configurator #app .collarsetting ul.collartype .dotpoints li {
  font-size: 11px;
  line-height: 1.28;
}

body.single-product .hiddenfence-product-configurator #app .collarsetting ul.collartype .dotpoints li:nth-child(n+3) {
  display: none;
}

body.single-product .hiddenfence-product-configurator #app .collarsetting .price {
  margin-top: 8px;
  color: var(--hf-teal);
  font-size: 13px;
  font-weight: 800;
}

body.single-product .hiddenfence-product-configurator #app .collarsetting ul.radiolist:not(.collartype) {
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 8px;
}

body.single-product .hiddenfence-product-configurator #app .collarsetting ul.radiolist:not(.collartype) label {
  min-height: 88px;
  padding: 9px 7px;
  font-size: 12px;
}

body.single-product .hiddenfence-product-configurator #app .collarsetting .colours {
  width: 42px;
  height: 34px;
  max-height: 34px;
  object-fit: contain;
}

body.single-product .hiddenfence-product-configurator #app .collarsetting img.collar {
  display: block;
  max-width: min(100%, 190px);
  max-height: 150px;
  margin-inline: auto;
}

body.single-product .hiddenfence-product-configurator #app .collarsetting .spritespin-instance {
  width: min(100%, 190px) !important;
  height: 190px !important;
  margin: 10px auto 0;
  border: 1px solid rgba(150, 120, 78, 0.10);
  border-radius: 8px;
  background: #fff;
}

body.single-product .hiddenfence-product-configurator #app .collarsetting .spritespin-stage,
body.single-product .hiddenfence-product-configurator #app .collarsetting .spritespin-canvas {
  width: 100% !important;
  height: 100% !important;
}

body.single-product .hiddenfence-product-configurator #app ul.radiolist label.selected,
body.single-product .hiddenfence-product-configurator #app ul.systems label.selected,
body.single-product .hiddenfence-product-configurator #app ul.collartype label.selected {
  border-color: var(--hf-teal);
  background: #ffffff;
  box-shadow:
    rgba(0, 121, 92, 0.22) 0 0 0 1px,
    rgba(0, 70, 53, 0.12) 0 12px 26px;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) {
  padding: 16px;
  border-color: rgba(150, 120, 78, 0.24);
  background: #f9f7f3;
  box-shadow: rgba(0, 70, 53, 0.08) 0 8px 20px;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) h1,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) h2,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) h3 {
  margin-bottom: 10px;
  color: var(--hf-eucalyptus);
  font-size: 14px;
  line-height: 1.25;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) .red,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) .previous,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) button,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) a.button {
  display: none;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) ul.radiolist,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) ul.systems,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) ul.collartype {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  gap: 0;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) li:not(:has(label.selected)) {
  display: none;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  box-shadow: none;
  text-align: left;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected::after {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected img {
  flex: 0 0 58px;
  width: 58px;
  max-height: 44px;
  margin: 0;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected div {
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected:has(img) {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-right: 38px;
  font-size: 0;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected:has(img) br {
  display: none;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected:has(img) strong {
  grid-column: 2;
  color: var(--hf-ink);
  font-size: 13px;
  line-height: 1.2;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected:has(img) .price {
  grid-column: 3;
  margin: 0;
  color: var(--hf-teal);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(.dotpoints):not(:has(label)),
body.single-product .hiddenfence-product-configurator #app .q.complete:has(.textleft):not(:has(label)) {
  display: none;
}

body.single-product .hiddenfence-product-configurator #app .button,
body.single-product .hiddenfence-product-configurator #app button.button,
body.single-product .hiddenfence-product-configurator #app a.button {
  min-width: 132px;
}

body.single-product .hiddenfence-product-configurator #app .previous a {
  padding: 7px 10px;
  border: 1px solid rgba(150, 120, 78, 0.12);
  border-radius: 999px;
  background: #f7f4ef;
}

body.single-product .hiddenfence-product-configurator #app .productitems {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

body.single-product .hiddenfence-product-configurator #app .form {
  width: 100%;
  max-width: 100%;
}

body #app .fade-enter-active,
body #app .fade-leave-active {
  transition: opacity 220ms ease, transform 220ms ease;
}

body #app .fade-enter,
body #app .fade-leave-to {
  opacity: 0;
  transform: translateY(8px);
}

@media (max-width: 700px) {
  .hf-header__inner {
    min-height: 68px;
  }

  .hf-header .wp-block-shortcode {
    display: none;
  }

  p,
  li {
    font-size: 14px;
    line-height: 1.55;
  }

  body #app {
    padding-inline: 0;
  }

  body #app .q {
    padding: 20px 14px 22px;
    border-radius: 8px;
  }

  body #app ul.radiolist,
  body #app ul.systems,
  body #app ul.collartype {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body #app ul.systems,
  body #app ul.collartype {
    grid-template-columns: 1fr;
  }

  body.single-product .hiddenfence-product-configurator #app .q {
    padding: 18px 12px 20px;
  }

  body.single-product .hiddenfence-product-configurator #app .q h1,
  body.single-product .hiddenfence-product-configurator #app .q h2,
  body.single-product .hiddenfence-product-configurator #app .q h3 {
    margin-right: 56px;
  }

  body.single-product .hiddenfence-product-configurator #app ul.systems label,
  body.single-product .hiddenfence-product-configurator #app ul.collartype label {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 76px;
    padding: 10px;
    font-size: 0;
    text-align: left;
  }

  body.single-product .hiddenfence-product-configurator #app ul.systems label br,
  body.single-product .hiddenfence-product-configurator #app ul.collartype label br {
    display: none;
  }

  body.single-product .hiddenfence-product-configurator #app ul.systems img,
  body.single-product .hiddenfence-product-configurator #app ul.collartype img {
    grid-column: 1;
    width: 58px;
    max-height: 48px;
    margin: 0;
  }

  body.single-product .hiddenfence-product-configurator #app ul.systems label strong,
  body.single-product .hiddenfence-product-configurator #app ul.collartype label strong {
    grid-column: 2;
    color: var(--hf-ink);
    font-size: 13px;
    line-height: 1.18;
  }

  body.single-product .hiddenfence-product-configurator #app ul.systems label div:not(.price),
  body.single-product .hiddenfence-product-configurator #app ul.collartype label div:not(.price) {
    display: none;
  }

  body.single-product .hiddenfence-product-configurator #app ul.systems label .price,
  body.single-product .hiddenfence-product-configurator #app ul.collartype label .price {
    grid-column: 3;
    margin: 0 22px 0 0;
    color: var(--hf-teal);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  body.single-product .hiddenfence-product-configurator #app .collarsetting ul.radiolist:not(.collartype) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.single-product .hiddenfence-product-configurator #app .collarsetting .spritespin-instance {
    width: 150px !important;
    height: 150px !important;
  }

  body #app .flex,
  body #app .form {
    grid-template-columns: 1fr;
  }

  body #app .productitems {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  body #app .button,
  body #app button.button,
  body #app a.button {
    width: 100%;
  }
}

/* Homepage product showcase. */
body.home.page-id-35241 main.wp-block-group > .wp-block-group:first-child {
  display: none;
}

body.home.page-id-35241 main.wp-block-group {
  margin-block-start: 0 !important;
}

body.home.page-id-35241 .entry-content {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb {
  box-sizing: border-box;
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: clamp(520px, calc(100vh - 78px), 860px);
  margin: 0 calc((100vw - 100%) / -2) !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(150, 120, 78, 0.14), rgba(239, 249, 245, 0.94)),
    url("https://i.vimeocdn.com/video/2185002205-13380f4a43ea46cef5f86b36e250e21f9fffc601b8f554df0fd7f046334cd0d7-d?f=webp&region=us") center / cover no-repeat,
    #f5f1eb;
}

/* Atmosphere tint removed so the hero footage plays clean — legibility now
   rests on the copy's own text-shadow and the buttons' glass surfaces. */
body.home.page-id-35241 .entry-content > .wp-block-nk-awb::after {
  content: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: none;
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb > .nk-awb-wrap {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  pointer-events: none;
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .nk-awb-inner,
body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-video-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-video-fallback iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 178vh);
  height: max(56.25vw, 100vh);
  border: 0;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 360ms ease;
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-video-fallback.is-loaded iframe {
  opacity: 1;
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb > .nk-awb-wrap-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(960px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(82px, 12vw, 150px) 0 clamp(72px, 10vw, 132px);
  color: #fff;
  text-align: center;
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-shot__title {
  max-width: 860px;
  margin: 0 auto;
  color: #fff !important;
  font-size: clamp(34px, 5vw, 58px) !important;
  line-height: 1.04;
  /* Carries legibility on its own now that the scrims are gone: a tight dark
     halo on the glyphs rather than a tint across the whole frame. */
  text-shadow:
    0 1px 3px rgba(0, 20, 15, 0.55),
    0 2px 14px rgba(0, 20, 15, 0.45);
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-shot__lead {
  max-width: 670px;
  margin: 18px auto 0;
  color: #fff !important;
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 700;
  line-height: 1.42;
  text-shadow: 0 2px 18px rgba(0, 26, 20, 0.34);
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-shot__options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  max-width: 800px;
  margin: 22px auto 0;
  padding: 0;
  list-style: none;
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-shot__options li {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 8px;
  background: rgba(0, 60, 46, 0.38);
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0, 34, 26, 0.14);
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-buttons {
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

/* Hero composition: copy sits to the left over the aerial shot and the four
   calls-to-action form a 2x2 block beneath it. Button icons, glass surfaces
   and type treatment are deliberately left as they are. */
body.home.page-id-35241 .entry-content > .wp-block-nk-awb > .nk-awb-wrap-content {
  align-items: flex-start;
  text-align: left;
}

/* WordPress's constrained-layout rule centres every child with
   `margin-left/right: auto !important`, so the left alignment has to be
   stated the same way. */
body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-shot__title {
  max-width: 640px; /* holds the headline to three lines, as in the reference */
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-size: clamp(26px, 2.8vw, 38px) !important;
  line-height: 1.12;
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-shot__lead,
body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-shot__options {
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-start;
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  /* 600px => 295px buttons: the minimum that fits the longest label
     ("Professional Installation & Training", measured at 289px) on one line
     without shrinking the text further. Still under the original 314px. */
  width: min(100%, 600px);
  margin-top: 24px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-button__link {
  min-height: 0 !important;
}

/* The trust strip stays centred in the hero rather than following the copy. */
body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-trust {
  align-self: center;
}

/* Anchor the whole hero block to the bottom-left of the section. Scoped above
   the phone breakpoint: below it the hero is a stacked video band + copy, and
   flex-end there would push the content sideways instead of down. */
@media (min-width: 621px) {
  /* AWB lays the section out as a COLUMN flex (its valign-center class), so
     the vertical position is governed by justify-content, not align-items. */
  body.home.page-id-35241 .entry-content > .wp-block-nk-awb {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* Full-bleed content box: the copy hugs the left edge instead of sitting in
     a centred 960px column, which frees the right of the frame so the video
     reads clearly on wide screens. Top padding goes — it made the block
     almost as tall as the section, leaving flex-end nothing to push against. */
  body.home.page-id-35241 .entry-content > .wp-block-nk-awb > .nk-awb-wrap-content {
    width: 100%;
    max-width: none;
    padding-top: 0;
    padding-right: clamp(20px, 4vw, 72px);
    padding-bottom: clamp(28px, 3.4vw, 52px);
    padding-left: clamp(20px, 4vw, 72px);
  }
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-button__link {
  min-height: 56px !important;
  padding: 16px 22px !important;
  border-radius: 8px !important;
  /* Uppercase is applied here rather than typed into the page content, so the
     underlying text stays sentence case for screen readers and for editing. */
  font-size: clamp(13px, 1.05vw, 15px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  box-shadow: 0 18px 34px rgba(0, 34, 26, 0.2) !important;
}

/* Icon buttons run much tighter — the 80x50 icon carries the visual weight,
   so the chrome around it shrinks while the icon size stays put. */
body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-button__link:has(.hf-btn-ico) {
  min-height: 0 !important;
  padding: 6px 12px !important;
  /* Sized so the longest label ("Installation & Training") stays on one line
     inside the button; nowrap guards it if the copy ever changes. This lives
     here — after, and more specific than, the generic hero-button rule above,
     which also uses !important on font-size. */
  font-size: clamp(11px, 0.86vw, 12.5px) !important;
  letter-spacing: 0;
  white-space: nowrap;
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-button.hf-button-primary .wp-block-button__link {
  border-color: #fff !important;
  background: #fff !important;
  color: var(--hf-teal) !important;
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-button.hf-button-primary .wp-block-button__link:hover,
body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-button.hf-button-primary .wp-block-button__link:focus-visible {
  border-color: #fff !important;
  background: #fff !important;
  color: var(--hf-teal-hover) !important;
  box-shadow: 0 22px 42px rgba(0, 34, 26, 0.28) !important;
  transform: translateY(-2px);
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-button.hf-button-secondary .wp-block-button__link {
  border-color: rgba(255, 255, 255, 0.42) !important;
  background: rgba(0, 34, 26, 0.82) !important;
  color: #fff !important;
  backdrop-filter: blur(10px);
}

body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-button.hf-button-secondary .wp-block-button__link:hover,
body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-button.hf-button-secondary .wp-block-button__link:focus-visible {
  border-color: rgba(255, 255, 255, 0.7) !important;
  background: rgba(0, 60, 46, 0.92) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

@media (max-width: 700px) {
  body.home.page-id-35241 .entry-content > .wp-block-nk-awb > .nk-awb-wrap-content {
    width: min(100% - 28px, 520px);
    padding-top: 72px;
    padding-bottom: 82px;
  }

  body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-shot__options {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 360px);
  }

  body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-shot__options li {
    justify-content: center;
  }

  body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-buttons {
    width: min(100%, 360px);
  }

  body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-button,
  body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-button__link {
    width: 100%;
  }
}

.hf-home-showcase {
  --hf-home-shell: min(1200px, calc(100vw - 32px));
  box-sizing: border-box;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  margin-left: calc((100vw - 100%) / -2) !important;
  margin-right: calc((100vw - 100%) / -2) !important;
  overflow-x: clip;
  color: var(--hf-ink);
}

.hf-home-showcase a {
  color: inherit;
}

.hf-home-shell {
  width: var(--hf-home-shell);
  margin-inline: auto;
}

.hf-home-hero {
  margin-top: 0;
  padding: 58px 0 74px;
  background: #faf6ee;
  border-block: 1px solid rgba(150, 120, 78, 0.16);
}

.hf-home-hero__intro,
.hf-home-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.55fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 38px;
}

.hf-home-hero__intro {
  margin-bottom: 18px;
}

.hf-home-kicker {
  margin: 0 0 10px;
  color: var(--hf-eucalyptus);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hf-home-hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--hf-teal);
  font-size: 42px;
  line-height: 1.04;
  text-wrap: balance;
}

.hf-home-lede,
.hf-home-section-heading p {
  max-width: 540px;
  margin: 0;
  color: var(--hf-eucalyptus);
  font-size: 16px;
  line-height: 1.65;
}

.hf-home-system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.hf-home-card {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.07) 0 16px 38px;
  text-decoration: none;
}

.hf-home-card--feature {
  grid-column: span 2;
}

.hf-home-card__media {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 0px;
  background: #FFF;
  text-decoration: none;
}

.hf-home-card--feature .hf-home-card__media {
  min-height: 260px;
}

.hf-home-card__media img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  transition: transform 180ms ease;
}

.hf-home-card__media:hover img {
  transform: translateY(-2px);
}

.hf-home-card--feature .hf-home-card__media img {
  max-height: 340px;
}

.hf-home-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.hf-home-card__eyebrow {
  color: var(--hf-eucalyptus);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hf-home-card h2,
.hf-home-card h3 {
  margin: 0;
  color: var(--hf-teal);
  font-size: 21px;
  line-height: 1.18;
  text-wrap: balance;
}

.hf-home-card--feature h2 {
  font-size: 23px;
}

.hf-home-card p {
  margin: 0;
  color: var(--hf-ink);
  font-size: 15px;
  line-height: 1.58;
}

.hf-home-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}

.hf-home-action {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 7px;
  background: var(--hf-teal);
  color: #fff !important;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease;
}

.hf-home-action:hover {
  background: var(--hf-teal-hover);
  transform: translateY(-1px);
}

.hf-home-action--secondary {
  background: #efe9e0;
  color: var(--hf-teal) !important;
}

.hf-home-action--secondary:hover {
  background: #e7ded2;
}

.hf-home-training {
  padding: 76px 0;
  background: #fff;
}

.hf-home-section-heading h2 {
  margin: 0;
  color: var(--hf-teal);
  font-size: 33px;
  line-height: 1.08;
}

.hf-home-training-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.hf-home-training .hf-home-card {
  box-shadow: none;
}

.hf-home-training .hf-home-card__media {
  min-height: 170px;
  background: #FFF;
}

.hf-home-training .hf-home-card__media img {
  max-height: 170px;
}

.hf-home-trust {
  display: flex;
  align-items: center;
  min-height: clamp(420px, 34vw, 560px);
  padding: clamp(54px, 6vw, 92px) 0;
  background:
    linear-gradient(180deg, rgba(5, 34, 25, 0.48) 0%, rgba(5, 34, 25, 0.62) 100%),
    linear-gradient(90deg, rgba(5, 34, 25, 0.5) 0%, rgba(5, 34, 25, 0.12) 52%, rgba(5, 34, 25, 0.42) 100%),
    url("/wp-content/uploads/2016/06/installation-of-hidden-dog-fence.jpg") center / cover no-repeat;
  color: #fff;
}

.hf-home-trust__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.hf-home-trust__inner > div {
  max-width: 760px;
}

.hf-home-trust h2 {
  margin: 0;
  max-width: 620px;
  color: #fff;
  font-size: 33px;
  line-height: 1.14;
  text-shadow: 0 2px 18px rgba(2, 20, 14, 0.45);
}

.hf-home-trust p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.65;
  text-shadow: 0 1px 12px rgba(2, 20, 14, 0.4);
}

.hf-home-faq {
  padding: 72px 0 82px;
  background: #fff;
  border-top: 1px solid rgba(150, 120, 78, 0.10);
}

.hf-home-faq__heading {
  margin-bottom: 30px;
}

.hf-home-faq__heading h2 {
  margin: 0;
  color: var(--hf-teal);
  font-size: 33px;
  line-height: 1.08;
}

.hf-home-faq__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.hf-home-faq__item {
  overflow: hidden;
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.05) 0 10px 28px;
}

.hf-home-faq__item[open] {
  box-shadow: rgba(0, 70, 53, 0.08) 0 16px 38px;
}

.hf-home-faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 16px 48px 16px 18px;
  color: var(--hf-teal);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}

.hf-home-faq__item summary::-webkit-details-marker {
  display: none;
}

.hf-home-faq__item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 18px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #efe9e0;
  color: var(--hf-teal);
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
}

.hf-home-faq__item[open] summary::after {
  content: "-";
}

.hf-home-faq__answer {
  padding: 0 18px 20px;
  color: var(--hf-ink);
}

.hf-home-faq__answer p,
.hf-home-faq__answer li {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.62;
}

.hf-home-faq__answer ul,
.hf-home-faq__answer ol {
  margin: 0 0 12px;
  padding-left: 20px;
}

.hf-home-faq__answer a {
  color: var(--hf-teal);
}

/* Frequently Asked Questions page: reuse the homepage accordion system. */
body.page-id-92 .entry-content {
  padding-bottom: 0 !important;
}

body.page-id-92 .entry-content > .hf-page-faq {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(42px, 6vw, 72px) 0 clamp(68px, 8vw, 96px);
  background:
    radial-gradient(circle at 18% 0%, rgba(150, 120, 78, 0.08), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f9f6f2 100%);
}

body.page-id-92 .entry-content > .hf-page-faq:first-child {
  margin-top: 0 !important;
}

body.page-id-92 .hf-page-faq .hf-home-shell {
  width: var(--hf-page-shell);
  max-width: var(--hf-page-shell);
}

body.page-id-92 .hf-page-faq .hf-home-faq__list {
  gap: 14px 12px !important;
  align-items: start;
  margin: 0 auto;
}

body.page-id-92 .hf-page-faq .hf-home-faq__item {
  min-height: 92px;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.94);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

body.page-id-92 .hf-page-faq .hf-home-faq__item:hover {
  border-color: rgba(150, 120, 78, 0.24);
  box-shadow: rgba(0, 70, 53, 0.08) 0 16px 34px;
  transform: translateY(-1px);
}

body.page-id-92 .hf-page-faq .hf-home-faq__item summary {
  box-sizing: border-box;
  min-height: 92px;
}

body.page-id-92 .hf-page-faq .hf-home-faq__item[open] summary {
  min-height: 72px;
  border-bottom: 1px solid rgba(150, 120, 78, 0.10);
}

body.page-id-92 .hf-page-faq .hf-home-faq__item summary:focus-visible {
  outline: 3px solid rgba(150, 120, 78, 0.22);
  outline-offset: -3px;
}

body.page-id-92 .hf-page-faq .hf-home-faq__answer p:last-child,
body.page-id-92 .hf-page-faq .hf-home-faq__answer li:last-child {
  margin-bottom: 0;
}

body.page-id-379 .entry-content > .hf-pt4-faq__title {
  max-width: var(--hf-page-shell);
  margin: 68px auto 10px;
  color: var(--hf-teal);
  font-size: 33px;
  line-height: 1.08;
}

body.page-id-379 .entry-content > .hf-pt4-faq__intro {
  max-width: 720px;
  margin: 0 auto 28px;
  color: var(--hf-eucalyptus);
  font-size: 15px;
  line-height: 1.62;
}

body.page-id-379 .hf-pt4-faq__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  width: var(--hf-page-shell);
  max-width: 100%;
  margin: 28px auto 72px;
}

body.page-id-379 .hf-pt4-faq__item {
  overflow: hidden;
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.05) 0 10px 28px;
}

body.page-id-379 .hf-pt4-faq__item.is-open {
  box-shadow: rgba(0, 70, 53, 0.08) 0 16px 38px;
}

body.page-id-379 .hf-pt4-faq__toggle.collapseomatic {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 16px 48px 16px 18px;
  background: transparent !important;
  color: var(--hf-teal);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

body.page-id-379 .hf-pt4-faq__toggle.collapseomatic:hover {
  background: #f8f5f1 !important;
}

body.page-id-379 .hf-pt4-faq__toggle.collapseomatic:focus-visible {
  outline: 2px solid rgba(0, 121, 92, 0.32);
  outline-offset: -4px;
}

body.page-id-379 .hf-pt4-faq__toggle.collapseomatic::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 18px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #efe9e0;
  color: var(--hf-teal);
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
}

body.page-id-379 .hf-pt4-faq__item.is-open > .hf-pt4-faq__toggle.collapseomatic::after,
body.page-id-379 .hf-pt4-faq__toggle.colomat-close::after {
  content: "-";
}

body.page-id-379 .hf-pt4-faq__content.collapseomatic_content {
  margin: 0;
  padding: 0 18px 22px;
  border-top: 1px solid rgba(150, 120, 78, 0.10);
  color: var(--hf-ink);
}

body.page-id-379 .hf-pt4-faq__content p,
body.page-id-379 .hf-pt4-faq__content li {
  margin: 0 0 12px;
  color: var(--hf-ink);
  font-size: 15px;
  line-height: 1.62;
}

body.page-id-379 .hf-pt4-faq__content h2,
body.page-id-379 .hf-pt4-faq__content h3,
body.page-id-379 .hf-pt4-faq__content h4 {
  margin: 18px 0 10px;
  color: var(--hf-teal);
  font-size: 18px;
  line-height: 1.2;
}

body.page-id-379 .hf-pt4-faq__content ul,
body.page-id-379 .hf-pt4-faq__content ol {
  margin: 0 0 14px;
  padding-left: 20px;
}

body.page-id-379 .hf-pt4-faq__content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 18px auto;
  border-radius: 8px;
}

body.page-id-379 .hf-pt4-faq__content a {
  color: var(--hf-teal);
}

@media (max-width: 980px) {
  .hf-home-hero__intro,
  .hf-home-section-heading,
  .hf-home-trust__inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .hf-home-hero h1 {
    font-size: 32px;
  }

  .hf-home-system-grid,
  .hf-home-training-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-id-379 .hf-pt4-faq__list {
    grid-template-columns: 1fr;
  }

  .hf-home-card--feature {
    grid-column: span 2;
  }
}

@media (max-width: 620px) {
  .hf-home-showcase {
    --hf-home-shell: min(100% - 28px, 520px);
  }

  .hf-home-hero {
    margin-top: 18px;
    padding: 38px 0 46px;
  }

  .hf-home-hero h1 {
    font-size: 28px;
  }

  .hf-home-section-heading h2 {
    font-size: 28px;
  }

  .hf-home-trust h2 {
    font-size: 24px;
  }

  .hf-home-faq {
    padding: 46px 0 54px;
  }

  .hf-home-faq__heading h2 {
    font-size: 28px;
  }

  body.page-id-379 .entry-content > .hf-pt4-faq__title {
    margin-top: 46px;
    font-size: 28px;
  }

  .hf-home-system-grid,
  .hf-home-training-grid,
  .hf-home-faq__list {
    grid-template-columns: 1fr;
  }

  .hf-home-card--feature {
    grid-column: auto;
  }

  .hf-home-card__media,
  .hf-home-card--feature .hf-home-card__media {
    min-height: 210px;
  }

  .hf-home-card__body {
    padding: 20px;
  }
}

/* Refreshed legacy content pages. */
body.page-id-10,
body.page-id-16,
body.page-id-65,
body.page-id-90 {
  overflow-x: hidden;
  overflow-x: clip;
}

body.page-id-16 main.wp-block-group,
body.page-id-90 main.wp-block-group {
  margin-block-start: 0 !important;
  background:
    linear-gradient(180deg, rgba(239, 249, 245, 0.96) 0, rgba(255, 255, 255, 0) 380px),
    var(--hf-canvas);
}

body.page-id-16 main.wp-block-group > .wp-block-group:first-child,
body.page-id-90 main.wp-block-group > .wp-block-group:first-child {
  margin-block-start: 0;
  padding: clamp(42px, 5vw, 64px) 16px clamp(20px, 3vw, 32px) !important;
}

body.page-id-16 main.wp-block-group > .wp-block-group:first-child .wp-block-spacer,
body.page-id-90 main.wp-block-group > .wp-block-group:first-child .wp-block-spacer {
  display: none !important;
}

body.page-id-16 .wp-block-post-title,
body.page-id-90 .wp-block-post-title {
  margin: 0;
  color: var(--hf-teal);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.05;
}

body.page-id-10 .entry-content,
body.page-id-16 .entry-content,
body.page-id-65 .entry-content,
body.page-id-90 .entry-content {
  margin-block-start: 0;
  padding-bottom: clamp(58px, 8vw, 100px);
}

body.page-id-10 .entry-content > .hf-legacy-page,
body.page-id-16 .entry-content > .hf-legacy-page,
body.page-id-65 .entry-content > .hf-legacy-page,
body.page-id-90 .entry-content > .hf-legacy-page {
  width: var(--hf-page-shell) !important;
  max-width: 1200px !important;
  margin-inline: auto;
  padding-inline: 0 !important;
}

.hf-legacy-page {
  box-sizing: border-box;
  min-width: 0;
  color: var(--hf-eucalyptus);
}

.hf-legacy-page *,
.hf-legacy-page *::before,
.hf-legacy-page *::after {
  box-sizing: border-box;
}

.hf-legacy-section {
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(150, 120, 78, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 44px rgba(0, 70, 53, 0.06);
}

.hf-legacy-section--intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.42fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  margin: clamp(24px, 4vw, 42px) 0 clamp(18px, 3vw, 30px);
  padding: clamp(24px, 4vw, 38px);
}

.hf-legacy-page--about .hf-legacy-section--intro,
.hf-legacy-page--distributor-opportunities .hf-legacy-section--intro {
  margin-top: 0;
}

.hf-legacy-section--intro > :not(.hf-legacy-stats) {
  grid-column: 1;
}

.hf-legacy-section--intro h2,
.hf-legacy-section h2 {
  margin: 0 0 14px !important;
  color: var(--hf-teal);
  font-size: clamp(25px, 2.3vw, 33px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0;
}

.hf-legacy-section--intro p,
.hf-legacy-section p,
.hf-legacy-section li,
.hf-legacy-page .wp-block-group p,
.hf-legacy-page .wp-block-group li {
  color: var(--hf-eucalyptus);
  font-size: 15px;
  line-height: 1.64;
}

.hf-legacy-section--intro p:first-child strong,
.hf-legacy-section--intro p:first-child a {
  color: var(--hf-teal);
}

.hf-legacy-stats {
  grid-column: 2;
  grid-row: 1 / span 8;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(150, 120, 78, 0.16);
  border-radius: 8px;
  background: #f5f0ea;
}

.hf-legacy-stats div {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(150, 120, 78, 0.12);
}

.hf-legacy-stats div:last-child {
  border-bottom: 0;
}

.hf-legacy-stats strong {
  display: block;
  color: var(--hf-teal);
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
}

.hf-legacy-stats span {
  display: block;
  margin-top: 7px;
  color: #3e5e56;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.hf-legacy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.hf-legacy-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 11px 18px;
  border: 1px solid var(--hf-teal);
  border-radius: 8px;
  background: var(--hf-teal);
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.hf-legacy-action:hover,
.hf-legacy-action:focus-visible {
  background: #005f49;
  box-shadow: 0 10px 22px rgba(150, 120, 78, 0.18);
  transform: translateY(-1px);
}

.hf-legacy-action--secondary {
  background: #fff;
  color: var(--hf-teal) !important;
}

.hf-legacy-action--secondary:hover,
.hf-legacy-action--secondary:focus-visible {
  background: #f5f0ea;
  color: #005f49 !important;
}

.hf-legacy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.hf-legacy-grid .hf-legacy-section {
  min-height: 100%;
  padding: clamp(22px, 3vw, 30px);
}

.hf-legacy-section img.alignright,
.hf-legacy-section img.alignleft,
.hf-legacy-section p > img {
  float: none !important;
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 0 18px !important;
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(0, 70, 53, 0.12);
}

.hf-about-quote {
  margin-top: 18px;
  padding: 18px 20px;
  border-left: 4px solid var(--hf-teal);
  border-radius: 8px;
  background: #f6f3ed;
  color: #173f36 !important;
  font-weight: 650;
}

.hf-about-quote strong,
.hf-about-quote em {
  font-style: normal;
  font-weight: 650;
}

.hf-about-cite {
  margin-top: -4px !important;
  color: var(--hf-teal) !important;
  font-weight: 800;
}

.hf-legacy-section--products {
  margin-top: 16px;
  padding: clamp(24px, 3.4vw, 34px);
}

.hf-legacy-section--products ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0 !important;
  list-style: none;
}

.hf-legacy-section--products li {
  min-height: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(150, 120, 78, 0.13);
  border-radius: 8px;
  background: #f9f6f2;
  color: #173f36;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.hf-market-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 16px;
}

.hf-market-card {
  padding: 16px;
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-radius: 8px;
  background: #f9f6f2;
}

.hf-market-card h3 {
  margin: 0 0 8px !important;
  color: #173f36;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.hf-market-card ul {
  margin: 0;
  padding-left: 18px !important;
}

.hf-market-card li {
  font-size: 15px;
  line-height: 1.45;
}

.hf-legacy-section--support ul {
  margin: 16px 0 0;
  padding-left: 20px;
}

.hf-legacy-section--support li + li {
  margin-top: 8px;
}

.hf-testimonials-intro {
  margin-bottom: 18px;
}

.hf-testimonials-intro h2,
.hf-resources-intro h2 {
  max-width: 680px;
}

.hf-testimonials-intro p,
.hf-resources-intro p {
  max-width: 720px;
  margin-bottom: 0;
}

.hf-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hf-testimonial-card {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(150, 120, 78, 0.15);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(0, 70, 53, 0.06);
}

.hf-testimonial-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 5px;
  height: 100%;
  background: var(--hf-teal);
}

.hf-testimonial-card:first-child {
  grid-column: span 2;
}

.hf-testimonial-card__quote {
  margin-top: 0;
  color: var(--hf-eucalyptus);
  font-size: 15px;
  line-height: 1.66;
}

.hf-testimonial-card__quote + .hf-testimonial-card__quote {
  margin-top: 14px;
}

.hf-testimonial-card__author {
  margin: 18px 0 0;
  color: var(--hf-teal) !important;
  font-size: 14px;
  font-weight: 800;
}

.hf-testimonial-card__author em,
.hf-testimonial-card__author strong {
  font-style: normal;
  font-weight: 800;
}

.hf-testimonial-gallery {
  margin-top: 18px;
  padding: clamp(22px, 3vw, 30px);
}

.hf-testimonial-gallery h2 {
  margin-bottom: 20px;
}

.hf-testimonial-gallery p {
  margin: 0;
}

.hf-testimonial-gallery img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}

.hf-testimonial-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.hf-testimonial-gallery h2 {
  grid-column: 1 / -1;
}

.hf-legacy-page--resources > .wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start !important;
  margin-top: 18px;
  min-width: 0;
  max-width: 100%;
}

.hf-legacy-page--resources .wp-block-column {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.hf-resource-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: clamp(22px, 2.8vw, 28px) !important;
  border: 1px solid rgba(150, 120, 78, 0.15);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(0, 70, 53, 0.05);
}

.hf-resource-card h2 {
  margin: 0 0 14px !important;
  color: var(--hf-teal);
  font-size: 23px !important;
  line-height: 1.12 !important;
}

.hf-resource-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 !important;
  list-style: none;
}

.hf-resource-card li {
  margin: 0;
}

.hf-resource-card li + li {
  margin-top: 0 !important;
}

.hf-resource-card a {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(150, 120, 78, 0.1);
  color: #173f36;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
}

.hf-resource-card li:last-child a,
.hf-resource-card p:last-child a {
  border-bottom: 0;
}

.hf-resource-card a::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--hf-teal);
  border-right: 2px solid var(--hf-teal);
  transform: rotate(45deg);
}

.hf-resource-card a:hover,
.hf-resource-card a:focus-visible {
  color: var(--hf-teal);
}

@media (max-width: 900px) {
  body.page-id-10 .entry-content,
  body.page-id-16 .entry-content,
  body.page-id-65 .entry-content,
  body.page-id-90 .entry-content {
    padding-inline: 16px;
  }

  body.page-id-10 .entry-content > .hf-legacy-page,
  body.page-id-16 .entry-content > .hf-legacy-page,
  body.page-id-65 .entry-content > .hf-legacy-page,
  body.page-id-90 .entry-content > .hf-legacy-page {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  .hf-legacy-section--intro {
    grid-template-columns: 1fr;
  }

  .hf-legacy-section--intro > :not(.hf-legacy-stats),
  .hf-legacy-stats {
    grid-column: 1;
    grid-row: auto;
  }

  .hf-legacy-grid,
  .hf-testimonial-grid,
  .hf-legacy-page--resources > .wp-block-columns {
    grid-template-columns: 1fr;
  }

  .hf-testimonial-card:first-child {
    grid-column: auto;
  }

  .hf-testimonial-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.page-id-16 main.wp-block-group > .wp-block-group:first-child,
  body.page-id-90 main.wp-block-group > .wp-block-group:first-child {
    padding-top: 32px !important;
  }

  .hf-legacy-section--intro,
  .hf-legacy-grid .hf-legacy-section,
  .hf-legacy-section--products,
  .hf-testimonial-card,
  .hf-testimonial-gallery,
  .hf-resource-card {
    padding: 20px !important;
  }

  .hf-market-grid,
  .hf-legacy-section--products ul,
  .hf-testimonial-gallery {
    grid-template-columns: 1fr;
  }

  .hf-legacy-actions {
    flex-direction: column;
  }

  .hf-legacy-action {
    width: 100%;
  }
}

/* Configurator title bands: match the refreshed Resources page top treatment. */
body.page-id-34055 main.wp-block-group,
body.page-id-39466 main.wp-block-group {
  margin-block-start: 0 !important;
  background:
    linear-gradient(180deg, #faf6ee 0, rgba(246, 241, 232, 0) 460px),
    #faf7f1;
}

body.page-id-34055 main.wp-block-group > .wp-block-group:first-child,
body.page-id-39466 main.wp-block-group > .wp-block-group:first-child {
  margin-block-start: 0 !important;
  padding: clamp(42px, 5vw, 64px) 16px clamp(20px, 3vw, 32px) !important;
}

body.page-id-34055 main.wp-block-group > .wp-block-group:first-child .wp-block-spacer,
body.page-id-39466 main.wp-block-group > .wp-block-group:first-child .wp-block-spacer {
  display: none !important;
}

body.page-id-34055 .wp-block-post-title,
body.page-id-39466 .wp-block-post-title {
  width: min(1200px, calc(100vw - 32px)) !important;
  max-width: min(1200px, calc(100vw - 32px)) !important;
  margin: 0 auto !important;
  color: var(--hf-teal);
  font-size: clamp(34px, 4vw, 48px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

body.page-id-34055 .entry-content,
body.page-id-39466 .entry-content {
  margin-block-start: 0 !important;
  padding-bottom: clamp(58px, 8vw, 100px);
}

@media (max-width: 640px) {
  body.page-id-34055 main.wp-block-group > .wp-block-group:first-child,
  body.page-id-39466 main.wp-block-group > .wp-block-group:first-child {
    padding-top: 32px !important;
  }

  body.page-id-34055 .wp-block-post-title,
  body.page-id-39466 .wp-block-post-title {
    width: min(100%, calc(100vw - 32px)) !important;
    max-width: min(100%, calc(100vw - 32px)) !important;
    font-size: clamp(30px, 8vw, 38px) !important;
  }
}

/* Contact page directory. */
body.page-id-18 {
  overflow-x: hidden;
  overflow-x: clip;
}

body.page-id-18 main.wp-block-group {
  margin-block-start: 0 !important;
  background:
    linear-gradient(180deg, rgba(239, 249, 245, 0.95) 0, rgba(255, 255, 255, 0) 360px),
    var(--hf-canvas);
}

body.page-id-18 main.wp-block-group > .wp-block-group:first-child {
  margin-block-start: 0;
  padding: clamp(42px, 5vw, 64px) 16px clamp(20px, 3vw, 32px) !important;
}

body.page-id-18 main.wp-block-group > .wp-block-group:first-child .wp-block-spacer {
  display: none !important;
}

body.page-id-18 .wp-block-post-title {
  margin: 0;
  color: var(--hf-teal);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.05;
}

body.page-id-18 .entry-content {
  margin-block-start: 0;
  padding-bottom: clamp(56px, 8vw, 96px);
}

body.page-id-18 .entry-content > .hf-contact-page {
  width: min(1200px, calc(100vw - 32px)) !important;
  max-width: 1200px !important;
  margin-inline: auto;
  padding-inline: 0 !important;
}

body.page-id-18 .hf-contact-page > * {
  width: 100%;
  max-width: none !important;
}

.hf-contact-page {
  color: var(--hf-eucalyptus);
}

.hf-contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(18px, 3vw, 30px);
  align-items: stretch;
  margin-bottom: clamp(42px, 6vw, 70px);
}

.hf-contact-hero__intro,
.hf-contact-office {
  box-sizing: border-box;
  border: 1px solid rgba(150, 120, 78, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 44px rgba(0, 70, 53, 0.08);
}

.hf-contact-hero__intro {
  padding: clamp(26px, 4vw, 42px);
}

.hf-contact-office {
  padding: clamp(22px, 3vw, 32px);
}

.hf-contact-eyebrow {
  margin: 0 0 10px;
  color: var(--hf-teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hf-contact-hero h2,
.hf-contact-directory-heading h2 {
  max-width: 760px;
  margin: 0;
  color: var(--hf-teal);
  font-size: clamp(25px, 2.3vw, 33px);
  line-height: 1.08;
}

.hf-contact-hero p,
.hf-contact-directory-heading p,
.hf-contact-card p,
.hf-contact-office p {
  font-size: 15px;
  line-height: 1.62;
}

.hf-contact-hero__intro p:last-child,
.hf-contact-office p:last-child,
.hf-contact-card p:last-child {
  margin-bottom: 0;
}

.hf-contact-office h2,
.hf-contact-region h2 {
  margin: 0 0 14px;
  color: var(--hf-teal);
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.1;
}

.hf-contact-office strong {
  color: #183f36;
}

.hf-contact-directory-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 1fr);
  gap: clamp(16px, 3vw, 36px);
  align-items: end;
  margin-bottom: 30px;
}

.hf-contact-region {
  margin-top: clamp(32px, 5vw, 58px);
}

.hf-contact-region:first-of-type {
  margin-top: 0;
}

.hf-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
}

.hf-contact-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid rgba(150, 120, 78, 0.16);
  border-radius: 8px;
  background: #fff;
}

/* Flex children of the card must not inherit constrained-layout auto centering. */
.hf-contact-card > * {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Content tops aligned; equal card heights come from the grid rows. */

.hf-contact-card h3 {
  margin: 0 0 10px;
  color: #173f36;
  font-size: 19px;
  line-height: 1.22;
}

.hf-contact-card .hf-contact-areas {
  margin-top: -2px;
  color: #49645d;
  font-size: 14px;
}

body.page-id-18 .entry-content .trackbuttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
}

body.page-id-18 .entry-content .trackbuttons br,
body.page-id-18 .entry-content .trackbuttons script {
  display: none !important;
}

body.page-id-18 .entry-content .trackbuttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid var(--hf-teal);
  border-radius: 7px;
  background: var(--hf-teal);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

body.page-id-18 .entry-content .trackbuttons a:hover,
body.page-id-18 .entry-content .trackbuttons a:focus-visible {
  background: #005f49;
  border-color: #005f49;
  color: #fff;
  transform: translateY(-1px);
}

body.page-id-18 .entry-content .trackbuttons a[href^="mailto:"],
body.page-id-18 .entry-content .trackbuttons a[href*="dog-fence-distributor"],
body.page-id-18 .entry-content .trackbuttons a[href*="hidden-fence-brand-dog-fence"] {
  background: #f6f2ed;
  color: var(--hf-teal);
}

body.page-id-18 .entry-content .trackbuttons a[href^="mailto:"]:hover,
body.page-id-18 .entry-content .trackbuttons a[href^="mailto:"]:focus-visible,
body.page-id-18 .entry-content .trackbuttons a[href*="dog-fence-distributor"]:hover,
body.page-id-18 .entry-content .trackbuttons a[href*="dog-fence-distributor"]:focus-visible,
body.page-id-18 .entry-content .trackbuttons a[href*="hidden-fence-brand-dog-fence"]:hover,
body.page-id-18 .entry-content .trackbuttons a[href*="hidden-fence-brand-dog-fence"]:focus-visible {
  background: var(--hf-teal);
  color: #fff;
}

/* Legacy page refresh for ordinary content pages. */
body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content {
  --hf-page-width: var(--hf-page-shell);
  --hf-page-copy: var(--hf-page-shell);
  padding-bottom: clamp(56px, 8vw, 96px);
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content > :where(p, ul, ol, h2, h3, h4, h5, h6, figure, table, .wp-block-image, .wp-block-buttons, .wp-block-table, .wp-block-cover, .wp-block-group, .wp-block-columns):not(.alignfull):not(.alignwide):not(.hf-contact-page):not(.hf-home-showcase) {
  width: var(--hf-page-copy);
  max-width: var(--hf-page-copy) !important;
  margin-left: auto;
  margin-right: auto;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content > :where(.wp-block-columns, .wp-block-cover, .wp-block-group, .wp-block-table, figure, .wp-block-image):not(.alignfull):not(.alignwide) {
  width: var(--hf-page-width);
  max-width: var(--hf-page-width) !important;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content > :first-child {
  margin-top: clamp(18px, 3vw, 34px);
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(p, li) {
  color: var(--hf-eucalyptus);
  font-size: 15px;
  line-height: 1.68;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(h2, h3, h4, h5, h6) {
  color: var(--hf-teal);
  text-wrap: balance;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(h2, h3, h4, h5, h6):empty {
  display: none;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content h2 {
  margin-top: clamp(34px, 5vw, 58px);
  margin-bottom: 14px;
  font-size: clamp(25px, 2.3vw, 33px);
  line-height: 1.12;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content h3 {
  margin-top: clamp(26px, 4vw, 44px);
  margin-bottom: 10px;
  color: #173f36;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.2;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content h4 {
  margin-top: 24px;
  margin-bottom: 8px;
  color: #214a41;
  font-size: 17px;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(ul, ol) {
  padding-left: 1.25em;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content li + li {
  margin-top: 6px;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(strong, b) {
  color: var(--hf-ink);
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(.wp-block-image, figure) {
  margin-top: clamp(24px, 4vw, 42px);
  margin-bottom: clamp(24px, 4vw, 42px);
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(.wp-block-image img, figure img, p img) {
  max-width: 100%;
  height: auto;
  border-radius: var(--hf-radius);
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content .wp-block-columns {
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
  margin-top: clamp(28px, 5vw, 56px);
  margin-bottom: clamp(28px, 5vw, 56px);
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content .wp-block-column {
  min-width: 0;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(.wp-block-cover, .wp-block-group.has-background) {
  overflow: hidden;
  border-radius: var(--hf-radius);
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content .wp-block-table {
  margin-top: clamp(24px, 4vw, 42px);
  margin-bottom: clamp(24px, 4vw, 42px);
  overflow-x: auto;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content table {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(150, 120, 78, 0.16);
  border-radius: var(--hf-radius);
  background: #fff;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(th, td) {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(150, 120, 78, 0.12);
  color: var(--hf-eucalyptus);
  font-size: 14px;
  line-height: 1.45;
  vertical-align: top;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content th {
  background: #f5f1eb;
  color: var(--hf-ink);
  font-weight: 800;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content tr:last-child :where(th, td) {
  border-bottom: 0;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(.wp-block-button__link, a.button, .button) {
  min-height: 40px;
  padding: 10px 18px;
  border-radius: var(--hf-radius);
  background: var(--hf-teal);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(.wp-block-button__link, a.button, .button):hover,
body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(.wp-block-button__link, a.button, .button):focus-visible {
  background: #005f49;
  color: #fff;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(#map_canvas, .map_canvas) {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100%;
  min-height: 320px;
  overflow: hidden !important;
  border-radius: var(--hf-radius);
  background: #f5f1eb;
}

body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(.ezcol, .ezcol-one-half, .ezcol-one-third, .ezcol-two-third) {
  box-sizing: border-box;
  max-width: 100%;
}

/* Products landing page: resource-style title band and white product cards. */
body.page-id-113 {
  overflow-x: hidden;
  overflow-x: clip;
}

body.page-id-113 main.wp-block-group {
  margin-block-start: 0 !important;
  background:
    linear-gradient(180deg, rgba(239, 249, 245, 0.96) 0, rgba(255, 255, 255, 0) 380px),
    var(--hf-canvas);
}

body.page-id-113 main.wp-block-group > .wp-block-group:first-child {
  margin-block-start: 0 !important;
  padding: clamp(42px, 5vw, 64px) 16px clamp(20px, 3vw, 32px) !important;
}

body.page-id-113 main.wp-block-group > .wp-block-group:first-child .wp-block-spacer {
  display: none !important;
}

body.page-id-113 .wp-block-post-title {
  width: min(1200px, calc(100vw - 32px)) !important;
  max-width: min(1200px, calc(100vw - 32px)) !important;
  margin: 0 auto !important;
  color: var(--hf-teal);
  font-size: clamp(34px, 4vw, 48px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

body.page-id-113 .entry-content {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: min(1200px, calc(100vw - 32px)) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 4px 0 clamp(58px, 8vw, 100px) !important;
}

body.page-id-113 .entry-content > .ezcol-divider {
  display: none !important;
}

body.page-id-113 .entry-content > .ezcol {
  box-sizing: border-box;
  display: flex !important;
  float: none !important;
  flex-direction: column;
  min-width: 0;
  width: auto !important;
  min-height: 100%;
  margin: 0 !important;
  padding: clamp(20px, 2.4vw, 26px) !important;
  border: 1px solid rgba(150, 120, 78, 0.15);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(0, 70, 53, 0.05);
}

body.page-id-113 .entry-content > .ezcol > :first-child {
  margin-top: 0 !important;
}

body.page-id-113 .entry-content > .ezcol > :where(h2, h3, p):has(img) {
  display: grid;
  min-height: 220px;
  margin: 0 0 18px !important;
  padding: 10px;
  place-items: center;
  border-bottom: 1px solid rgba(150, 120, 78, 0.10);
  border-radius: 6px 6px 0 0;
  background: #fff;
}

body.page-id-113 .entry-content > .ezcol img {
  display: block;
  width: min(100%, 524px);
  max-height: 220px;
  margin: 0 auto !important;
  object-fit: contain;
  border-radius: 0 !important;
}

body.page-id-113 .entry-content > .ezcol h2,
body.page-id-113 .entry-content > .ezcol h3 {
  margin: 0 0 10px !important;
  color: var(--hf-teal) !important;
  font-size: clamp(20px, 1.7vw, 24px) !important;
  line-height: 1.16 !important;
  text-wrap: balance;
}

body.page-id-113 .entry-content > .ezcol h2 a,
body.page-id-113 .entry-content > .ezcol h3 a {
  color: inherit;
  text-decoration: none;
}

body.page-id-113 .entry-content > .ezcol h2 a:hover,
body.page-id-113 .entry-content > .ezcol h2 a:focus-visible,
body.page-id-113 .entry-content > .ezcol h3 a:hover,
body.page-id-113 .entry-content > .ezcol h3 a:focus-visible {
  color: #005f49;
}

body.page-id-113 .entry-content > .ezcol p {
  margin: 0 0 14px !important;
  color: var(--hf-eucalyptus);
  font-size: 15px;
  line-height: 1.58;
}

body.page-id-113 .entry-content > .ezcol > p:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: 12px;
}

body.page-id-113 .entry-content > .ezcol > p:last-child .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hf-button-height);
  padding: var(--hf-button-padding) !important;
  border: 1px solid var(--hf-button-primary-bg) !important;
  border-radius: var(--hf-button-radius) !important;
  background: var(--hf-button-primary-bg) !important;
  color: #fff !important;
  font-size: var(--hf-button-font-size) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  box-shadow: var(--hf-button-shadow);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

body.page-id-113 .entry-content > .ezcol > p:last-child .button:first-child:not(:only-child) {
  border-color: var(--hf-button-secondary-border) !important;
  background: var(--hf-button-secondary-bg) !important;
  color: var(--hf-teal) !important;
}

body.page-id-113 .entry-content > .ezcol > p:last-child .button:hover,
body.page-id-113 .entry-content > .ezcol > p:last-child .button:focus-visible {
  border-color: var(--hf-button-primary-hover) !important;
  background: var(--hf-button-primary-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

@media (max-width: 820px) {
  body.page-id-113 .entry-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.page-id-113 main.wp-block-group > .wp-block-group:first-child {
    padding-top: 32px !important;
  }

  body.page-id-113 .wp-block-post-title {
    width: min(100%, calc(100vw - 32px)) !important;
    max-width: min(100%, calc(100vw - 32px)) !important;
    font-size: clamp(30px, 8vw, 38px) !important;
  }

  body.page-id-113 .entry-content > .ezcol {
    padding: 20px !important;
  }

  body.page-id-113 .entry-content > .ezcol > :where(h2, h3, p):has(img) {
    min-height: 190px;
  }

  body.page-id-113 .entry-content > .ezcol img {
    max-height: 190px;
  }

  body.page-id-113 .entry-content > .ezcol > p:last-child .button {
    flex: 1 1 150px;
  }
}

@media (max-width: 880px) {
  .hf-contact-hero,
  .hf-contact-directory-heading,
  .hf-contact-grid {
    grid-template-columns: 1fr;
  }

  /* Stacked single column: each card sizes to its own content (equal
     heights only matter for side-by-side cards). */
  .hf-contact-grid {
    grid-auto-rows: auto;
  }

  body.page-id-18 .entry-content > .hf-contact-page {
    width: min(calc(100vw - 28px), 620px) !important;
    margin-left: calc((100vw - 100%) / -2 + 14px) !important;
    margin-right: calc((100vw - 100%) / -2 + 14px) !important;
  }
}

@media (max-width: 520px) {
  body.page-id-18 main.wp-block-group > .wp-block-group:first-child {
    padding-top: 34px !important;
  }

  .hf-contact-hero__intro,
  .hf-contact-office,
  .hf-contact-card {
    padding: 20px;
  }

  body.page-id-18 .entry-content .trackbuttons a {
    width: 100%;
  }
}

@media (max-width: 720px) {
  body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content {
    --hf-page-width: min(680px, calc(100vw - 32px));
    --hf-page-copy: min(680px, calc(100vw - 32px));
  }

  body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content .wp-block-columns {
    gap: 18px;
  }

  body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(.ezcol, .ezcol-one-half, .ezcol-one-third, .ezcol-two-third) {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(table, .featureTable) {
    table-layout: fixed;
  }

  body.page:not(.home):not(.woocommerce-page):not(.page-id-18):not(.page-id-34055):not(.page-id-39466) .entry-content :where(th, td) {
    padding: 10px 12px;
    overflow-wrap: anywhere;
  }

  body.woocommerce-page .wc-block-grid__products,
  body.woocommerce-page .wc-block-grid__product {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.woocommerce-page .wc-block-grid__products {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Replacement batteries page refresh. */
body.page-id-139295 main.wp-block-group {
  margin-block-start: 0 !important;
}

body.page-id-139295 main.wp-block-group > .wp-block-group:first-child {
  padding-top: clamp(28px, 4vw, 52px) !important;
}

body.page-id-139295 .wp-block-post-title {
  width: min(1200px, calc(100vw - 32px)) !important;
  max-width: min(1200px, calc(100vw - 32px)) !important;
  margin: 0 auto !important;
  color: var(--hf-teal);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.05;
  text-align: left;
  text-wrap: balance;
}

body.page-id-139295 .entry-content.hf-battery-enhanced {
  --hf-battery-width: min(1200px, calc(100vw - 32px));
  --hf-battery-copy: min(820px, calc(100vw - 32px));
  --hf-battery-line: rgba(150, 120, 78, 0.16);
  --hf-battery-soft: #faf6ee;
  --hf-battery-ink: #102f28;
  padding-bottom: clamp(60px, 8vw, 104px);
}

body.page-id-139295 .hf-battery-hero,
body.page-id-139295 .hf-battery-guides,
body.page-id-139295 .hf-battery-shop,
body.page-id-139295 .hf-battery-howto,
body.page-id-139295 .hf-battery-warning {
  box-sizing: border-box;
  width: var(--hf-battery-width) !important;
  max-width: var(--hf-battery-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-id-139295 .hf-battery-hero {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(18px, 3vw, 34px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(150, 120, 78, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0, rgba(150, 120, 78, 0.11), transparent 36%),
    linear-gradient(180deg, #f9f6f3 0%, #fff 100%);
}

body.page-id-139295 .hf-battery-hero > h2 {
  max-width: 860px !important;
  margin: 0 !important;
  color: var(--hf-battery-ink) !important;
  font-size: clamp(25px, 2.3vw, 33px) !important;
  line-height: 1.12 !important;
}

body.page-id-139295 .hf-battery-intro.wp-block-columns {
  display: grid !important;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: center;
  margin: 0 !important;
}

body.page-id-139295 .hf-battery-intro .wp-block-column:first-child {
  display: grid;
  min-height: 300px;
  padding: clamp(18px, 3vw, 34px);
  place-items: center;
  border: 1px solid var(--hf-battery-line);
  border-radius: 8px;
  background: #fff;
}

body.page-id-139295 .hf-battery-intro figure,
body.page-id-139295 .hf-battery-collars figure,
body.page-id-139295 .hf-battery-products figure,
body.page-id-139295 .hf-battery-packs figure,
body.page-id-139295 .hf-battery-warning figure {
  margin: 0 !important;
}

body.page-id-139295 .hf-battery-intro img {
  display: block;
  width: min(360px, 100%);
  max-height: 320px;
  object-fit: contain;
}

body.page-id-139295 .hf-battery-intro p {
  max-width: 620px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: #345049;
  font-size: 15px !important;
  line-height: 1.66 !important;
}

body.page-id-139295 .hf-battery-collars.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 !important;
}

body.page-id-139295 .hf-battery-collars > .wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--hf-battery-line);
  border-radius: 8px;
  background: #fff;
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

body.page-id-139295 .hf-battery-collars > .wp-block-column:hover {
  border-color: rgba(0, 121, 92, 0.36);
  box-shadow: rgba(0, 70, 53, 0.10) 0 14px 28px;
  transform: translateY(-2px);
}

body.page-id-139295 .hf-battery-collars img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: contain;
}

body.page-id-139295 .hf-battery-collars figcaption {
  margin-top: 12px;
  color: var(--hf-teal);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

body.page-id-139295 .hf-battery-collars figcaption a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 11px;
  border-radius: 7px;
  background: #f0eae1;
  color: var(--hf-teal);
  text-decoration: none;
}

body.page-id-139295 .hf-battery-guides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(34px, 5vw, 62px);
}

body.page-id-139295 .hf-battery-guide-card {
  padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid var(--hf-battery-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.06) 0 18px 42px;
}

body.page-id-139295 .hf-battery-guide-card h2 {
  margin: 0 0 14px !important;
  color: var(--hf-teal) !important;
  font-size: clamp(21px, 1.7vw, 25px) !important;
  line-height: 1.12 !important;
}

body.page-id-139295 .hf-battery-guide-card p {
  margin: 0 !important;
  color: #425d56;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

body.page-id-139295 .hf-battery-shop {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

body.page-id-139295 .hf-battery-products.wp-block-columns,
body.page-id-139295 .hf-battery-packs.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px !important;
  align-items: stretch !important;
  margin: 0 !important;
}

body.page-id-139295 .hf-battery-products > .wp-block-column,
body.page-id-139295 .hf-battery-packs > .wp-block-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid var(--hf-battery-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.06) 0 18px 42px;
}

body.page-id-139295 .hf-battery-products h2 {
  min-height: 2.25em;
  margin: 0 0 12px !important;
  color: var(--hf-teal) !important;
  font-size: clamp(21px, 1.7vw, 25px) !important;
  line-height: 1.12 !important;
}

body.page-id-139295 .hf-battery-products p,
body.page-id-139295 .hf-battery-products li,
body.page-id-139295 .hf-battery-packs p {
  color: #435e56;
  font-size: 15px !important;
  line-height: 1.58 !important;
}

body.page-id-139295 .hf-battery-products ul {
  margin-top: 6px;
  margin-bottom: 18px;
}

body.page-id-139295 .hf-battery-products figure {
  display: grid;
  min-height: 260px;
  margin-top: auto !important;
  padding: 16px;
  place-items: center;
  border-radius: 8px;
  background: #f9f6f3;
}

body.page-id-139295 .hf-battery-products img,
body.page-id-139295 .hf-battery-packs img {
  display: block;
  width: 100%;
  max-height: 230px;
  object-fit: contain;
}

body.page-id-139295 .hf-battery-packs > .wp-block-column {
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

body.page-id-139295 .hf-battery-packs figure {
  display: grid;
  width: 100%;
  min-height: 250px;
  place-items: center;
  border-radius: 8px;
  background: #f9f6f3;
}

body.page-id-139295 .hf-battery-products p:has(a.button),
body.page-id-139295 .hf-battery-packs p:has(a.button) {
  display: flex;
  justify-content: center;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

body.page-id-139295 .hf-battery-howto {
  margin-top: clamp(38px, 6vw, 74px);
  padding: clamp(24px, 3vw, 34px);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 10%, rgba(139, 210, 184, 0.18), transparent 34%),
    linear-gradient(135deg, #04251e 0%, #06382d 100%);
  color: #fff;
}

body.page-id-139295 .hf-battery-howto h2 {
  max-width: 760px !important;
  margin: 0 0 14px !important;
  color: #fff !important;
  font-size: clamp(25px, 2.3vw, 33px) !important;
  line-height: 1.1 !important;
}

body.page-id-139295 .hf-battery-howto p {
  max-width: 760px !important;
  margin-left: 0 !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

body.page-id-139295 .hf-battery-howto p:has(a) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px !important;
}

body.page-id-139295 .hf-battery-howto p:has(a) br {
  display: none;
}

body.page-id-139295 .hf-battery-howto a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  color: var(--hf-teal);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
}

body.page-id-139295 .hf-battery-warning {
  display: grid;
  gap: 18px;
  margin-top: clamp(34px, 5vw, 62px);
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(214, 142, 30, 0.34);
  border-left: 5px solid #d69b28;
  border-radius: 8px;
  background: #fff8e7;
}

body.page-id-139295 .hf-battery-warning h2 {
  max-width: 860px !important;
  margin: 0 !important;
  color: #8a4b00 !important;
  font-size: clamp(25px, 2.3vw, 33px) !important;
  line-height: 1.12 !important;
}

body.page-id-139295 .hf-battery-warning p {
  max-width: 900px !important;
  margin: 0 !important;
  color: #4f4637 !important;
}

body.page-id-139295 .hf-battery-warning-row.wp-block-columns {
  display: grid !important;
  grid-template-columns: minmax(0, 0.8fr) minmax(220px, 0.45fr);
  gap: 18px !important;
  align-items: center !important;
  margin: 0 !important;
}

body.page-id-139295 .hf-battery-warning-row:nth-of-type(2).wp-block-columns {
  grid-template-columns: minmax(160px, 0.34fr) minmax(0, 1fr);
}

body.page-id-139295 .hf-battery-warning-row > .wp-block-column {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(214, 142, 30, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
}

body.page-id-139295 .hf-battery-warning-row img {
  display: block;
  max-height: 180px;
  margin: 0 auto;
  object-fit: contain;
}

body.page-id-139295 .hf-battery-final-cta {
  display: flex;
  justify-content: flex-start;
  margin-top: 6px !important;
}

body.page-id-139295 .hf-battery-final-cta .button {
  min-height: 46px !important;
  padding: 13px 18px !important;
  background: var(--hf-teal) !important;
  color: #fff !important;
}

@media (max-width: 880px) {
  body.page-id-139295 .hf-battery-intro.wp-block-columns,
  body.page-id-139295 .hf-battery-guides,
  body.page-id-139295 .hf-battery-products.wp-block-columns,
  body.page-id-139295 .hf-battery-packs.wp-block-columns,
  body.page-id-139295 .hf-battery-warning-row.wp-block-columns,
  body.page-id-139295 .hf-battery-warning-row:nth-of-type(2).wp-block-columns {
    grid-template-columns: 1fr;
  }

  body.page-id-139295 .hf-battery-collars.wp-block-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  body.page-id-139295 .wp-block-post-title {
    width: min(100%, 520px) !important;
    overflow-wrap: normal;
    word-break: normal;
    font-size: clamp(30px, 8vw, 36px);
  }

  body.page-id-139295 .entry-content.hf-battery-enhanced {
    --hf-battery-width: min(100%, 520px);
    --hf-battery-copy: min(100%, 520px);
  }

  body.page-id-139295 .hf-battery-hero,
  body.page-id-139295 .hf-battery-howto,
  body.page-id-139295 .hf-battery-warning {
    padding: 20px;
  }

  body.page-id-139295 .hf-battery-hero > h2 {
    font-size: clamp(25px, 7vw, 30px) !important;
  }

  body.page-id-139295 .hf-battery-collars.wp-block-columns {
    grid-template-columns: 1fr;
  }

  body.page-id-139295 .hf-battery-collars img {
    height: 190px;
  }

  body.page-id-139295 .hf-battery-products figure,
  body.page-id-139295 .hf-battery-packs figure {
    min-height: 210px;
  }
}

/* Restore the legacy staggered "Hidden Fence your way" step animation. */
@keyframes hfStepFadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

body.page-id-3902 .entry-content .steps {
  box-sizing: border-box;
  width: min(1200px, calc(100vw - 64px)) !important;
  max-width: 1200px !important;
  min-height: 382px;
  margin: clamp(30px, 4vw, 44px) auto 26px !important;
  padding: 40px 0 !important;
  overflow: visible;
  clear: both;
}

body.page-id-3902 .entry-content .steps::after {
  content: "";
  display: table;
  clear: both;
}

body.page-id-3902 .entry-content .steps > div {
  position: relative;
  display: block;
  float: left;
  max-width: none;
}

body.page-id-3902 .entry-content .steps img {
  display: block;
  max-width: none !important;
  height: auto;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.page-id-3902 .entry-content .steps .step1 {
  width: 283px !important;
  margin: 0 0 0 -30px !important;
}

body.page-id-3902 .entry-content .steps .step2 {
  width: 189px !important;
  margin: 100px 0 0 -30px !important;
}

body.page-id-3902 .entry-content .steps .step3 {
  width: 190px !important;
  margin: 0 0 0 -15px !important;
}

body.page-id-3902 .entry-content .steps .step4 {
  width: 186px !important;
  margin: 100px 0 0 -20px !important;
}

body.page-id-3902 .entry-content .steps .step5 {
  width: 192px !important;
  margin: 0 0 0 -15px !important;
}

body.page-id-3902 .entry-content .steps .step6 {
  width: 256px !important;
  margin: 100px 0 0 -15px !important;
}

body.page-id-3902 .entry-content .steps .delay-1s {
  animation-delay: 1s;
}

body.page-id-3902 .entry-content .steps .delay-2s {
  animation-delay: 2s;
}

body.page-id-3902 .entry-content .steps .delay-3s {
  animation-delay: 3s;
}

body.page-id-3902 .entry-content .steps .delay-4s {
  animation-delay: 4s;
}

body.page-id-3902 .entry-content .steps .delay-5s {
  animation-delay: 5s;
}

html.hf-steps-js body.page-id-3902 .entry-content .steps .wp3 {
  opacity: 0;
  transform: translate3d(-20px, 0, 0);
  will-change: opacity, transform;
}

html.hf-steps-js body.page-id-3902 .entry-content .steps .wp3.animated {
  opacity: 1;
  animation-name: hfStepFadeInLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  html.hf-steps-js body.page-id-3902 .entry-content .steps .wp3 {
    opacity: 1;
    transform: none;
  }

  html.hf-steps-js body.page-id-3902 .entry-content .steps .wp3.animated {
    animation: none;
  }
}

@media (max-width: 1220px) {
  body.page-id-3902 .entry-content .steps {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: center;
    align-items: start;
    gap: 28px 22px;
    width: min(900px, calc(100vw - 48px)) !important;
    min-height: auto;
    padding: 30px 0 !important;
  }

  body.page-id-3902 .entry-content .steps > div {
    float: none;
    margin: 0 !important;
  }

  body.page-id-3902 .entry-content .steps .step2,
  body.page-id-3902 .entry-content .steps .step4,
  body.page-id-3902 .entry-content .steps .step6 {
    margin-top: 56px !important;
  }
}

@media (max-width: 720px) {
  body.page-id-3902 .entry-content .steps {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
    width: min(360px, calc(100vw - 36px)) !important;
    padding: 22px 0 !important;
  }

  body.page-id-3902 .entry-content .steps > div,
  body.page-id-3902 .entry-content .steps :where(.step2, .step4, .step6) {
    margin: 0 !important;
  }

  body.page-id-3902 .entry-content .steps img {
    max-width: 100% !important;
  }
}

/* Site-wide button consistency layer. */
body a.button,
body button.button,
body input.button,
body input[type="submit"],
body .wp-block-button__link,
body .wp-element-button,
body .wp-block-file__button,
body .wp-block-search__button,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body .woocommerce button.single_add_to_cart_button,
body .wc-block-components-button,
body .trackbuttons a,
body .hf-footer__button,
body .hf-header .wp-block-shortcode a,
body .hf-footer__contact a:not(.hf-footer__social-link):not(.wp-block-social-link-anchor),
body #app button,
body #app .button,
body #app a.button {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--hf-button-height) !important;
  margin-top: 0;
  padding: var(--hf-button-padding) !important;
  border: 1px solid var(--hf-button-primary-bg) !important;
  border-radius: var(--hf-button-radius) !important;
  background: var(--hf-button-primary-bg) !important;
  color: #fff !important;
  font-family: inherit;
  font-size: var(--hf-button-font-size) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: normal;
  box-shadow: var(--hf-button-shadow) !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

body a.button:hover,
body button.button:hover,
body input.button:hover,
body input[type="submit"]:hover,
body .wp-block-button__link:hover,
body .wp-element-button:hover,
body .wp-block-file__button:hover,
body .wp-block-search__button:hover,
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce #respond input#submit:hover,
body .woocommerce button.single_add_to_cart_button:hover,
body .wc-block-components-button:hover,
body .trackbuttons a:hover,
body .hf-footer__button:hover,
body .hf-header .wp-block-shortcode a:hover,
body .hf-footer__contact a:not(.hf-footer__social-link):not(.wp-block-social-link-anchor):hover,
body #app button:hover,
body #app .button:hover,
body #app a.button:hover {
  border-color: var(--hf-button-primary-hover) !important;
  background: var(--hf-button-primary-hover) !important;
  color: #fff !important;
  box-shadow: var(--hf-button-hover-shadow) !important;
  transform: translateY(-1px);
}

body a.button:active,
body button.button:active,
body input.button:active,
body input[type="submit"]:active,
body .wp-block-button__link:active,
body .wp-element-button:active,
body .wp-block-file__button:active,
body .wp-block-search__button:active,
body .woocommerce a.button:active,
body .woocommerce button.button:active,
body .woocommerce input.button:active,
body .woocommerce #respond input#submit:active,
body .woocommerce button.single_add_to_cart_button:active,
body .wc-block-components-button:active,
body .trackbuttons a:active,
body .hf-footer__button:active,
body .hf-header .wp-block-shortcode a:active,
body .hf-footer__contact a:not(.hf-footer__social-link):not(.wp-block-social-link-anchor):active,
body #app button:active,
body #app .button:active,
body #app a.button:active {
  box-shadow: var(--hf-button-shadow) !important;
  transform: translateY(0);
}

body a.button:focus-visible,
body button.button:focus-visible,
body input.button:focus-visible,
body input[type="submit"]:focus-visible,
body .wp-block-button__link:focus-visible,
body .wp-element-button:focus-visible,
body .wp-block-file__button:focus-visible,
body .wp-block-search__button:focus-visible,
body .woocommerce a.button:focus-visible,
body .woocommerce button.button:focus-visible,
body .woocommerce input.button:focus-visible,
body .woocommerce #respond input#submit:focus-visible,
body .woocommerce button.single_add_to_cart_button:focus-visible,
body .wc-block-components-button:focus-visible,
body .trackbuttons a:focus-visible,
body .hf-footer__button:focus-visible,
body .hf-header .wp-block-shortcode a:focus-visible,
body .hf-footer__contact a:not(.hf-footer__social-link):not(.wp-block-social-link-anchor):focus-visible,
body #app button:focus-visible,
body #app .button:focus-visible,
body #app a.button:focus-visible {
  outline: 3px solid rgba(150, 120, 78, 0.24) !important;
  outline-offset: 3px;
}

body button.button:disabled,
body button.button[disabled],
body input.button:disabled,
body input[type="submit"]:disabled,
body .woocommerce button.button:disabled,
body .woocommerce button.button:disabled[disabled],
body .woocommerce input.button:disabled,
body .woocommerce button.single_add_to_cart_button:disabled,
body .wc-block-components-button:disabled,
body #app button:disabled,
body #app .button[disabled],
body #app button.button:disabled {
  border-color: #ded8d0 !important;
  background: #e3ded6 !important;
  color: #748680 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none !important;
}

body .hf-header .wp-block-shortcode a,
body .hf-footer__button,
body .hf-footer__contact a:not(.hf-footer__social-link):not(.wp-block-social-link-anchor) {
  min-height: var(--hf-button-compact-height) !important;
  padding: var(--hf-button-compact-padding) !important;
  font-size: 12px !important;
}

body.woocommerce.archive li.wc-block-product > form .button,
body.woocommerce.archive ul.products li.product > form .button,
body.post-type-archive-product ul.products li.product > form .button,
body.page-id-6 ul.products li.product > form .button,
body.woocommerce.archive ul.products li.product .button,
body.post-type-archive-product ul.products li.product .button,
body.page-id-6 ul.products li.product .button {
  flex: 1 1 116px;
  min-width: 0;
  margin: 0 !important;
}

body.woocommerce.archive li.wc-block-product > form .button:first-child,
body.woocommerce.archive ul.products li.product > form .button:first-child,
body.post-type-archive-product ul.products li.product > form .button:first-child,
body.page-id-6 ul.products li.product > form .button:first-child,
body.woocommerce.archive li.wc-block-product > form .button:first-of-type,
body.woocommerce.archive ul.products li.product > form .button:first-of-type,
body.post-type-archive-product ul.products li.product > form .button:first-of-type,
body.page-id-6 ul.products li.product > form .button:first-of-type,
body .wp-block-button.is-style-outline .wp-block-button__link,
body .is-style-outline > .wp-block-button__link,
body .trackbuttons a[href^="mailto:"],
body .trackbuttons a[href*="dog-fence-distributor"],
body .trackbuttons a[href*="hidden-fence-brand-dog-fence"] {
  border-color: var(--hf-button-secondary-border) !important;
  background: var(--hf-button-secondary-bg) !important;
  color: var(--hf-teal) !important;
  box-shadow: var(--hf-button-shadow) !important;
}

body.woocommerce.archive li.wc-block-product > form .button:first-child:hover,
body.woocommerce.archive ul.products li.product > form .button:first-child:hover,
body.post-type-archive-product ul.products li.product > form .button:first-child:hover,
body.page-id-6 ul.products li.product > form .button:first-child:hover,
body.woocommerce.archive li.wc-block-product > form .button:first-of-type:hover,
body.woocommerce.archive ul.products li.product > form .button:first-of-type:hover,
body.post-type-archive-product ul.products li.product > form .button:first-of-type:hover,
body.page-id-6 ul.products li.product > form .button:first-of-type:hover,
body .wp-block-button.is-style-outline .wp-block-button__link:hover,
body .is-style-outline > .wp-block-button__link:hover,
body .trackbuttons a[href^="mailto:"]:hover,
body .trackbuttons a[href*="dog-fence-distributor"]:hover,
body .trackbuttons a[href*="hidden-fence-brand-dog-fence"]:hover,
body .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
body .is-style-outline > .wp-block-button__link:focus-visible,
body .trackbuttons a[href^="mailto:"]:focus-visible,
body .trackbuttons a[href*="dog-fence-distributor"]:focus-visible,
body .trackbuttons a[href*="hidden-fence-brand-dog-fence"]:focus-visible {
  border-color: var(--hf-button-primary-bg) !important;
  background: var(--hf-button-secondary-hover) !important;
  color: #005f49 !important;
  box-shadow: var(--hf-button-hover-shadow) !important;
}

body .trackbuttons {
  align-items: flex-start;
}

body .trackbuttons a {
  align-self: flex-start;
}

/* Targeted refresh for legacy information pages. */
body.page-id-35429 .entry-content,
body.page-id-510 .entry-content,
body.page-id-14 .entry-content {
  --hf-page-copy: min(980px, calc(100vw - 32px));
  --hf-page-width: min(1200px, calc(100vw - 32px));
}

body.page-id-35429 .entry-content > :where(p, h2, h3, h4, ul, ol),
body.page-id-510 .entry-content > :where(p, h2, h3, h4, ul, ol),
body.page-id-14 .entry-content > :where(p, h2, h3, h4, ul, ol) {
  max-width: 920px !important;
}

body.page-id-35429 .entry-content > p:first-of-type,
body.page-id-510 .entry-content > p:first-of-type,
body.page-id-14 .entry-content > p:first-of-type {
  margin-top: clamp(24px, 4vw, 42px);
  color: var(--hf-ink);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1.48;
}

body.page-id-35429 .entry-content h2,
body.page-id-510 .entry-content h2,
body.page-id-14 .entry-content h2 {
  margin-top: clamp(34px, 5vw, 60px);
  margin-bottom: 12px;
  color: var(--hf-teal);
  font-size: clamp(25px, 2.3vw, 33px);
  line-height: 1.15;
}

body.page-id-35429 .entry-content h3,
body.page-id-510 .entry-content h3,
body.page-id-14 .entry-content h3 {
  color: #173f36;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.25;
}

body.page-id-35429 .entry-content > h2:nth-of-type(-n+4) {
  box-sizing: border-box;
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(150, 120, 78, 0.16);
  border-left: 5px solid var(--hf-teal);
  border-radius: 8px;
  background: #f9f6f2;
  color: #163b33;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.28;
}

body.page-id-35429 .entry-content .wp-block-columns:first-of-type {
  align-items: stretch;
  gap: 22px;
  margin-top: clamp(28px, 5vw, 52px);
}

body.page-id-35429 .entry-content .wp-block-columns:first-of-type > .wp-block-column {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.08) 0 18px 42px;
}

body.page-id-35429 .entry-content .wp-block-columns:first-of-type .wp-block-image {
  order: -1;
  margin: 0 0 14px;
}

body.page-id-35429 .entry-content .wp-block-columns:first-of-type img {
  display: block;
  width: 100%;
  max-height: 250px;
  object-fit: contain;
  background: #fff;
}

body.page-id-35429 .entry-content .wp-block-columns:first-of-type h2 {
  margin-top: 0;
  font-size: 18px;
}

body.page-id-35429 .entry-content .wp-block-columns:first-of-type h3 {
  margin-top: 6px;
  font-size: 16px;
}

body.page-id-35429 .entry-content .wp-block-columns:first-of-type ul {
  margin-top: 8px;
  padding-left: 1.1em;
}

body.page-id-35429 .entry-content .wp-block-columns:first-of-type li {
  font-size: 14px;
  line-height: 1.48;
}

body.page-id-35429 .entry-content .wp-block-columns:first-of-type p:last-child {
  margin-top: auto;
}

body.page-id-35429 .entry-content figure.alignright {
  max-width: min(420px, 44vw);
  margin: 4px 0 24px 32px;
  padding: 10px;
  border: 1px solid rgba(150, 120, 78, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.08) 0 16px 36px;
}

body.page-id-35429 .entry-content > h2:nth-last-of-type(1) {
  margin-top: clamp(42px, 7vw, 84px);
}

/* Focused refresh for the DIY dog fence page. */
body.page-id-35429 .entry-content.hf-diy-enhanced {
  --hf-diy-width: min(1200px, calc(100vw - 32px));
  --hf-diy-copy: min(780px, calc(100vw - 32px));
  --hf-diy-line: rgba(150, 120, 78, 0.16);
  --hf-diy-soft: #faf6ee;
  --hf-diy-ink: #173f36;
  padding-bottom: clamp(56px, 8vw, 96px);
}

body.page-id-35429 .hf-diy-intro,
body.page-id-35429 .hf-diy-products,
body.page-id-35429 .hf-diy-story,
body.page-id-35429 .hf-diy-features,
body.page-id-35429 .hf-diy-installs {
  box-sizing: border-box;
  width: var(--hf-diy-width) !important;
  max-width: var(--hf-diy-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-id-35429 .hf-diy-intro {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  margin-top: clamp(34px, 6vw, 74px);
}

body.page-id-35429 .hf-diy-intro > p:first-child {
  max-width: 900px !important;
  margin: 0 !important;
  color: #0b2d27;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.08;
  text-wrap: balance;
}

body.page-id-35429 .hf-diy-intro > p:first-child strong {
  color: var(--hf-teal);
  font-weight: 400;
}

body.page-id-35429 .hf-diy-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* Statement tiles: text centred both ways with a short brand-green accent
   bar beneath (the numbered 01–04 chips are gone at the client's request). */
body.page-id-35429 .hf-diy-proof-grid h2 {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  row-gap: 12px;
  min-height: 112px;
  margin: 0 !important;
  padding: 18px 16px !important;
  border: 1px solid var(--hf-diy-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 250, 247, 0.92)),
    #fff;
  color: var(--hf-diy-ink) !important;
  font-size: clamp(15px, 1.25vw, 18px) !important;
  font-weight: 300;
  line-height: 1.3 !important;
  text-align: center;
  text-wrap: balance;
  box-shadow: none;
}

body.page-id-35429 .hf-diy-proof-grid h2::after {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--hf-teal);
  opacity: 0.55;
}

body.page-id-35429 .hf-diy-intro h3 {
  justify-self: start;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 14px;
  border: 1px solid rgba(150, 120, 78, 0.18);
  border-radius: 8px;
  background: #fff;
  color: #245146 !important;
  font-size: 14px !important;
  font-weight: 300;
  line-height: 1.2;
}

body.page-id-35429 .entry-content .hf-diy-products.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(18px, 3vw, 34px);
  margin-top: clamp(34px, 5vw, 62px) !important;
  margin-bottom: clamp(42px, 6vw, 74px);
}

body.page-id-35429 .entry-content .hf-diy-products > .wp-block-column {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  padding: 0 !important;
  border-color: rgba(150, 120, 78, 0.18) !important;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.08) 0 20px 50px !important;
}

body.page-id-35429 .entry-content .hf-diy-products > .wp-block-column::before {
  content: "DIY kit";
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 6px 8px;
  border-radius: 6px;
  background: #f0eae1;
  color: var(--hf-teal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

body.page-id-35429 .entry-content .hf-diy-products > .wp-block-column:nth-child(2)::before {
  content: "Smart system";
}

body.page-id-35429 .entry-content .hf-diy-products .wp-block-image {
  display: grid;
  min-height: clamp(250px, 26vw, 340px);
  margin: 0 !important;
  padding: clamp(28px, 4vw, 48px);
  place-items: center;
  border-bottom: 1px solid rgba(150, 120, 78, 0.10);
  background: #fff;
}

body.page-id-35429 .entry-content .hf-diy-products img {
  max-height: 270px;
}

body.page-id-35429 .entry-content .hf-diy-products h2,
body.page-id-35429 .entry-content .hf-diy-products h3,
body.page-id-35429 .entry-content .hf-diy-products p,
body.page-id-35429 .entry-content .hf-diy-products ul {
  margin-left: clamp(20px, 3vw, 34px) !important;
  margin-right: clamp(20px, 3vw, 34px) !important;
}

body.page-id-35429 .entry-content .hf-diy-products h2 {
  margin-top: clamp(22px, 3vw, 32px) !important;
  margin-bottom: 10px !important;
  color: var(--hf-teal);
  font-size: clamp(25px, 2.3vw, 33px) !important;
  line-height: 1.08 !important;
}

body.page-id-35429 .entry-content .hf-diy-products h3 {
  margin-top: 0 !important;
  color: #0c332c !important;
  font-size: 18px !important;
  line-height: 1.22 !important;
}

body.page-id-35429 .entry-content .hf-diy-products ul {
  padding-left: 1.15em;
}

body.page-id-35429 .entry-content .hf-diy-products li {
  color: #435e56;
  font-size: 14px;
  line-height: 1.5;
}

body.page-id-35429 .entry-content .hf-diy-products p:has(a.button) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

body.page-id-35429 .entry-content .hf-diy-products ul + p:has(a.button) {
  margin-top: auto !important;
  padding-top: 18px;
}

body.page-id-35429 .entry-content .hf-diy-products p:last-child {
  padding-bottom: clamp(22px, 3vw, 34px);
}

body.page-id-35429 .hf-diy-story {
  margin-top: clamp(42px, 6vw, 78px);
  padding-top: clamp(32px, 5vw, 58px);
  border-top: 1px solid rgba(150, 120, 78, 0.14);
}

body.page-id-35429 .hf-diy-story h2,
body.page-id-35429 .hf-diy-features h2,
body.page-id-35429 .hf-diy-installs h2 {
  max-width: 860px !important;
  margin: 0 0 18px !important;
  color: var(--hf-teal) !important;
  font-size: clamp(25px, 2.3vw, 33px) !important;
  line-height: 1.1 !important;
  text-wrap: balance;
}

body.page-id-35429 .hf-diy-story p {
  max-width: var(--hf-diy-copy) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: #36534c;
  font-size: 15px;
  line-height: 1.72;
}

body.page-id-35429 .hf-diy-story p:has(a.button),
body.page-id-35429 .hf-diy-features > p:has(a.button) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px !important;
}

body.page-id-35429 .hf-diy-story--signal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: 0 clamp(28px, 5vw, 58px);
  align-items: start;
}

body.page-id-35429 .hf-diy-story--signal h2 {
  grid-column: 1 / -1;
}

body.page-id-35429 .hf-diy-story--signal p {
  grid-column: 1;
}

body.page-id-35429 .hf-diy-story--signal figure.alignright {
  grid-column: 2;
  grid-row: 2 / span 7;
  float: none !important;
  width: 100%;
  max-width: none !important;
  margin: 4px 0 0 !important;
  padding: 0;
  overflow: hidden;
}

body.page-id-35429 .hf-diy-story--signal figure.alignright img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

body.page-id-35429 .hf-diy-callout {
  max-width: min(760px, 100%) !important;
  margin-top: 24px !important;
  margin-bottom: 20px !important;
  padding: 18px 20px;
  border: 1px solid rgba(218, 159, 48, 0.34);
  border-left: 5px solid #d69b28;
  border-radius: 8px;
  background: #fff8e7;
  color: #173f36 !important;
  font-size: clamp(19px, 1.7vw, 24px) !important;
  font-weight: 800;
  line-height: 1.2 !important;
}

body.page-id-35429 .hf-diy-features {
  margin-top: clamp(48px, 7vw, 86px);
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid rgba(150, 120, 78, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at top right, rgba(150, 120, 78, 0.10), transparent 34%),
    var(--hf-diy-soft);
}

body.page-id-35429 .hf-diy-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

body.page-id-35429 .hf-diy-feature-card {
  max-width: none !important;
  margin: 0 !important;
  padding: 17px 18px;
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #425d56;
  font-size: 14px;
  line-height: 1.55;
}

body.page-id-35429 .hf-diy-feature-card strong {
  display: block;
  margin-bottom: 7px;
  color: #0d342d;
  font-size: 15px;
  line-height: 1.25;
}

body.page-id-35429 .hf-diy-feature-card a {
  color: var(--hf-teal);
  font-weight: 750;
}

body.page-id-35429 .hf-diy-feature-note {
  max-width: 720px !important;
  margin: 18px 0 0 !important;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(150, 120, 78, 0.10);
  color: #123d34 !important;
  font-weight: 750;
}

body.page-id-35429 .hf-diy-installs {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
  margin-top: clamp(46px, 7vw, 82px);
  padding-top: clamp(30px, 5vw, 58px);
  border-top: 1px solid rgba(150, 120, 78, 0.14);
}

body.page-id-35429 .hf-diy-installs h2 {
  margin-bottom: 0 !important;
}

body.page-id-35429 .hf-diy-installs h2::after {
  content: "Typical boundary layouts for common Australian homes and yards.";
  display: block;
  margin-top: 12px;
  color: #4c665f;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

body.page-id-35429 .hf-diy-installs figure {
  margin: 0 !important;
  padding: clamp(12px, 2vw, 18px);
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.08) 0 18px 46px;
}

body.page-id-35429 .hf-diy-installs img {
  display: block;
  width: 100%;
  max-height: 820px;
  object-fit: contain;
}

body.page-id-510 .entry-content > p:nth-of-type(-n+4) {
  box-sizing: border-box;
  position: relative;
  padding-left: 20px;
  border-left: 4px solid rgba(0, 121, 92, 0.28);
}

body.page-id-510 .entry-content p img {
  display: block;
  width: min(760px, 100%);
  margin: clamp(24px, 4vw, 44px) auto;
  padding: 14px;
  border: 1px solid rgba(150, 120, 78, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.08) 0 18px 42px;
}

body.page-id-510 .entry-content > h2:first-of-type {
  box-sizing: border-box;
  width: min(920px, calc(100vw - 32px));
  max-width: min(920px, calc(100vw - 32px)) !important;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-radius: 8px;
  background: #f6f2ec;
  color: #123d34;
  text-align: center;
}

body.page-id-510 .entry-content > h2:not(:first-of-type),
body.page-id-14 .entry-content > h2 {
  padding-top: clamp(18px, 3vw, 30px);
  border-top: 1px solid rgba(150, 120, 78, 0.14);
}

body.page-id-14 .entry-content > h2 + p {
  margin-top: 0;
}

body.page-id-14 .entry-content h3 {
  box-sizing: border-box;
  max-width: 920px !important;
  margin-left: auto;
  margin-right: auto;
  padding: 18px 22px;
  border-left: 5px solid var(--hf-teal);
  border-radius: 8px;
  background: #f9f6f2;
  color: #163b33;
  font-size: clamp(17px, 1.4vw, 22px);
}

body.page-id-14 .entry-content .gallery {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: min(1200px, calc(100vw - 32px)) !important;
  max-width: min(1200px, calc(100vw - 32px)) !important;
  margin: clamp(24px, 4vw, 44px) auto !important;
  padding: 0;
}

body.page-id-14 .entry-content .gallery::before,
body.page-id-14 .entry-content .gallery::after {
  display: none !important;
  content: none !important;
}

body.page-id-14 .entry-content .gallery-item {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

body.page-id-14 .entry-content .gallery-icon,
body.page-id-14 .entry-content .gallery a {
  display: block;
  width: 100%;
  height: 100%;
}

body.page-id-14 .entry-content .gallery a {
  overflow: hidden;
  border-radius: 8px;
  background: #faf6ee;
  box-shadow: rgba(0, 70, 53, 0.08) 0 14px 28px;
  transition:
    box-shadow 180ms ease,
    transform 180ms ease;
}

body.page-id-14 .entry-content .gallery a:hover,
body.page-id-14 .entry-content .gallery a:focus-visible {
  box-shadow: rgba(0, 70, 53, 0.16) 0 18px 38px;
  transform: translateY(-2px);
}

body.page-id-14 .entry-content .gallery img {
  display: block;
  width: 100% !important;
  height: 176px !important;
  max-width: none !important;
  object-fit: cover;
  border: 0 !important;
  border-radius: 8px;
}

@media (max-width: 860px) {
  body.page-id-14 .entry-content .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-id-35429 .hf-diy-proof-grid,
  body.page-id-35429 .hf-diy-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-id-35429 .entry-content .hf-diy-products.wp-block-columns,
  body.page-id-35429 .hf-diy-story--signal,
  body.page-id-35429 .hf-diy-installs {
    grid-template-columns: 1fr;
  }

  body.page-id-35429 .hf-diy-story--signal figure.alignright,
  body.page-id-35429 .hf-diy-story--signal p {
    grid-column: 1;
  }

  body.page-id-35429 .hf-diy-story--signal figure.alignright {
    grid-row: auto;
    max-width: min(520px, 100%) !important;
    margin: 8px 0 22px !important;
  }

  body.page-id-35429 .entry-content figure.alignright {
    float: none;
    max-width: 100%;
    margin: 24px auto;
  }
}

@media (max-width: 520px) {
  body.page-id-14 .entry-content .gallery {
    grid-template-columns: 1fr;
  }

  body.page-id-14 .entry-content .gallery img {
    height: 220px !important;
  }

  body.page-id-35429 .entry-content.hf-diy-enhanced {
    --hf-diy-width: min(100%, calc(100vw - 48px));
    --hf-diy-copy: min(100%, calc(100vw - 48px));
  }

  body.page-id-35429 .hf-diy-intro,
  body.page-id-35429 .hf-diy-products,
  body.page-id-35429 .hf-diy-story,
  body.page-id-35429 .hf-diy-features,
  body.page-id-35429 .hf-diy-installs {
    width: var(--hf-diy-width) !important;
    max-width: var(--hf-diy-width) !important;
  }

  body.page-id-35429 .hf-diy-intro > p:first-child {
    overflow-wrap: break-word;
    font-size: clamp(24px, 7vw, 30px);
  }

  body.page-id-35429 .hf-diy-proof-grid,
  body.page-id-35429 .hf-diy-feature-grid {
    grid-template-columns: 1fr;
  }

  body.page-id-35429 .hf-diy-proof-grid h2 {
    min-height: 0;
  }

  body.page-id-35429 .hf-diy-intro h3 {
    justify-self: stretch;
    font-size: 13px !important;
  }

  body.page-id-35429 .entry-content .hf-diy-products .wp-block-image {
    min-height: 220px;
    padding: 22px 18px;
  }

  body.page-id-35429 .entry-content .hf-diy-products img {
    max-height: 220px;
  }

  body.page-id-35429 .entry-content .hf-diy-products h2,
  body.page-id-35429 .entry-content .hf-diy-products h3,
  body.page-id-35429 .entry-content .hf-diy-products p,
  body.page-id-35429 .entry-content .hf-diy-products ul {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  body.page-id-35429 .hf-diy-features {
    padding: 20px;
  }
}

/* Focused refresh for the DIY cat fence page. */
body.page-id-27468 .entry-content.hf-cat-diy-enhanced {
  --hf-cat-width: min(1200px, calc(100vw - 32px));
  --hf-cat-copy: min(760px, calc(100vw - 32px));
  --hf-cat-line: rgba(150, 120, 78, 0.16);
  --hf-cat-soft: #faf6ee;
  --hf-cat-ink: #173f36;
  padding-bottom: clamp(56px, 8vw, 96px);
}

body.page-id-27468 .wp-block-post-title {
  max-width: min(960px, calc(100vw - 32px));
  margin-inline: auto;
  color: var(--hf-teal);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.08;
  text-wrap: balance;
}

body.page-id-27468 .hf-cat-diy-hero,
body.page-id-27468 .hf-cat-diy-story,
body.page-id-27468 .hf-cat-diy-boundaries,
body.page-id-27468 .hf-cat-diy-features {
  box-sizing: border-box;
  width: var(--hf-cat-width) !important;
  max-width: var(--hf-cat-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-id-27468 .hf-cat-diy-hero {
  position: relative;
  overflow: hidden;
  margin-top: clamp(26px, 5vw, 56px);
  padding: clamp(26px, 4.5vw, 52px);
  border: 1px solid rgba(150, 120, 78, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 90% 12%, rgba(150, 120, 78, 0.12), transparent 30%),
    linear-gradient(180deg, #f9f7f3 0%, #ffffff 72%);
  box-shadow: rgba(0, 70, 53, 0.08) 0 22px 54px;
}

body.page-id-27468 .hf-cat-diy-hero > h2 {
  max-width: 860px !important;
  margin: 0 0 14px !important;
  color: var(--hf-teal) !important;
  font-size: clamp(30px, 3.2vw, 44px) !important;
  letter-spacing: 0;
  line-height: 1.05 !important;
  text-wrap: balance;
}

body.page-id-27468 .hf-cat-diy-hero > p {
  max-width: 760px !important;
  margin: 0 0 clamp(20px, 3vw, 34px) !important;
  color: #36534c;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
}

body.page-id-27468 .hf-cat-diy-hero-grid.wp-block-columns,
body.page-id-27468 .hf-cat-diy-story-grid.wp-block-columns {
  display: grid !important;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  margin: 0 !important;
}

body.page-id-27468 .hf-cat-diy-hero-grid.wp-block-columns {
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.78fr);
}

body.page-id-27468 .hf-cat-diy-hero-grid > .wp-block-column {
  min-width: 0;
}

body.page-id-27468 .hf-cat-diy-hero-grid > .wp-block-column,
body.page-id-27468 .hf-cat-diy-story-grid > .wp-block-column {
  width: 100% !important;
  min-width: 0 !important;
  flex-basis: auto !important;
  flex-grow: 0 !important;
}

body.page-id-27468 .hf-cat-diy-hero-copy > p:not(.hf-cat-diy-rating):not(.hf-cat-diy-testimonial) {
  max-width: 680px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: #36534c;
  font-size: 15px;
  line-height: 1.72;
}

body.page-id-27468 .hf-cat-diy-rating {
  display: inline-flex;
  width: max-content;
  max-width: 100% !important;
  margin: 16px 0 10px !important;
  padding: 7px 10px;
  border: 1px solid rgba(218, 159, 48, 0.34);
  border-radius: 6px;
  background: #fff8e7;
  color: #6f4a08 !important;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

body.page-id-27468 .hf-cat-diy-testimonial {
  max-width: 680px !important;
  margin: 0 !important;
  padding: 18px 20px;
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-left: 5px solid var(--hf-teal);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #21483f !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  box-shadow: rgba(0, 70, 53, 0.06) 0 14px 34px;
}

body.page-id-27468 .hf-cat-diy-testimonial span,
body.page-id-27468 .hf-cat-diy-testimonial em {
  color: inherit !important;
}

/* Customer story lifted out of the hero into its own balanced full-width band. */
body.page-id-27468 .hf-cat-diy-review {
  box-sizing: border-box;
  width: var(--hf-cat-width) !important;
  max-width: var(--hf-cat-width) !important;
  margin: clamp(30px, 4.5vw, 52px) auto 0 !important;
  padding: clamp(26px, 4vw, 46px);
  border: 1px solid rgba(150, 120, 78, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 6%, rgba(150, 120, 78, 0.10), transparent 32%),
    var(--hf-cat-soft);
  text-align: center;
}

body.page-id-27468 .hf-cat-diy-review .hf-cat-diy-rating {
  margin: 0 0 18px !important;
}

body.page-id-27468 .hf-cat-diy-review .hf-cat-diy-testimonial {
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: left;
}

body.page-id-27468 .hf-cat-diy-hero-media {
  display: grid;
  align-content: center;
  justify-items: center;
}

body.page-id-27468 .hf-cat-diy-hero-media .wp-block-image,
body.page-id-27468 .hf-cat-diy-story .wp-block-image {
  margin: 0 !important;
}

body.page-id-27468 .hf-cat-diy-hero-media img {
  display: block;
  width: min(100%, 560px);
  max-height: 430px;
  object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0, 70, 53, 0.12));
}

body.page-id-27468 .hf-cat-diy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  max-width: none !important;
  margin-top: 18px !important;
}

body.page-id-27468 .hf-cat-diy-hero-media .hf-cat-diy-actions,
body.page-id-27468 .hf-cat-diy-story .wp-block-column:last-child .hf-cat-diy-actions,
body.page-id-27468 .hf-cat-diy-boundaries > .hf-cat-diy-actions,
body.page-id-27468 .hf-cat-diy-features > .hf-cat-diy-actions {
  justify-content: center;
}

/* The BUY NOW / Design your fence CTA pairs are core button blocks, so they only
   had WordPress's default ~19px block spacing and ended up crowding the image or
   card above and the section edge below. Give them consistent breathing room. */
body.page-id-27468 .hf-cat-diy-hero-media .wp-block-buttons,
body.page-id-27468 .hf-cat-diy-story .wp-block-buttons,
body.page-id-27468 .hf-cat-diy-boundaries .wp-block-buttons,
body.page-id-27468 .hf-cat-diy-features .wp-block-buttons {
  margin-top: clamp(26px, 3.2vw, 38px) !important;
  margin-bottom: clamp(10px, 1.8vw, 18px) !important;
}

body.page-id-27468 .hf-cat-diy-story {
  margin-top: clamp(46px, 7vw, 86px);
  padding-top: clamp(30px, 5vw, 58px);
  border-top: 1px solid rgba(150, 120, 78, 0.14);
}

body.page-id-27468 .hf-cat-diy-story > h2,
body.page-id-27468 .hf-cat-diy-boundaries > h2,
body.page-id-27468 .hf-cat-diy-features > h2 {
  max-width: 860px !important;
  margin: 0 0 18px !important;
  color: var(--hf-teal) !important;
  font-size: clamp(25px, 2.3vw, 33px) !important;
  line-height: 1.1 !important;
  text-wrap: balance;
}

body.page-id-27468 .hf-cat-diy-story-grid.wp-block-columns {
  grid-template-columns: minmax(260px, 0.76fr) minmax(0, 1fr);
}

body.page-id-27468 .hf-cat-diy-story--collar .hf-cat-diy-story-grid.wp-block-columns {
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.84fr);
}

body.page-id-27468 .hf-cat-diy-story p,
body.page-id-27468 .hf-cat-diy-boundaries > p,
body.page-id-27468 .hf-cat-diy-features > p {
  max-width: var(--hf-cat-copy) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: #36534c;
  font-size: 15px;
  line-height: 1.72;
}

body.page-id-27468 .hf-cat-diy-story ul {
  max-width: var(--hf-cat-copy) !important;
  margin-left: 0 !important;
  padding-left: 1.2em;
}

body.page-id-27468 .hf-cat-diy-story li {
  color: #36534c;
  font-size: 15px;
  line-height: 1.62;
}

body.page-id-27468 .hf-cat-diy-story figure {
  overflow: hidden;
  padding: clamp(12px, 2vw, 18px);
  border: 1px solid rgba(150, 120, 78, 0.13);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.08) 0 18px 42px;
}

body.page-id-27468 .hf-cat-diy-story img {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: contain;
}

body.page-id-27468 .hf-cat-diy-story--collar img {
  max-height: 330px;
}

body.page-id-27468 .hf-cat-diy-boundaries {
  margin-top: clamp(48px, 7vw, 86px);
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid rgba(150, 120, 78, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at top right, rgba(150, 120, 78, 0.10), transparent 34%),
    var(--hf-cat-soft);
}

body.page-id-27468 .hf-cat-diy-boundary-grid {
  display: grid;
  /* Single column so every boundary example image fills the container width
     (the first card previously sat half-width with an empty column beside it). */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 24px;
}

body.page-id-27468 .hf-cat-diy-boundary-card {
  margin: 0 !important;
  padding: clamp(12px, 2vw, 18px);
  border: 1px solid rgba(150, 120, 78, 0.13);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.08) 0 18px 42px;
}

body.page-id-27468 .hf-cat-diy-boundary-card--wide {
  grid-column: 1 / -1;
}

body.page-id-27468 .hf-cat-diy-boundary-card img {
  display: block;
  width: 100%;
  max-height: 760px;
  object-fit: contain;
}

body.page-id-27468 .hf-cat-diy-features {
  margin-top: clamp(48px, 7vw, 86px);
}

body.page-id-27468 .hf-cat-diy-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

body.page-id-27468 .hf-cat-diy-feature-card {
  max-width: none !important;
  margin: 0 !important;
  padding: 17px 18px;
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #425d56;
  font-size: 15px !important;
  line-height: 1.55 !important;
  box-shadow: rgba(0, 70, 53, 0.05) 0 12px 28px;
}

body.page-id-27468 .hf-cat-diy-feature-card strong {
  display: block;
  margin-bottom: 7px;
  color: #0d342d;
  font-size: 15px;
  line-height: 1.25;
}

body.page-id-27468 .hf-cat-diy-feature-note {
  max-width: 760px !important;
  margin: 18px 0 0 !important;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(150, 120, 78, 0.10);
  color: #123d34 !important;
  font-weight: 750;
}

@media (max-width: 860px) {
  body.page-id-27468 .hf-cat-diy-hero-grid.wp-block-columns,
  body.page-id-27468 .hf-cat-diy-story-grid.wp-block-columns {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-id-27468 .hf-cat-diy-story--collar .hf-cat-diy-story-grid.wp-block-columns {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-id-27468 .hf-cat-diy-hero-media {
    order: -1;
  }

  body.page-id-27468 .hf-cat-diy-feature-grid,
  body.page-id-27468 .hf-cat-diy-boundary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body.page-id-27468 .entry-content.hf-cat-diy-enhanced {
    --hf-cat-width: min(100%, calc(100vw - 40px));
    --hf-cat-copy: min(100%, calc(100vw - 40px));
  }

  body.page-id-27468 .hf-cat-diy-hero,
  body.page-id-27468 .hf-cat-diy-boundaries {
    padding: 20px;
  }

  body.page-id-27468 .hf-cat-diy-hero > h2 {
    font-size: clamp(25px, 8vw, 32px) !important;
  }

  body.page-id-27468 .hf-cat-diy-feature-grid,
  body.page-id-27468 .hf-cat-diy-boundary-grid {
    grid-template-columns: 1fr;
  }

  body.page-id-27468 .hf-cat-diy-actions {
    align-items: stretch;
  }

  body.page-id-27468 .hf-cat-diy-actions a.button {
    flex: 1 1 150px;
  }
}

/* Focused refresh for the indoor wireless cat fence page. */
body.page-id-48208 .entry-content.hf-indoor-cat-enhanced {
  --hf-indoor-cat-width: min(1200px, calc(100vw - 32px));
  --hf-indoor-cat-copy: min(720px, calc(100vw - 32px));
  --hf-indoor-cat-line: rgba(150, 120, 78, 0.15);
  --hf-indoor-cat-soft: #faf6ee;
  --hf-indoor-cat-ink: #183f36;
  padding-bottom: clamp(56px, 8vw, 96px);
}

body.page-id-48208 .entry-content.hf-indoor-cat-enhanced .alignright {
  float: none !important;
  margin: 0 !important;
}

body.page-id-48208 .entry-content.hf-indoor-cat-enhanced .wp-block-image,
body.page-id-48208 .entry-content.hf-indoor-cat-enhanced figure {
  margin: 0 !important;
}

body.page-id-48208 .hf-indoor-cat-intro,
body.page-id-48208 .hf-indoor-cat-learning,
body.page-id-48208 .hf-indoor-cat-scenario,
body.page-id-48208 .hf-indoor-cat-models,
body.page-id-48208 .hf-indoor-cat-install {
  box-sizing: border-box;
  width: var(--hf-indoor-cat-width) !important;
  max-width: var(--hf-indoor-cat-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-id-48208 .hf-indoor-cat-intro {
  margin-top: clamp(38px, 6vw, 72px);
  padding: clamp(24px, 4.5vw, 50px);
  border: 1px solid var(--hf-indoor-cat-line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 18%, rgba(150, 120, 78, 0.12), transparent 30%),
    linear-gradient(180deg, #f9f7f3 0%, #ffffff 76%);
  box-shadow: rgba(0, 70, 53, 0.08) 0 22px 54px;
}

body.page-id-48208 .hf-indoor-cat-kicker {
  max-width: 760px !important;
  margin: 0 0 10px !important;
  color: #0d342d !important;
  font-size: clamp(25px, 2.3vw, 33px) !important;
  line-height: 1.14 !important;
  text-wrap: balance;
}

body.page-id-48208 .hf-indoor-cat-intro-title {
  max-width: 820px !important;
  margin: 0 0 clamp(20px, 3vw, 32px) !important;
  color: var(--hf-teal) !important;
  font-size: clamp(25px, 2.3vw, 33px) !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

body.page-id-48208 .hf-indoor-cat-intro-grid,
body.page-id-48208 .hf-indoor-cat-learning-grid {
  display: grid;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

body.page-id-48208 .hf-indoor-cat-intro-grid {
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.52fr);
}

body.page-id-48208 .hf-indoor-cat-subhead {
  max-width: var(--hf-indoor-cat-copy) !important;
  margin: 0 0 14px !important;
  color: #173f36 !important;
  font-size: 16px !important;
  font-weight: 650;
  line-height: 1.55 !important;
}

body.page-id-48208 .hf-indoor-cat-intro-copy > p,
body.page-id-48208 .hf-indoor-cat-learning-copy > p,
body.page-id-48208 .hf-indoor-cat-install > p {
  max-width: var(--hf-indoor-cat-copy) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: #36534c;
  font-size: 15px;
  line-height: 1.72;
}

body.page-id-48208 .hf-indoor-cat-intro-media,
body.page-id-48208 .hf-indoor-cat-learning-media {
  display: grid;
  justify-items: center;
}

body.page-id-48208 .hf-indoor-cat-intro-media figure,
body.page-id-48208 .hf-indoor-cat-learning-media figure,
body.page-id-48208 .hf-indoor-cat-scenario-media figure,
body.page-id-48208 .hf-indoor-cat-product-card figure {
  overflow: hidden;
  width: 100%;
  padding: clamp(12px, 2vw, 18px);
  border: 1px solid rgba(150, 120, 78, 0.13);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.08) 0 18px 42px;
}

body.page-id-48208 .hf-indoor-cat-intro-media img,
body.page-id-48208 .hf-indoor-cat-learning-media img,
body.page-id-48208 .hf-indoor-cat-scenario-media img,
body.page-id-48208 .hf-indoor-cat-product-card img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
}

body.page-id-48208 .hf-indoor-cat-learning {
  margin-top: clamp(48px, 7vw, 88px);
}

body.page-id-48208 .hf-indoor-cat-learning-grid {
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
}

body.page-id-48208 .hf-indoor-cat-learning-copy > h3,
body.page-id-48208 .hf-indoor-cat-models > h3 {
  max-width: 760px !important;
  margin: 0 0 16px !important;
  color: var(--hf-teal) !important;
  font-size: clamp(25px, 2.3vw, 33px) !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

body.page-id-48208 .hf-indoor-cat-scenario {
  margin-top: clamp(48px, 7vw, 88px);
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid var(--hf-indoor-cat-line);
  border-radius: 8px;
  background:
    radial-gradient(circle at top left, rgba(150, 120, 78, 0.10), transparent 34%),
    var(--hf-indoor-cat-soft);
}

body.page-id-48208 .hf-indoor-cat-scenario-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: minmax(300px, 0.95fr) minmax(0, 0.8fr);
  gap: clamp(24px, 5vw, 60px);
  align-items: center;
  margin: 0 !important;
}

body.page-id-48208 .hf-indoor-cat-scenario-grid > .wp-block-column,
body.page-id-48208 .hf-indoor-cat-product-grid > .wp-block-column {
  width: 100% !important;
  min-width: 0 !important;
  flex-basis: auto !important;
  flex-grow: 0 !important;
}

body.page-id-48208 .hf-indoor-cat-scenario-copy > p {
  max-width: 520px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: #36534c;
  font-size: 15px;
  line-height: 1.7;
}

body.page-id-48208 .hf-indoor-cat-scenario-copy > p:first-child {
  color: var(--hf-teal) !important;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.12;
}

body.page-id-48208 .hf-indoor-cat-scenario-copy > p:first-child strong,
body.page-id-48208 .hf-indoor-cat-models > h3 strong {
  color: inherit !important;
}

body.page-id-48208 .hf-indoor-cat-models {
  margin-top: clamp(48px, 7vw, 88px);
}

body.page-id-48208 .hf-indoor-cat-product-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0 0 !important;
}

body.page-id-48208 .hf-indoor-cat-product-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.07) 0 16px 42px;
}

body.page-id-48208 .hf-indoor-cat-product-card figure {
  box-shadow: none;
}

body.page-id-48208 .hf-indoor-cat-product-card img {
  max-height: 230px;
}

body.page-id-48208 .hf-indoor-cat-product-card p {
  max-width: none !important;
  margin: 0 !important;
  color: #36534c;
  font-size: 14px;
  line-height: 1.62;
  overflow-wrap: anywhere;
}

body.page-id-48208 .hf-indoor-cat-product-card p:has(strong) {
  color: #0d342d;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.2;
}

body.page-id-48208 .hf-indoor-cat-card-actions {
  margin-top: auto !important;
  padding-top: 8px;
}

body.page-id-48208 .hf-indoor-cat-card-actions .button {
  width: 100%;
  justify-content: center;
}

body.page-id-48208 .hf-indoor-cat-install {
  margin-top: clamp(48px, 7vw, 88px);
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-left: 5px solid var(--hf-teal);
  border-radius: 8px;
  background: linear-gradient(180deg, #f9f7f3 0%, #ffffff 100%);
  box-shadow: rgba(0, 70, 53, 0.06) 0 16px 40px;
}

body.page-id-48208 .hf-indoor-cat-install-title {
  margin-bottom: 12px !important;
  color: var(--hf-teal) !important;
  font-size: clamp(25px, 2.3vw, 33px) !important;
  font-weight: 750;
  line-height: 1.12 !important;
}

body.page-id-48208 .hf-indoor-cat-install > p:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 860px) {
  body.page-id-48208 .hf-indoor-cat-intro-grid,
  body.page-id-48208 .hf-indoor-cat-learning-grid,
  body.page-id-48208 .hf-indoor-cat-scenario-grid.wp-block-columns,
  body.page-id-48208 .hf-indoor-cat-product-grid.wp-block-columns {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-id-48208 .hf-indoor-cat-intro-media {
    order: -1;
  }
}

@media (max-width: 560px) {
  body.page-id-48208 .entry-content.hf-indoor-cat-enhanced {
    --hf-indoor-cat-width: min(100%, calc(100vw - 40px));
    --hf-indoor-cat-copy: min(100%, calc(100vw - 40px));
  }

  body.page-id-48208 .hf-indoor-cat-intro,
  body.page-id-48208 .hf-indoor-cat-scenario,
  body.page-id-48208 .hf-indoor-cat-product-card,
  body.page-id-48208 .hf-indoor-cat-install {
    padding: 20px;
  }

  body.page-id-48208 .hf-indoor-cat-kicker {
    font-size: clamp(20px, 6vw, 25px) !important;
  }

  body.page-id-48208 .hf-indoor-cat-intro-title {
    font-size: clamp(23px, 7vw, 31px) !important;
  }
}

/* Focused refresh for the cat fence installation and training page. */
body.page-id-43423 .entry-content.hf-cat-install-enhanced {
  --hf-cat-install-width: min(1200px, calc(100vw - 32px));
  --hf-cat-install-copy: min(820px, calc(100vw - 32px));
  --hf-cat-install-line: rgba(150, 120, 78, 0.15);
  --hf-cat-install-soft: #f7f3ef;
  padding-bottom: clamp(56px, 8vw, 96px);
}

body.page-id-43423 .hf-cat-install-intro,
body.page-id-43423 .hf-cat-install-section {
  box-sizing: border-box;
  width: var(--hf-cat-install-width) !important;
  max-width: var(--hf-cat-install-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-id-43423 .hf-cat-install-intro {
  margin-top: clamp(38px, 6vw, 72px);
  padding: clamp(24px, 4.5vw, 50px);
  border: 1px solid var(--hf-cat-install-line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 90% 14%, rgba(150, 120, 78, 0.12), transparent 30%),
    linear-gradient(180deg, #f9f7f3 0%, #ffffff 76%);
  box-shadow: rgba(0, 70, 53, 0.08) 0 22px 54px;
}

body.page-id-43423 .hf-cat-install-section {
  margin-top: clamp(48px, 7vw, 88px);
}

body.page-id-43423 .hf-cat-install-intro > h2,
body.page-id-43423 .hf-cat-install-section > h2 {
  max-width: 860px !important;
  margin: 0 0 16px !important;
  color: var(--hf-teal) !important;
  font-size: clamp(25px, 2.3vw, 33px) !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

body.page-id-43423 .hf-cat-install-intro > p,
body.page-id-43423 .hf-cat-install-section > p {
  max-width: var(--hf-cat-install-copy) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: #36534c;
  font-size: 15px;
  line-height: 1.72;
}

body.page-id-43423 .hf-cat-install-intro > p:last-child,
body.page-id-43423 .hf-cat-install-section > p:last-child {
  margin-bottom: 0 !important;
}

body.page-id-43423 .hf-cat-install-lead {
  display: inline-flex;
  width: max-content;
  max-width: 100% !important;
  margin: 4px 0 18px !important;
  padding: 9px 11px;
  border: 1px solid rgba(150, 120, 78, 0.18);
  border-radius: 8px;
  background: rgba(150, 120, 78, 0.08);
  color: #0d342d !important;
  font-size: 13px !important;
  font-weight: 750;
  line-height: 1.25 !important;
}

body.page-id-43423 .hf-cat-install-gallery-panel {
  margin: clamp(28px, 5vw, 48px) 0;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--hf-cat-install-line);
  border-radius: 8px;
  background:
    radial-gradient(circle at top right, rgba(150, 120, 78, 0.10), transparent 34%),
    var(--hf-cat-install-soft);
}

body.page-id-43423 .hf-cat-install-gallery-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
}

body.page-id-43423 .hf-cat-install-gallery-intro h3 {
  margin: 0 !important;
  color: var(--hf-teal) !important;
  font-size: clamp(22px, 2.2vw, 30px) !important;
  line-height: 1.12 !important;
}

body.page-id-43423 .hf-cat-install-gallery-intro p {
  max-width: 620px !important;
  margin: 0 !important;
  color: #36534c;
  font-size: 14px;
  line-height: 1.6;
}

body.page-id-43423 .hf-cat-install-gallery {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.page-id-43423 .hf-cat-install-gallery-item {
  overflow: hidden;
  width: 100%;
  margin: 0 !important;
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.08) 0 14px 34px;
}

body.page-id-43423 .hf-cat-install-gallery-item--featured {
  grid-column: span 2;
  grid-row: span 2;
}

body.page-id-43423 .hf-cat-install-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 220ms ease;
}

body.page-id-43423 .hf-cat-install-gallery-item--featured img {
  aspect-ratio: 8 / 6;
}

body.page-id-43423 .hf-cat-install-gallery-item:hover img {
  transform: scale(1.035);
}

body.page-id-43423 .hf-cat-install-training {
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--hf-cat-install-line);
  border-left: 5px solid var(--hf-teal);
  border-radius: 8px;
  background: linear-gradient(180deg, #f9f7f3 0%, #ffffff 100%);
  box-shadow: rgba(0, 70, 53, 0.06) 0 16px 40px;
}

body.page-id-43423 .hf-cat-install-quote {
  max-width: 900px !important;
  margin: 24px 0 !important;
  padding: 18px 20px;
  border: 1px solid rgba(150, 120, 78, 0.14);
  border-radius: 8px;
  background: rgba(150, 120, 78, 0.08);
  color: #0d342d !important;
  font-size: clamp(18px, 2vw, 25px) !important;
  font-weight: 750;
  line-height: 1.22 !important;
}

body.page-id-43423 .hf-cat-install-quote b,
body.page-id-43423 .hf-cat-install-quote strong {
  color: inherit !important;
}

body.page-id-43423 .hf-cat-install-training-note {
  max-width: 900px !important;
  padding: 15px 16px;
  border-radius: 8px;
  background: rgba(150, 120, 78, 0.09);
  color: #163f36 !important;
  font-weight: 650;
}

@media (max-width: 860px) {
  body.page-id-43423 .hf-cat-install-gallery-intro,
  body.page-id-43423 .hf-cat-install-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body.page-id-43423 .entry-content.hf-cat-install-enhanced {
    --hf-cat-install-width: min(100%, calc(100vw - 40px));
    --hf-cat-install-copy: min(100%, calc(100vw - 40px));
  }

  body.page-id-43423 .hf-cat-install-intro,
  body.page-id-43423 .hf-cat-install-gallery-panel,
  body.page-id-43423 .hf-cat-install-training {
    padding: 20px;
  }

  body.page-id-43423 .hf-cat-install-gallery-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-id-43423 .hf-cat-install-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.page-id-43423 .hf-cat-install-gallery-item--featured {
    grid-column: auto;
    grid-row: auto;
  }

  body.page-id-43423 .hf-cat-install-lead {
    display: block;
    width: auto;
  }
}

/* Bark collars page refresh. */
body.page-id-134616 main.wp-block-group {
  margin-block-start: 0 !important;
}

body.page-id-134616 main.wp-block-group > .wp-block-group:first-child {
  padding-top: clamp(28px, 4vw, 52px) !important;
}

body.page-id-134616 .wp-block-post-title {
  width: min(1200px, calc(100vw - 32px)) !important;
  max-width: min(1200px, calc(100vw - 32px)) !important;
  margin: 0 auto !important;
  color: var(--hf-teal);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.05;
  text-align: left;
  text-wrap: balance;
}

body.page-id-134616 .entry-content.hf-bark-enhanced {
  --hf-bark-width: min(1200px, calc(100vw - 32px));
  --hf-bark-copy: min(820px, calc(100vw - 32px));
  --hf-bark-line: rgba(150, 120, 78, 0.16);
  --hf-bark-soft: #f7f3ef;
  --hf-bark-ink: #102f28;
  box-sizing: border-box;
  overflow-x: clip;
  padding-bottom: clamp(60px, 8vw, 104px);
}

body.page-id-134616 .entry-content.hf-bark-enhanced * {
  box-sizing: border-box;
}

body.page-id-134616 .hf-bark-hero,
body.page-id-134616 .hf-bark-benefits,
body.page-id-134616 .hf-bark-guide,
body.page-id-134616 .hf-bark-box,
body.page-id-134616 .hf-bark-tips,
body.page-id-134616 .hf-bark-enquiry {
  width: var(--hf-bark-width) !important;
  max-width: var(--hf-bark-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-id-134616 .hf-bark-hero {
  margin-top: clamp(18px, 3vw, 34px);
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(150, 120, 78, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0, rgba(150, 120, 78, 0.12), transparent 38%),
    linear-gradient(180deg, #f9f7f3 0%, #fff 100%);
  box-shadow: rgba(0, 70, 53, 0.07) 0 22px 54px;
}

body.page-id-134616 .hf-bark-hero-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(24px, 4vw, 52px) !important;
  align-items: center;
  margin: 0 !important;
}

body.page-id-134616 .hf-bark-hero-grid > .wp-block-column,
body.page-id-134616 .hf-bark-guide-grid > .wp-block-column,
body.page-id-134616 .hf-bark-benefit-grid > .wp-block-column,
body.page-id-134616 .hf-bark-fit-grid > .wp-block-column,
body.page-id-134616 .hf-bark-enquiry-grid > .wp-block-column {
  min-width: 0 !important;
  width: 100% !important;
}

body.page-id-134616 .hf-bark-product-card {
  min-width: 0;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--hf-bark-line);
  border-radius: 8px;
  background: #fff;
}

body.page-id-134616 .hf-bark-product-card .wc-block-grid__products {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-id-134616 .hf-bark-product-card .wc-block-grid__product {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left;
  list-style: none;
}

body.page-id-134616 .hf-bark-product-card .wc-block-grid__product-image,
body.page-id-134616 .hf-bark-product-card .wc-block-components-product-image {
  display: grid;
  min-height: 255px;
  margin: 0 0 18px !important;
  padding: 12px;
  place-items: center;
  border-radius: 8px;
  background: #fff;
}

body.page-id-134616 .hf-bark-product-card img {
  display: block;
  width: min(360px, 100%);
  max-height: 300px;
  margin: 0 auto;
  object-fit: contain;
}

body.page-id-134616 .hf-bark-product-card .wc-block-grid__product-title {
  margin: 0 0 12px;
  color: var(--hf-teal);
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.14;
}

body.page-id-134616 .hf-bark-product-card .wc-block-grid__product-price,
body.page-id-134616 .hf-bark-product-card .price {
  display: block;
  margin: 12px 0 16px;
  color: var(--hf-ink);
  font-size: 15px;
  font-weight: 800;
}

body.page-id-134616 .hf-bark-product-card .wc-block-grid__product-rating,
body.page-id-134616 .hf-bark-product-card .star-rating,
body.page-id-134616 .hf-bark-product-card .star-rating::before,
body.page-id-134616 .hf-bark-product-card .star-rating span::before {
  color: var(--hf-rating-gold) !important;
}

body.page-id-134616 .hf-bark-product-card .wp-block-button,
body.page-id-134616 .hf-bark-product-card .wc-block-grid__product-add-to-cart {
  margin: 18px 0 0 !important;
}

body.page-id-134616 .hf-bark-product-card .wp-block-button__link,
body.page-id-134616 .hf-bark-product-card .add_to_cart_button,
body.page-id-134616 .hf-bark-enquiry-form input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: var(--hf-button-height);
  padding: var(--hf-button-padding) !important;
  border: 1px solid var(--hf-button-primary-bg) !important;
  border-radius: var(--hf-button-radius) !important;
  background: var(--hf-button-primary-bg) !important;
  color: #fff !important;
  font-size: var(--hf-button-font-size) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

body.page-id-134616 .hf-bark-product-card .wp-block-button__link:hover,
body.page-id-134616 .hf-bark-product-card .wp-block-button__link:focus-visible,
body.page-id-134616 .hf-bark-product-card .add_to_cart_button:hover,
body.page-id-134616 .hf-bark-product-card .add_to_cart_button:focus-visible,
body.page-id-134616 .hf-bark-enquiry-form input[type="submit"]:hover,
body.page-id-134616 .hf-bark-enquiry-form input[type="submit"]:focus-visible {
  border-color: var(--hf-button-primary-hover) !important;
  background: var(--hf-button-primary-hover) !important;
  transform: translateY(-1px);
}

body.page-id-134616 .hf-bark-hero-copy {
  display: block;
  min-width: 0;
}

body.page-id-134616 .hf-bark-hero-copy h2,
body.page-id-134616 .hf-bark-benefits > h2,
body.page-id-134616 .hf-bark-box > h2,
body.page-id-134616 .hf-bark-tips > h2 {
  margin: 0 0 14px !important;
  color: var(--hf-bark-ink) !important;
  font-size: clamp(25px, 2.3vw, 33px) !important;
  line-height: 1.12 !important;
}

body.page-id-134616 .hf-bark-hero-copy > h2 {
  max-width: 720px !important;
}

body.page-id-134616 .hf-bark-hero-copy .wp-block-columns {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
  gap: clamp(18px, 3vw, 34px) !important;
  align-items: center;
  margin: 20px 0 0 !important;
}

body.page-id-134616 .hf-bark-hero-copy .wp-block-column {
  min-width: 0 !important;
  width: 100% !important;
}

body.page-id-134616 .hf-bark-hero-copy p,
body.page-id-134616 .hf-bark-guide p,
body.page-id-134616 .hf-bark-box p,
body.page-id-134616 .hf-bark-tip-card p,
body.page-id-134616 .hf-bark-fit-card p,
body.page-id-134616 .hf-bark-benefit-card p {
  color: #415d55;
  font-size: 15px !important;
  line-height: 1.66 !important;
}

body.page-id-134616 .hf-bark-hero-copy p {
  max-width: 560px !important;
  margin: 0 0 12px !important;
}

body.page-id-134616 .hf-bark-hero-copy img,
body.page-id-134616 .hf-bark-guide-media img,
body.page-id-134616 .hf-bark-fit-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

body.page-id-134616 .hf-bark-hero-copy figure,
body.page-id-134616 .hf-bark-hero-copy .wp-block-image {
  margin: 0 !important;
}

body.page-id-134616 .hf-bark-benefits {
  margin-top: clamp(32px, 5vw, 62px);
}

body.page-id-134616 .hf-bark-benefit-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px !important;
  align-items: stretch !important;
  margin: 0 !important;
}

body.page-id-134616 .hf-bark-benefit-card {
  padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid var(--hf-bark-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.06) 0 18px 42px;
}

body.page-id-134616 .hf-bark-benefit-card h2,
body.page-id-134616 .hf-bark-guide-copy h2,
body.page-id-134616 .hf-bark-fit-card h2,
body.page-id-134616 .hf-bark-tip-card h3 {
  margin: 0 0 12px !important;
  color: var(--hf-teal) !important;
  font-size: clamp(20px, 1.7vw, 25px) !important;
  line-height: 1.14 !important;
}

body.page-id-134616 .hf-bark-benefit-card p:last-child,
body.page-id-134616 .hf-bark-guide-copy p:last-child,
body.page-id-134616 .hf-bark-box p:last-child,
body.page-id-134616 .hf-bark-tip-card p:last-child {
  margin-bottom: 0 !important;
}

body.page-id-134616 .hf-bark-guide {
  margin-top: clamp(32px, 5vw, 62px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--hf-bark-line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0 0, rgba(139, 210, 184, 0.18), transparent 36%),
    linear-gradient(180deg, var(--hf-bark-soft) 0%, #fff 100%);
}

body.page-id-134616 .hf-bark-guide-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 54px) !important;
  align-items: center;
  margin: 0 !important;
}

body.page-id-134616 .hf-bark-guide-media figure,
body.page-id-134616 .hf-bark-fit-card figure {
  margin: 0 !important;
}

body.page-id-134616 .hf-bark-guide-media {
  display: grid;
  place-items: center;
}

body.page-id-134616 .hf-bark-guide-media img {
  width: min(340px, 100%);
  max-height: 340px;
  object-fit: contain;
}

body.page-id-134616 .hf-bark-box {
  margin-top: clamp(32px, 5vw, 62px);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(150, 120, 78, 0.16);
  border-left: 5px solid var(--hf-teal);
  border-radius: 8px;
  background: #fff;
}

body.page-id-134616 .hf-bark-tips {
  margin-top: clamp(32px, 5vw, 62px);
}

body.page-id-134616 .hf-bark-fit-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(170px, 0.45fr));
  gap: 14px !important;
  align-items: stretch !important;
  margin: 18px 0 0 !important;
}

body.page-id-134616 .hf-bark-fit-card,
body.page-id-134616 .hf-bark-tip-card {
  padding: clamp(18px, 2.2vw, 24px);
  border: 1px solid var(--hf-bark-line);
  border-radius: 8px;
  background: #fff;
}

body.page-id-134616 .hf-bark-fit-card {
  display: grid;
  align-content: center;
}

body.page-id-134616 .hf-bark-fit-card img {
  width: 100%;
  max-height: 245px;
  object-fit: contain;
}

body.page-id-134616 .hf-bark-tip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

body.page-id-134616 .hf-bark-tip-card {
  box-shadow: rgba(0, 70, 53, 0.05) 0 14px 32px;
}

body.page-id-134616 .hf-bark-enquiry {
  margin-top: clamp(36px, 6vw, 74px);
  padding: clamp(22px, 3vw, 34px);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0, rgba(139, 210, 184, 0.18), transparent 34%),
    linear-gradient(135deg, #04251e 0%, #06382d 100%);
  color: #fff;
}

body.page-id-134616 .hf-bark-enquiry-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 52px) !important;
  align-items: stretch;
  margin: 0 !important;
}

body.page-id-134616 .hf-bark-enquiry .hf-bark-product-card {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

body.page-id-134616 .hf-bark-enquiry-form {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

body.page-id-134616 .hf-bark-enquiry-form h2,
body.page-id-134616 .hf-bark-enquiry-form h3,
body.page-id-134616 .hf-bark-enquiry-form p,
body.page-id-134616 .hf-bark-enquiry-form label {
  color: #fff !important;
}

body.page-id-134616 .hf-bark-enquiry-form p,
body.page-id-134616 .hf-bark-enquiry-form label {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body.page-id-134616 .hf-bark-enquiry-form input:not([type="submit"]),
body.page-id-134616 .hf-bark-enquiry-form textarea,
body.page-id-134616 .hf-bark-enquiry-form select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: #fff;
  color: var(--hf-ink);
  font-family: inherit;
  font-size: 14px;
}

body.page-id-134616 .hf-bark-enquiry-form textarea {
  min-height: 130px;
  resize: vertical;
}

body.page-id-134616 .hf-bark-enquiry-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 6px;
}

body.page-id-134616 .hf-bark-enquiry-form br {
  display: none;
}

@media (max-width: 940px) {
  body.page-id-134616 .hf-bark-hero-grid.wp-block-columns,
  body.page-id-134616 .hf-bark-guide-grid.wp-block-columns,
  body.page-id-134616 .hf-bark-enquiry-grid.wp-block-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-id-134616 .hf-bark-hero-copy .wp-block-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-id-134616 .hf-bark-benefit-grid.wp-block-columns,
  body.page-id-134616 .hf-bark-fit-grid.wp-block-columns,
  body.page-id-134616 .hf-bark-tip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body.page-id-134616 .wp-block-post-title {
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: min(100%, calc(100vw - 28px)) !important;
    font-size: clamp(30px, 9vw, 38px);
  }

  body.page-id-134616 .entry-content.hf-bark-enhanced {
    --hf-bark-width: min(100%, calc(100vw - 28px));
    --hf-bark-copy: min(100%, calc(100vw - 28px));
  }

  body.page-id-134616 .hf-bark-hero,
  body.page-id-134616 .hf-bark-guide,
  body.page-id-134616 .hf-bark-box,
  body.page-id-134616 .hf-bark-enquiry,
  body.page-id-134616 .hf-bark-enquiry-form,
  body.page-id-134616 .hf-bark-product-card,
  body.page-id-134616 .hf-bark-benefit-card,
  body.page-id-134616 .hf-bark-fit-card,
  body.page-id-134616 .hf-bark-tip-card {
    padding: 18px;
  }

  body.page-id-134616 .hf-bark-benefit-grid.wp-block-columns,
  body.page-id-134616 .hf-bark-fit-grid.wp-block-columns,
  body.page-id-134616 .hf-bark-tip-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-id-134616 .hf-bark-hero-copy .wp-block-columns > .wp-block-column:has(figure) {
    display: none !important;
  }

  body.page-id-134616 .hf-bark-product-card .wc-block-grid__product-image,
  body.page-id-134616 .hf-bark-product-card .wc-block-components-product-image {
    min-height: 210px;
  }

  body.page-id-134616 .hf-bark-product-card img {
    max-height: 240px;
  }
}

body .hf-config-toolbar {
  display: flex;
  justify-content: flex-end;
  width: min(1200px, calc(100vw - 32px));
  margin: 0 auto 12px;
}

body .hf-config-reset,
body #app button.hf-config-change {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 34px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(150, 120, 78, 0.22) !important;
  border-radius: 8px !important;
  background: #ece4d5 !important;
  color: var(--hf-teal) !important;
  font-family: inherit;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: rgba(0, 70, 53, 0.10) 0 0 0 1px !important;
  cursor: pointer;
}

body .hf-config-reset:hover,
body #app button.hf-config-change:hover {
  border-color: var(--hf-teal) !important;
  background: #e1d6c2 !important;
  color: #005f49 !important;
  box-shadow: rgba(0, 70, 53, 0.13) 0 8px 18px !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) button.hf-config-change {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex !important;
  margin: 0 !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) {
  padding: clamp(22px, 3.4vw, 40px);
  border-color: rgba(0, 121, 92, 0.34);
  background: #fff;
  box-shadow:
    rgba(0, 70, 53, 0.10) 0 20px 54px,
    rgba(0, 70, 53, 0.08) 0 0 0 1px;
}

body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) .red,
body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) .previous,
body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) button:not(.hf-config-change),
body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) a.button {
  display: inline-flex !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) .red {
  display: block !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) ul.radiolist,
body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) ul.systems,
body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) ul.collartype {
  display: grid;
  width: min(100%, 980px);
  margin: 16px auto;
  gap: 12px;
}

body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) ul.systems,
body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) ul.collartype {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) ul.radiolist:not(.systems):not(.collartype) {
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
}

body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) li:not(:has(label.selected)) {
  display: block;
}

body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) label,
body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) label.selected,
body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) label.selected:has(img) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 14px;
  gap: 8px;
  font-size: 13px;
  text-align: center;
}

body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) label.selected img,
body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) label img {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  max-height: 104px;
  margin: 0 auto;
}

body.single-product .hiddenfence-product-configurator #app .q.complete.hf-config-editing:has(label.selected) label.selected div {
  font-size: 12px;
  text-align: center;
}

body #app .collarsetting.hf-colour-selected > .red {
  display: none !important;
}

body #app .collarsetting.hf-type-selected > .red {
  display: none !important;
}

a[href*="configure-hidden-fence-system"] .new {
  display: none !important;
}



body .hf-header .wp-block-shortcode.hf-header-cart-block {
  margin: 0;
}

body .hf-header .wp-block-shortcode.hf-header-cart-block p,
body .hf-header p:has(.hf-header-cart) {
  margin: 0;
}

body .hf-header .hf-header-cart-holder {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

body .hf-header .wp-block-shortcode.hf-header-cart-block a.hf-header-cart,
body .hf-header a.hf-header-cart {
  position: relative;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px !important;
  flex: 0 0 38px;
  padding: 0 !important;
  border: 1px solid rgba(150, 120, 78, 0.20) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--hf-teal) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: rgba(0, 70, 53, 0.10) 0 0 0 1px !important;
  overflow: visible;
  will-change: transform;
  transition:
    width 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

body .hf-header .wp-block-shortcode.hf-header-cart-block a.hf-header-cart:not(.is-empty),
body .hf-header a.hf-header-cart:not(.is-empty) {
  border-color: var(--hf-teal) !important;
  background: var(--hf-teal) !important;
  color: #ffffff !important;
  box-shadow:
    rgba(0, 70, 53, 0.18) 0 8px 18px -12px,
    rgba(0, 70, 53, 0.18) 0 0 0 1px !important;
}

body .hf-header .wp-block-shortcode.hf-header-cart-block a.hf-header-cart:hover,
body .hf-header a.hf-header-cart:hover,
body .hf-header .wp-block-shortcode.hf-header-cart-block a.hf-header-cart:focus-visible,
body .hf-header a.hf-header-cart:focus-visible {
  border-color: rgba(0, 121, 92, 0.36) !important;
  background: #f5f0ea !important;
  color: var(--hf-teal-hover) !important;
  box-shadow: rgba(0, 70, 53, 0.15) 0 8px 18px !important;
}

body .hf-header .wp-block-shortcode.hf-header-cart-block a.hf-header-cart:not(.is-empty):hover,
body .hf-header a.hf-header-cart:not(.is-empty):hover,
body .hf-header .wp-block-shortcode.hf-header-cart-block a.hf-header-cart:not(.is-empty):focus-visible,
body .hf-header a.hf-header-cart:not(.is-empty):focus-visible {
  border-color: var(--hf-teal-hover) !important;
  background: var(--hf-teal-hover) !important;
  color: #ffffff !important;
}

body .hf-header .wp-block-shortcode.hf-header-cart-block a.hf-header-cart:active,
body .hf-header a.hf-header-cart:active {
  transform: translateY(0) scale(0.98);
}

.hf-header-cart__icon,
.hf-header-cart__icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.hf-header-cart__count {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--hf-teal);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: rgba(0, 70, 53, 0.20) 0 4px 10px;
  transition:
    opacity 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.hf-header-cart:not(.is-empty) .hf-header-cart__count {
  background: #ffffff;
  color: var(--hf-teal);
  transform: scale(1);
}

.hf-header-cart.is-empty .hf-header-cart__count {
  opacity: 0;
  transform: scale(0.62);
}

.hf-header-cart__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.hf-header-cart.is-updating::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(150, 120, 78, 0.20);
  border-top-color: var(--hf-teal);
  border-radius: inherit;
  animation: hfCartSpin 620ms linear infinite;
}

.hf-header-cart:not(.is-empty).is-updating::after {
  border-color: rgba(255, 255, 255, 0.30);
  border-top-color: #ffffff;
}

.hf-header-cart--pulse {
  animation: hfCartPulse 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hfCartPulse {
  0% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes hfCartSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (min-width: 782px) {
  body .hf-header .wp-block-shortcode.hf-header-cart-block a.hf-header-cart:not(.is-empty),
  body .hf-header a.hf-header-cart:not(.is-empty) {
    width: auto;
    min-width: 0;
    flex-basis: auto;
    gap: 7px;
    padding-inline: 13px !important;
  }

  .hf-header-cart:not(.is-empty) .hf-header-cart__count {
    position: static;
    top: auto;
    right: auto;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border: 0;
    background: #ffffff;
    color: var(--hf-teal);
    box-shadow: none;
  }

  .hf-header-cart:not(.is-empty) .hf-header-cart__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    color: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
  }
}

@media (max-width: 700px) {
  .hf-header__inner > p:not(:has(.hf-header-cart)) {
    display: none;
  }

  .hf-header .wp-block-shortcode.hf-header-cart-block {
    display: block;
  }

  body .hf-header .hf-header-cart-holder {
    display: inline-flex;
  }
}

body .hf-config-toolbar,
body .hf-config-reset,
body #app button.hf-config-change,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) button.hf-config-change {
  display: none !important;
}

/* Keep completed product configurator steps editable instead of summarising them. */
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected)::after {
  content: none !important;
  display: none !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) ul.radiolist,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) ul.systems,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) ul.collartype {
  display: grid !important;
  width: 100% !important;
  margin: 14px 0 16px !important;
  gap: 9px !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) ul.radiolist:not(.systems):not(.collartype) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) ul.systems,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) ul.collartype {
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)) !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) .collarsetting ul.collartype {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) .collarsetting ul.radiolist:not(.collartype) {
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) li,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) li:not(:has(label.selected)) {
  display: flex !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected:has(img) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 50px !important;
  padding: 11px 9px !important;
  font-size: 14px !important;
  text-align: center !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) ul.systems label,
body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) ul.collartype label {
  min-height: 100% !important;
  padding: 14px !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected::after {
  top: 8px !important;
  right: 8px !important;
  transform: none !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected img {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 116px !important;
  margin: 0 0 10px !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) .collarsetting ul.collartype label.selected img {
  max-height: 74px !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected div {
  font-size: 12px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected strong {
  grid-column: auto !important;
  font-size: 13px !important;
}

body.single-product .hiddenfence-product-configurator #app .q.complete:has(label.selected) label.selected .price {
  grid-column: auto !important;
  margin-top: 8px !important;
  font-size: 13px !important;
}

/* Site footer (single clean layer, wcfix132). */
.hf-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(42px, 7vw, 92px);
  background:
    linear-gradient(160deg, rgba(5, 43, 34, 0.55) 0%, rgba(4, 51, 38, 0.45) 55%, rgba(2, 32, 26, 0.6) 100%),
    url("../../images/chardy.jpg") center 35% / cover no-repeat,
    #04332a;
  background-blend-mode: multiply, multiply, normal;
  color: #e5d9ca;
}

.hf-footer,
.hf-footer :where(div, p, li, a, span, small, strong, em, b, i, address, label, h1, h2, h3, h4, h5, h6) {
  color: #e5d9ca;
  font-size: 14px;
  line-height: 1.6;
}

.hf-footer a {
  color: #ece4d8;
  text-decoration: none;
  transition: color 160ms ease;
}

.hf-footer a:hover,
.hf-footer a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(191, 238, 218, 0.6);
  text-underline-offset: 3px;
}

.hf-footer__inner {
  box-sizing: border-box;
  display: grid;
  width: min(1200px, calc(100vw - 48px)) !important;
  max-width: 1200px !important;
  gap: 0;
  margin-inline: auto !important;
  padding: clamp(40px, 6vw, 64px) 0 clamp(28px, 4vw, 40px);
}

.hf-footer__inner * {
  box-sizing: border-box;
}

/* CTA band. */
.hf-footer__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(216, 238, 230, 0.14);
}

.hf-footer__cta-copy {
  max-width: 640px;
}

.hf-footer__eyebrow {
  margin: 0 0 6px;
  color: #8fc6b3;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hf-footer__cta h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.2;
}

.hf-footer__cta-copy p:last-child {
  margin: 0;
  color: #a9cfc2;
}

.hf-footer__cta-action {
  margin: 0;
}

/* Link grid. */
.hf-footer__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(150px, 1fr));
  gap: 36px clamp(28px, 4vw, 56px);
  align-items: start;
  padding: clamp(30px, 4.4vw, 44px) 0 clamp(34px, 5vw, 52px);
}

.hf-footer__brand {
  display: grid;
  justify-items: start;
  gap: 16px;
}

.hf-footer__logo {
  display: inline-flex;
  width: min(190px, 100%);
  margin: 0;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.22));
}

.hf-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.hf-footer__tagline {
  max-width: 300px;
  margin: 0;
  color: #a9cfc2;
}

.hf-footer__phone {
  margin: 0;
}

.hf-footer__col h2 {
  margin: 0 0 14px;
  color: #8fc6b3;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.hf-footer__col ul,
.hf-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hf-footer__col li {
  margin: 0 0 9px;
}

.hf-footer__col li:last-child {
  margin-bottom: 0;
}

/* Buttons: light variants so they read on the dark panel. */
body .hf-footer__button,
body .hf-footer .trackbuttons a {
  border-color: #f8f5f1 !important;
  background: #f8f5f1 !important;
  color: #053126 !important;
  box-shadow: none !important;
}

body .hf-footer__button:hover,
body .hf-footer__button:focus-visible,
body .hf-footer .trackbuttons a:hover,
body .hf-footer .trackbuttons a:focus-visible {
  border-color: #e2d6c4 !important;
  background: #e2d6c4 !important;
  color: #052820 !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2) !important;
}

body .hf-footer__button {
  min-height: 44px !important;
  padding: 12px 22px !important;
  font-size: 14px !important;
}

body .hf-footer .trackbuttons a {
  font-size: 13px !important;
}

/* Social icons. */
.hf-footer__social.wp-block-social-links {
  margin: 2px 0 0;
  padding: 0;
  gap: 8px;
}

.hf-footer__social .wp-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(216, 238, 230, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.hf-footer__social .wp-social-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

.hf-footer__social .wp-social-link:hover,
.hf-footer__social .wp-social-link:focus-within {
  border-color: rgba(232, 255, 245, 0.7);
  background: rgba(232, 255, 245, 0.16);
}

.hf-footer__social .wp-social-link svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Bottom bar. */
.hf-footer__bottom {
  display: grid;
  gap: 14px;
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid rgba(216, 238, 230, 0.14);
}

.hf-footer__bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
}

.hf-footer__copyright {
  margin: 0;
  color: #9dc3b6;
  font-size: 13px;
}

.hf-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 0;
}

.hf-footer__legal-links li {
  margin: 0;
  font-size: 13px;
}

.hf-footer__legal-links li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin: 0 12px;
  background: rgba(216, 238, 230, 0.3);
  vertical-align: -1px;
}

.hf-footer__legal-links a {
  color: #b9dcd0;
  font-size: 13px;
}

.hf-footer__payments {
  display: inline-flex;
  max-width: 200px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
}

.hf-footer__payments img {
  display: block;
  width: 100%;
  height: auto;
}

.hf-footer__trademarks {
  max-width: none;
  margin: 0;
  color: rgba(157, 195, 182, 0.75);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .hf-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hf-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .hf-footer__inner {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .hf-footer__cta {
    display: grid;
    justify-items: start;
  }

  .hf-footer__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hf-footer__bottom-row {
    display: grid;
    justify-items: start;
  }
}

/* Header megamenu with product photo cards (wcfix133). */
@media (min-width: 600px) {
  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
    position: relative;
  }

  /* Tall hover targets: top-level links span the header strip so the pointer never leaves the item on its way down to the panel. */
  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }

  /* Grace period: the open panel survives ~280ms of lost hover so diagonal pointer paths do not slam it shut. */
  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
    transition: opacity 120ms ease 140ms, visibility 0s linear 280ms !important;
  }

  /* Hover intent: a brief pause before opening so skimming across a neighbouring item does not steal the panel. */
  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-container {
    transition-delay: 130ms, 130ms !important;
  }

  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-container {
    transition-delay: 0s, 0s !important;
  }

  /* The panel anchors to the whole menu row, not the individual item. */
  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child {
    position: static !important;
  }

  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
    position: absolute !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    z-index: 40;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 12px;
    width: min(880px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 14px 0 0 !important;
    padding: 14px !important;
    overflow: visible;
    border: 1px solid rgba(150, 120, 78, 0.14) !important;
    border-radius: 14px;
    background: #ffffff !important;
    box-shadow:
      rgba(0, 70, 53, 0.10) 0 0 0 1px,
      rgba(0, 70, 53, 0.16) 0 24px 54px -22px;
  }

  /* Invisible bridge over the gap between the menu row and the panel so hover survives the crossing. */
  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
  }

  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    box-sizing: border-box;
    display: flex !important;
    width: 100%;
    height: 100%;
    flex-direction: column;
    gap: 8px;
    padding: 9px 9px 11px !important;
    border: 1px solid #ebe5dc;
    border-radius: 10px;
    background: #ffffff;
    color: var(--hf-ink);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.3;
    transition: border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
  }

  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    border-color: rgba(0, 121, 92, 0.45);
    color: var(--hf-teal);
    box-shadow: rgba(0, 70, 53, 0.14) 0 10px 22px -12px;
    transform: translateY(-1px);
  }

  /* Card thumbnail. Image, fit and padding come from per-item custom properties set below. */
  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: var(--hf-mm-pad, 4px);
    box-sizing: border-box;
    border-radius: 7px;
    background-color: #fff;
    background-image: var(--hf-mm-img, linear-gradient(150deg, #faf6ee, #f8f5f1));
    background-position: center;
    background-size: var(--hf-mm-size, contain);
    background-repeat: no-repeat;
    background-origin: content-box;
  }

  /* Dog Fence panel images. */
  .hf-header .wp-block-navigation__submenu-container a[href$="/configure-hidden-fence-system/"] {
    --hf-mm-img: url("../../images/design-your-hidden-dog-fence.jpg");
    --hf-mm-size: cover;
    --hf-mm-pad: 0;
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/design-your-hidden-cat-fence/"] {
    --hf-mm-img: url("/wp-content/uploads/2019/10/cat-fence-around-house.jpg");
    --hf-mm-size: cover;
    --hf-mm-pad: 0;
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/products/hidden-fence-systems/"] {
    --hf-mm-img: url("../../images/professional-installation-dogwatch-hidden-fence.jpg");
    --hf-mm-size: cover;
    --hf-mm-pad: 0;
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/products/dog-fence-diy-self-install/"],
  .hf-header .wp-block-navigation__submenu-container a[href$="/product-category/diy-dogwatch-hidden-fences/"] {
    --hf-mm-img: url("../../images/1200fmd-premium-newbox.jpg");
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/hidden-fence-works/"] {
    --hf-mm-img: url("../../images/howitworks.jpg");
    --hf-mm-size: cover;
    --hf-mm-pad: 0;
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/products/indoor-wireless-dog-cat-fence/"],
  .hf-header .wp-block-navigation__submenu-container a[href$="/product-category/hidden-fence-indoor-products/"] {
    --hf-mm-img: url("/wp-content/uploads/2021/03/MB-2.jpg");
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/hidden-fence-dog-fence-wire-cable/"] {
    --hf-mm-img: url("/wp-content/uploads/2022/03/Asset_5hidden-fence-wire-cable3333-removebg-preview.png");
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/services/"] {
    --hf-mm-img: url("../../images/professional-installation-and-training.jpg");
    --hf-mm-size: cover;
    --hf-mm-pad: 0;
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/replacement-batteries/"],
  .hf-header .wp-block-navigation__submenu-container a[href$="/product-category/batteries/"] {
    --hf-mm-img: url("../../images/hidden-fence-dog-collar-battery-cr1-3n.jpg");
  }

  /* Cat Fence panel images. */
  .hf-header .wp-block-navigation__submenu-container a[href$="/cat-fence-diy-self-install/"],
  .hf-header .wp-block-navigation__submenu-container a[href$="/product-category/diy-catwatch-hidden-fence/"] {
    --hf-mm-img: url("/wp-content/uploads/2019/10/catbox.jpg");
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/products/indoor-wireless-cat-fence/"] {
    --hf-mm-img: url("/wp-content/uploads/2020/08/cat-indoor-system.jpg");
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/cat-fence-installation-and-training/"] {
    --hf-mm-img: url("../../images/cat-free-areas.jpg");
    --hf-mm-size: cover;
    --hf-mm-pad: 0;
  }

  /* Training Collars panel images. */
  .hf-header .wp-block-navigation__submenu-container a[href$="/bark-collars/"] {
    --hf-mm-img: url("/wp-content/uploads/2016/08/dwtp-barkcollar-2x.jpg");
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/bigleash-remote-trainers/"],
  .hf-header .wp-block-navigation__submenu-container a[href$="/product-category/training-products/"] {
    --hf-mm-img: url("/wp-content/uploads/2016/07/bigleash-s15-remote-trainer.jpg");
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/product/sidewalker/"] {
    --hf-mm-img: url("/wp-content/uploads/2016/08/dwtp-sidewalker-2x-430x325.jpg");
  }

  /* Shop panel images. */
  .hf-header .wp-block-navigation__submenu-container a[href$="/shop/"] {
    --hf-mm-img: url("../../images/dogwatch-hidden-fence-diy-dog-fence-kit.jpg");
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/product-category/featured-products/"] {
    --hf-mm-img: url("/wp-content/uploads/2019/01/smartfence-newbox-square.jpg");
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/product-category/dog-fence-receiver-collars/"] {
    --hf-mm-img: url("/wp-content/uploads/2026/07/dogwatch-r9-receiver-collar-blue.jpg");
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/product-category/cat-fence-receiver-collars/"] {
    --hf-mm-img: url("/wp-content/uploads/2020/04/cat-r12m-blue.jpg");
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/product-category/hidden-fence-wire-cable/"] {
    --hf-mm-img: url("../../images/hidden-fence-boundary-wire-cable-spool.jpg");
  }

  .hf-header .wp-block-navigation__submenu-container a[href$="/product-category/hidden-fence-accessories/"] {
    --hf-mm-img: url("../../images/hidden-fence-power-supply-24v-transformer.jpg");
  }

  /* About: compact text panel, no photo cards. */
  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child:has(> .wp-block-navigation-item__content[href$="/about-us/"]) > .wp-block-navigation__submenu-container {
    grid-template-columns: 1fr;
    gap: 2px;
    width: 250px !important;
    padding: 8px !important;
  }

  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child:has(> .wp-block-navigation-item__content[href$="/about-us/"]) > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    flex-direction: row;
    padding: 9px 11px !important;
    border: 0;
    font-size: 13px;
  }

  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child:has(> .wp-block-navigation-item__content[href$="/about-us/"]) > .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
    display: none;
  }

  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child:has(> .wp-block-navigation-item__content[href$="/about-us/"]) > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: #f5f0ea;
    box-shadow: none;
    transform: none;
  }
}

/* Site-wide consistency layer (wcfix134). */

/* Embeds and media can never force horizontal scroll. */
main iframe,
main embed,
main object,
main video {
  max-width: 100% !important;
}

main iframe[src*="youtube.com"],
main iframe[src*="youtu.be"],
main iframe[src*="vimeo.com"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

main .wp-embedded-content {
  max-width: 100% !important;
}

/* The home hero background video must oversize its container to cover it. */
main .hf-home-video-fallback iframe {
  max-width: none !important;
  width: max(100vw, 178vh);
  height: max(56.25vw, 100vh);
  aspect-ratio: auto;
}

main img {
  max-width: 100%;
  height: auto;
}

/* Root padding = whatever centers the 1200px content shell, never less than 16px.
   The parent theme uses 8vw, which contradicts the 16px gutter every hf-* shell
   assumes and caused horizontal overflow between ~620px and ~1400px. */
:root,
body {
  --wp--style--root--padding-left: max(16px, calc((100vw - 1200px) / 2)) !important;
  --wp--style--root--padding-right: max(16px, calc((100vw - 1200px) / 2)) !important;
}

@media (max-width: 620px) {
  body.page-id-139295 .hf-battery-warning .wp-block-column,
  body.page-id-139295 .hf-battery-howto .wp-block-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

body.page-id-139295 .entry-content {
  overflow-x: clip;
}

body.page-id-139295 .entry-content .wp-block-column {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Header responsiveness: one tidy row at every width (wcfix134). */
@media (max-width: 1339px) {
  .hf-header .hf-logo img {
    width: 180px !important;
  }

  .hf-header .wp-block-navigation a {
    font-size: 12.5px;
  }

  .hf-header__inner {
    min-height: 64px;
  }
}

/* Mid-size screens: the full menu cannot fit, so use the overlay (hamburger) menu
   that core only enables below 600px. */
@media (min-width: 600px) and (max-width: 1199px) {
  .hf-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .hf-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }

  .hf-header .wp-block-navigation {
    order: 10;
  }

  .hf-header__inner {
    flex-wrap: nowrap !important;
    gap: 12px;
  }
}

/* Overlay menu: left-align the items (the desktop right-justification carries in otherwise). */
.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-start !important;
}

.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  justify-content: flex-start !important;
  text-align: left;
}

.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  align-items: flex-start !important;
}

.hf-header .is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start !important;
}

.hf-header .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container,
.hf-header .is-menu-open .wp-block-navigation-item,
.hf-header .is-menu-open .wp-block-navigation__submenu-container {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* ===== Professional polish layer (wcfix135) ===== */

/* Crisper text rendering everywhere. */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

::selection {
  background: rgba(150, 120, 78, 0.18);
}

/* Headline presence: tighter tracking, no orphans. */
main h1,
main h2,
main h3,
.wp-block-post-title,
.hf-page-hero h1 {
  letter-spacing: -0.015em;
  text-wrap: balance;
}

main .entry-content p {
  text-wrap: pretty;
}

/* Prices and counts in tabular figures. */
.woocommerce .price,
.wc-block-components-product-price,
.hf-header-cart__count,
.woocommerce-Price-amount {
  font-variant-numeric: tabular-nums;
}

/* Buttons: calmer weight reads premium; keep the existing colors and motion. */
body a.button,
body button.button,
body input.button,
body input[type="submit"],
body .wp-block-button__link,
body .wp-element-button,
body .wp-block-file__button,
body .wp-block-search__button,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body .woocommerce button.single_add_to_cart_button,
body .wc-block-components-button,
body .trackbuttons a,
body .hf-footer__button,
body .hf-header .wp-block-shortcode a,
body #app button,
body #app .button,
body #app a.button {
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

/* Header: subtle glass surface + a marker for the current page.
   The blur lives on a ::before layer: backdrop-filter on the header itself
   would become the containing block for the fixed mobile overlay menu and
   trap it inside the header bar. */
.hf-header {
  background: transparent;
}

.hf-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
}

/* Black top bar: only the bar's own furniture goes white. The dropdown and
   mega-menu panels keep their light surfaces, so every link inside a submenu
   container — and inside the mobile overlay — is reset to its original
   colours right below. */
/* The block theme sets `.wp-block-navigation-item__content.wp-block-navigation-item__content
   { color: inherit }` (0,3,0 — the doubled class), which outranks any plain
   descendant selector here. So colour the top-level list ITEM and let the link
   inherit it, rather than escalating specificity on the link itself. */
.hf-header .wp-block-navigation__container > .wp-block-navigation-item {
  color: #fff;
}

.hf-header .wp-block-navigation a,
.hf-header .wp-block-navigation__responsive-container-open {
  color: #fff;
}

/* Empty cart: was a white disc with a teal glyph, which reads as a blob on
   black — flip it to an outline button. The has-items state keeps its teal
   fill, which still works on the dark bar. Base rules use !important. */
body .hf-header .wp-block-shortcode.hf-header-cart-block a.hf-header-cart.is-empty,
body .hf-header a.hf-header-cart.is-empty {
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
  color: #fff !important;
}

body .hf-header .wp-block-shortcode.hf-header-cart-block a.hf-header-cart.is-empty:hover,
body .hf-header a.hf-header-cart.is-empty:hover,
body .hf-header a.hf-header-cart.is-empty:focus-visible {
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

.hf-header .wp-block-navigation a:hover {
  color: #fff;
  opacity: 0.72;
}

body .hf-header a.hf-header-cart.is-empty {
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Dropdowns + mega menu: unchanged from before. */
.hf-header .wp-block-navigation .wp-block-navigation__submenu-container a {
  color: var(--hf-ink);
  opacity: 1;
}

.hf-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
  color: var(--hf-teal);
  opacity: 1;
}

/* Mobile overlay menu keeps its light panel too. */
.hf-header .wp-block-navigation__responsive-container.is-menu-open a {
  color: var(--hf-ink);
  opacity: 1;
}

.hf-header .wp-block-navigation__responsive-container.is-menu-open a:hover {
  color: var(--hf-teal);
}

/* Logo: the new mark is landscape, so cap its height to keep the bar's
   proportions rather than letting the inline width drive it. */
.hf-header .hf-logo img {
  width: auto !important;
  height: clamp(42px, 4.4vw, 56px);
}

@media (min-width: 1200px) {
  .hf-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    position: relative;
  }

  .hf-header .wp-block-navigation__container > :is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > .wp-block-navigation-item__content {
    color: #fff; /* teal has too little contrast on the black bar */
  }

  .hf-header .wp-block-navigation__container > :is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 17px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: #fff;
  }
}

/* Cards: softer borders, tinted layered shadows instead of flat rings. */
.hf-contact-card,
.hf-home-card,
.hf-market-card,
.hf-testimonial-card,
.hf-home-faq__item {
  border-color: rgba(0, 90, 70, 0.10);
  box-shadow:
    rgba(0, 70, 53, 0.04) 0 1px 2px,
    rgba(0, 70, 53, 0.07) 0 14px 34px -22px;
}

/* Product grid cards: gentle lift on hover. */
body.woocommerce ul.products li.product,
.wc-block-grid__product {
  transition: transform 220ms ease, box-shadow 220ms ease;
}

body.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
  transform: translateY(-3px);
  box-shadow:
    rgba(0, 70, 53, 0.06) 0 2px 6px,
    rgba(0, 70, 53, 0.12) 0 22px 44px -22px;
}

/* Content links: refined underline behaviour. */
main .entry-content p a:not(.button):not(.wp-block-button__link):not(.wp-element-button) {
  color: var(--hf-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 121, 92, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms ease, color 160ms ease;
}

main .entry-content p a:not(.button):not(.wp-block-button__link):not(.wp-element-button):hover {
  color: var(--hf-teal-hover);
  text-decoration-color: currentColor;
}

/* Content imagery: consistent soft radius. */
main .entry-content figure.wp-block-image img,
main .entry-content .wp-block-gallery img {
  border-radius: 10px;
}

/* Separators. */
main .entry-content hr {
  height: 1px;
  margin: clamp(28px, 4vw, 44px) auto;
  border: 0;
  background: var(--hf-line);
}

/* Form fields: one consistent, quietly confident treatment. */
main input[type="text"],
main input[type="email"],
main input[type="tel"],
main input[type="number"],
main input[type="url"],
main textarea,
main select {
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #dcd2bf;
  border-radius: 8px;
  background: #fff;
  color: var(--hf-ink);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

main input[type="text"]:focus,
main input[type="email"]:focus,
main input[type="tel"]:focus,
main input[type="number"]:focus,
main input[type="url"]:focus,
main textarea:focus,
main select:focus {
  border-color: var(--hf-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(150, 120, 78, 0.16);
}

main ::placeholder {
  color: #9baaa4;
}

/* ===== Cinematic layer (wcfix136) ===== */

/* --- Scroll reveals (activated by hiddenfence-motion.js, off for reduced-motion). --- */
html.hf-motion .hf-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 760ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.hf-motion .hf-reveal.hf-inview {
  opacity: 1;
  transform: none;
}

@media (max-width: 620px) {
  html.hf-motion .hf-reveal {
    transform: translateY(16px);
  }
}

/* --- Header: shrinks and deepens once the page scrolls. --- */
.hf-header .hf-header__inner {
  transition: min-height 260ms ease;
}

.hf-header .hf-logo img {
  transition: transform 260ms ease;
  transform-origin: left center;
}

/* The scrolled state used to swap in a white surface; the bar is black at
   every scroll position now, so it only keeps its lift shadow. */
.hf-header.is-scrolled::before {
  background: #000;
}

.hf-header.is-scrolled {
  box-shadow:
    rgba(0, 0, 0, 0.28) 0 1px 0,
    rgba(0, 0, 0, 0.34) 0 12px 32px -18px;
}

@media (min-width: 1200px) {
  .hf-header.is-scrolled .hf-header__inner {
    min-height: 60px;
  }

  .hf-header.is-scrolled .hf-logo img {
    transform: scale(0.86);
  }

  /* Nav underline: grows on hover, stays for the current page. */
  .hf-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 17px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--hf-teal);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .hf-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
  .hf-header .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content::after,
  .hf-header .wp-block-navigation__container > :is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > .wp-block-navigation-item__content::after {
    transform: scaleX(1);
  }
}

/* --- Grain: a whisper of film texture over everything. --- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* --- Home hero: display typography, cinematic scrim, living video. --- */
body.home main .wp-block-nk-awb h1 {
  max-width: 1000px;
  font-size: clamp(38px, 4.6vw, 64px) !important;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Phones: the 34px floor above ran the headline to six lines and pushed the
   buttons below the fold. Same selector as the winning rule (L2162) so this
   later block takes over inside the breakpoint. */
@media (max-width: 620px) {
  body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-shot__title {
    font-size: clamp(18px, 5.4vw, 24px) !important;
    line-height: 1.2;
  }
}

/* Phones: instead of hiding the video behind the copy, the hero splits —
   the video becomes a full-width 16:9 band up top (an exact fit, the clips
   are 16:9) and the headline/buttons/trust strip flow below it on the brand
   green. The scrims exist only for text-over-video contrast, so they're off
   here, and the poster moves from the section to the band. */
@media (max-width: 620px) {
  body.home.page-id-35241 .entry-content > .wp-block-nk-awb {
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
    padding: 0 !important; /* global styles pad the section 20px 30px — the
       band must run edge to edge; the content keeps its own side insets */
    background: #00795c;
  }

  body.home.page-id-35241 .entry-content > .wp-block-nk-awb > .nk-awb-wrap {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    background:
      url("https://i.vimeocdn.com/video/2185002205-13380f4a43ea46cef5f86b36e250e21f9fffc601b8f554df0fd7f046334cd0d7-d?f=webp&region=us") center / cover no-repeat,
      #00795c !important;
  }

  body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-video-fallback iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    animation: none; /* the Ken Burns drift would crop the exact 16:9 fit */
  }

  body.home.page-id-35241 .entry-content > .wp-block-nk-awb::after,
  body.home.page-id-35241 .hf-home-video-ready::after {
    display: none;
  }

  body.home.page-id-35241 .entry-content > .wp-block-nk-awb > .nk-awb-wrap-content {
    min-height: 0;
    padding: 30px 0 26px;
    /* the 2-up left-aligned desktop composition doesn't suit a phone —
       centre the copy and stack the buttons full width again */
    align-items: center;
    text-align: center;
  }

  body.home.page-id-35241 .entry-content > .wp-block-nk-awb .hf-home-shot__title,
  body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-buttons {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Tighter stack: the block-gap default leaves too much air between the
     full-width hero buttons on phones. */
  body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-buttons {
    grid-template-columns: 1fr;
    gap: 10px !important;
  }
}

/* Mobile menu toggle: three bars instead of core's two. The stock SVG is
   inline in the markup, so it's hidden and the bars are drawn in
   currentColor via layered gradients. */
.hf-header .wp-block-navigation__responsive-container-open svg {
  display: none;
}

.hf-header .wp-block-navigation__responsive-container-open::before {
  content: "";
  display: block;
  width: 22px;
  height: 16px;
  background:
    linear-gradient(currentColor, currentColor) center 0 / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center 50% / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center 100% / 100% 2px no-repeat;
}

/* Cinematic scrim removed — the video is shown unmodified. */
.hf-home-video-ready::after {
  content: none;
  background: none;
}

.wp-block-nk-awb > .nk-awb-wrap-content {
  position: relative;
  z-index: 2;
  will-change: transform, opacity;
}

html.hf-motion .hf-home-video-fallback iframe {
  animation: hfKenBurns 38s ease-in-out infinite alternate;
}

@keyframes hfKenBurns {
  from {
    transform: translate(-50%, -50%) scale(1.02);
  }

  to {
    transform: translate(-50%, -48.6%) scale(1.11);
  }
}

/* --- Page heroes: stronger presence, deeper grade. --- */
.hf-page-hero h1 {
  font-size: clamp(32px, 4vw, 54px);
  letter-spacing: -0.02em;
}

.hf-page-hero__inner {
  will-change: transform, opacity;
}

/* --- Boundary-wire motif: the brand metaphor as a dashed accent. --- */
.hf-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(125, 222, 189, 0.85) 0 16px, transparent 16px 30px);
  opacity: 0.55;
}

/* --- Layered landscape contours behind the home product showcase. --- */
.hf-home-showcase {
  background-image:
    url("../../images/contours.svg"),
    linear-gradient(180deg, #faf6ee 0%, #fdfaf5 24%, #ffffff 50%, #fdfaf5 76%, #faf6ee 100%);
  background-position: right -160px top -140px, 0 0;
  background-size: 1150px auto, auto;
  background-repeat: no-repeat, no-repeat;
}

/* --- Polished interactions. --- */
.hf-footer a,
.hf-header .wp-block-navigation a {
  transition: color 180ms ease;
}

main .entry-content figure.wp-block-image img {
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 400ms ease;
}

@media (hover: hover) {
  main .entry-content figure.wp-block-image a:hover img {
    transform: translateY(-3px) scale(1.012);
    box-shadow: rgba(0, 70, 53, 0.16) 0 22px 44px -22px;
  }
}

/* Sticky header, done at the right level: the .hf-header sticky never worked
   because its template-part wrapper is exactly its own height. Stick the
   wrapper instead. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 30;
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part {
  top: 32px;
}

.hf-header {
  position: relative;
  top: auto;
}

/* Mobile overlay menu: submenus collapse behind their parent (hiddenfence-mobile-nav.js). */
.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
  display: none !important;
}

.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.hf-sub-open > .wp-block-navigation__submenu-container {
  display: flex !important;
  animation: hfSubIn 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hfSubIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Parent rows read as toggles: plus that becomes a minus. */
.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor 0 0) center / 12px 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 2px 12px no-repeat;
  opacity: 0.65;
  transition: transform 220ms ease;
}

.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.hf-sub-open > .wp-block-navigation-item__content::after {
  transform: rotate(45deg);
}

/* Hide the redundant WP chevron buttons inside the overlay. */
.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > button.wp-block-navigation-submenu__toggle,
.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
  display: none !important;
}

/* Mobile overlay menu: comfortable, thumb-friendly type and spacing. */
.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  padding: 10px 0 !important;
  font-size: 19px !important;
  font-weight: 700;
  line-height: 1.3;
}

.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 7px 0 !important;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.4;
}

.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 6px;
}

.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  gap: 2px;
  padding: 2px 0 10px 16px !important;
  border-left: 2px solid rgba(150, 120, 78, 0.18);
  margin-left: 2px;
}

/* Slightly larger toggle glyph to match the bigger labels. */
.hf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor 0 0) center / 14px 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 2px 14px no-repeat;
}

/* Mobile cart: when filled, grow into a small pill with the count inline —
   the old corner badge clipped against the white header and looked broken. */
@media (max-width: 781px) {
  body .hf-header .wp-block-shortcode.hf-header-cart-block a.hf-header-cart:not(.is-empty),
  body .hf-header a.hf-header-cart:not(.is-empty) {
    width: auto;
    min-width: 0;
    flex-basis: auto;
    gap: 6px;
    padding-inline: 11px !important;
  }

  .hf-header-cart:not(.is-empty) .hf-header-cart__count {
    position: static;
    top: auto;
    right: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 0;
    background: #ffffff;
    color: var(--hf-teal);
    font-size: 11px;
    box-shadow: none;
  }
}

/* Configurator Step 3 on mobile: the desktop two-column collar grid outranked
   the mobile single-column rule, crushing each row-style card into a half-width
   cell (titles rendered one letter per line). One card per row on phones. */
@media (max-width: 700px) {
  body.single-product .hiddenfence-product-configurator #app .collarsetting ul.collartype {
    grid-template-columns: 1fr;
  }
}

/* Hero trust strip: review-photo marquee (hiddenfence-trust-strip.js). */
.hf-trust {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: clamp(30px, 5vh, 56px) auto 0;
  text-align: center;
  text-decoration: none !important;
}

.hf-trust__label {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: rgba(0, 45, 34, 0.4) 0 1px 12px;
}

.hf-trust__marquee {
  display: block;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.hf-trust__track {
  display: inline-flex;
  gap: 9px; /* tracks the smaller photo size */
  padding: 4px 0;
  white-space: nowrap;
  animation: hfTrustScroll 26s linear infinite;
  will-change: transform;
}

.hf-trust:hover .hf-trust__track {
  animation-play-state: paused;
}

@keyframes hfTrustScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 6px));
  }
}

.hf-trust__photo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  object-fit: cover;
  box-shadow: rgba(0, 30, 22, 0.35) 0 4px 12px;
}

.hf-trust__photo--dog5 {
  object-position: center 100%;
}

@media (prefers-reduced-motion: reduce) {
  .hf-trust__track {
    animation: none;
  }
}

@media (max-width: 620px) {
  .hf-trust {
    max-width: 100%;
  }

  .hf-trust__photo {
    width: 38px;
    height: 38px;
  }
}

/* === HF Configurator v2 (wcfix136) — match & exceed the getquickest reference === */

:root {
  --hf-card-shadow: 0 1px 2px rgba(0, 70, 53, 0.05), 0 10px 30px rgba(0, 70, 53, 0.06);
  --hf-card-shadow-active: 0 2px 4px rgba(0, 70, 53, 0.06), 0 18px 44px rgba(0, 70, 53, 0.10);
  --hf-ring: rgba(150, 120, 78, 0.22);
}

/* Intro lede. */
body #app .hf-cfg-lede {
  margin: 0 auto 6px;
  color: var(--hf-teal);
  font-size: 19px;
  font-weight: 700;
  text-align: center;
}

body #app .hf-cfg-help {
  margin: 0 auto 36px;
  color: var(--hf-eucalyptus);
  text-align: center;
}

/* Step panel hierarchy: current step glows, completed steps recede. */
body #app .q {
  border: 1px solid var(--hf-line);
  box-shadow: var(--hf-card-shadow);
  margin-bottom: 30px;
  border-radius: 12px;
  background: #fff;
}

body #app .q::before {
  content: none;
}

body #app .q:not(.complete) {
  border-color: var(--hf-teal);
  box-shadow: var(--hf-card-shadow-active), 0 0 0 1px var(--hf-ring);
}

body #app .q.complete h3 {
  color: var(--hf-eucalyptus);
}

/* Step numbering eyebrow — pure CSS counter, self-corrects with v-if. */
body #app {
  counter-reset: hfstep;
}

body #app .q {
  counter-increment: hfstep;
}

body #app .q > h3:first-of-type::before,
body #app .q > h2:first-of-type::before {
  content: "Step " counter(hfstep);
  display: block;
  margin-bottom: 6px;
  color: var(--hf-eucalyptus);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body #app #features h3::before,
body #app #step8 h2::before {
  content: none;
}

/* Selected card: real animated checkmark. */
body #app ul.radiolist label.selected::after {
  content: "\2713";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  top: 8px;
  right: 8px;
  border-radius: 999px;
  background: var(--hf-teal);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 70, 53, 0.25);
  animation: hf-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hf-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

body #app .q h3 .fa-check-circle,
body #app .q h2 .fa-check-circle {
  color: var(--hf-teal) !important;
}

/* "Please select" reads as quiet instruction, not an error. */
body #app .red {
  border-color: var(--hf-line);
  background: var(--hf-sage);
  color: var(--hf-eucalyptus);
  font-weight: 600;
}

body #app .red.is-error {
  border-color: rgba(194, 82, 36, 0.4);
  background: #fff7f0;
  color: #9a4a12;
  font-weight: 650;
}

/* NEXT buttons at reference scale, with the bold/regular split. */
body #app button.button {
  --hf-button-height: 50px;
  --hf-button-radius: 10px;
  --hf-button-font-size: 15px;
  --hf-button-padding: 12px 26px;
  font-weight: 400 !important;
}

body #app button.button strong {
  font-weight: 700;
}

body #app button.button:disabled {
  cursor: not-allowed;
}

/* Dog name inputs. */
body #app #step4 input[type="text"] {
  width: min(100%, 360px);
  height: 44px;
  padding-inline: 14px;
  border-radius: 8px;
  text-align: left;
}

body #app #step4 input[type="text"]::placeholder {
  color: #9aa7a2;
}

/* Receipt-grade summary table. */
body #app .productitems td:first-child {
  width: 76px;
}

body #app .productitems td:first-child img {
  width: 56px;
  height: 56px;
  padding: 4px;
  border-radius: 8px;
  background: var(--hf-sage);
  object-fit: contain;
}

body #app .productitems tr:last-child td {
  background: var(--hf-sage);
}

body #app .productitems tr:last-child td:last-child strong {
  color: var(--hf-teal);
  font-size: 20px;
  white-space: nowrap;
}

/* DIY vs Installed split cards. */
body #app #step7 .fullmobile > div {
  border: 1px solid var(--hf-line);
  border-radius: 10px;
  padding: 22px;
}

body #app #step7 .fullmobile h1 {
  margin: 0 0 6px;
  font-size: 24px;
}

body #app #step7 .fullmobile h2 {
  margin: 0 0 14px;
  font-size: 22px;
}

body #app #step7 hr.mobile {
  display: none;
}

/* Boundary guide chart. */
body #app #boundarylength table {
  margin: 0 auto;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--hf-line);
}

body #app #boundarylength table td {
  padding: 7px 16px;
  border-bottom: 1px solid var(--hf-line);
}

body #app #boundarylength table tr:nth-child(even) td {
  background: var(--hf-sage);
}

/* 360 viewer stage. */
body #app #step5 .left {
  background: var(--hf-sage);
  border-radius: 10px;
  padding: 16px;
}

/* Entrance choreography. */
body #app ul.radiolist li {
  animation: hf-rise 0.35s ease both;
}

body #app ul.radiolist li:nth-child(2) { animation-delay: 0.05s; }
body #app ul.radiolist li:nth-child(3) { animation-delay: 0.1s; }
body #app ul.radiolist li:nth-child(4) { animation-delay: 0.15s; }
body #app ul.radiolist li:nth-child(5) { animation-delay: 0.2s; }
body #app ul.radiolist li:nth-child(6) { animation-delay: 0.25s; }

@keyframes hf-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body #app ul.radiolist li,
  body #app ul.radiolist label.selected::after {
    animation: none;
  }

  body #app .fade-enter-active,
  body #app .fade-leave-active {
    transition: none;
  }
}

@media (max-width: 700px) {
  body #app .productitems td:first-child {
    display: none;
  }

  body #app .productitems td {
    padding: 10px 8px;
    font-size: 13px;
  }
}

/* Boundary mapping tool (hiddenfence-boundary-map.js). */
body #app .hf-bmap {
  margin: 6px auto 26px;
  max-width: 860px;
  text-align: left;
}

body #app .hf-bmap__intro {
  margin-bottom: 12px;
  color: var(--hf-eucalyptus);
  font-size: 14px;
}

body #app .hf-bmap__intro strong {
  color: var(--hf-ink);
}

body #app .hf-bmap__bar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

body #app .hf-bmap__search {
  flex: 1 1 auto;
  height: 44px;
  padding-inline: 14px;
  border: 1px solid var(--hf-line);
  border-radius: 8px;
  font-size: 15px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

body #app .hf-bmap__search:focus {
  border-color: var(--hf-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(150, 120, 78, 0.16);
}

body #app .hf-bmap__search--miss {
  border-color: #c2410c;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.18);
}

body #app .hf-bmap__go {
  flex: 0 0 auto;
  min-width: 84px;
  border: 0;
  border-radius: 8px;
  background: var(--hf-teal);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 160ms ease;
}

body #app .hf-bmap__go:hover {
  background: var(--hf-teal-hover);
}

body #app .hf-bmap__canvas {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hf-line);
  box-shadow: var(--hf-card-shadow);
  cursor: crosshair;
}

body #app .hf-bmap__hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

body #app .hf-bmap__readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

body #app .hf-bmap__len {
  color: var(--hf-teal);
  font-size: 26px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

body #app .hf-bmap__sub {
  color: var(--hf-eucalyptus);
  font-size: 13px;
}

body #app .hf-bmap__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body #app .hf-bmap__actions button {
  height: 40px;
  padding-inline: 14px;
  border: 1px solid var(--hf-line);
  border-radius: 8px;
  background: #fff;
  color: var(--hf-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

body #app .hf-bmap__actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body #app .hf-bmap__actions .hf-bmap__use {
  border-color: var(--hf-teal);
  background: var(--hf-teal);
  color: #fff;
}

body #app .hf-bmap__actions .hf-bmap__use:not(:disabled):hover {
  background: var(--hf-teal-hover);
}

body #app .hf-bmap__note {
  margin: 0 0 10px;
  color: var(--hf-eucalyptus);
  font-size: 13px;
}

@media (max-width: 620px) {
  body #app .hf-bmap__hud {
    flex-direction: column;
    align-items: stretch;
  }

  body #app .hf-bmap__actions button {
    flex: 1 1 auto;
  }
}

/* Boundary assistant: layout chooser + tutorial example + map/manual toggle. */
body #app #step6 > p:has(img[src*="hidden-dog-fence-layout"]) {
  display: none;
}

body #app .hf-blay__q {
  margin: 0 0 14px;
  color: var(--hf-ink);
  font-size: 17px;
  text-align: left;
}

body #app .hf-blay__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

body #app .hf-blay__card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--hf-line);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body #app .hf-blay__card:hover {
  border-color: rgba(0, 121, 92, 0.45);
  box-shadow: var(--hf-card-shadow-active);
  transform: translateY(-2px);
}

body #app .hf-blay__card strong {
  color: var(--hf-ink);
  font-size: 16px;
  line-height: 1.25;
}

body #app .hf-blay__card span {
  color: var(--hf-eucalyptus);
  font-size: 13px;
  line-height: 1.5;
}

body #app .hf-blay__card em {
  margin-top: 2px;
  color: var(--hf-teal);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* View switching. */
body #app .hf-blay[data-view="choose"] .hf-blay__detail {
  display: none;
}

body #app .hf-blay[data-view="detail"] .hf-blay__choose {
  display: none;
}

body #app .hf-blay__detail {
  margin-bottom: 22px;
  text-align: left;
}

body #app .hf-blay__back {
  margin-bottom: 12px;
  padding: 7px 14px;
  border: 1px solid var(--hf-line);
  border-radius: 999px;
  background: #fff;
  color: var(--hf-teal);
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

body #app .hf-blay__back:hover {
  border-color: rgba(0, 121, 92, 0.4);
  background: var(--hf-sage);
}

body #app .hf-blay__tut {
  margin-bottom: 12px;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--hf-sage);
  color: var(--hf-eucalyptus);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
}

body #app .hf-blay__title {
  display: block;
  color: var(--hf-ink);
  font-size: 16px;
}

body #app .hf-blay__desc {
  margin: 2px 0 12px;
  color: var(--hf-eucalyptus);
  font-size: 13.5px;
  text-align: left;
}

body #app .hf-blay__img {
  display: block;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  border-radius: 12px;
}

body #app .hf-blay__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 12px 0 16px;
}

body #app .hf-blay__legend span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--hf-ink);
  font-size: 13px;
  font-weight: 650;
}

body #app .hf-blay__cta {
  display: block;
  width: min(100%, 660px);
  margin: 0 auto;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--hf-teal);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

body #app .hf-blay__cta:hover {
  background: var(--hf-teal-hover);
  transform: translateY(-1px);
}

/* Map / manual segmented toggle. */
body #app .hf-bmap__toggle {
  display: flex;
  width: min(100%, 480px);
  margin: 0 auto 16px;
  padding: 4px;
  border: 1px solid var(--hf-line);
  border-radius: 10px;
  background: #f0ede9;
}

body #app .hf-bmap__mode {
  flex: 1 1 50%;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--hf-eucalyptus);
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

body #app .hf-bmap__mode.is-active {
  background: #fff;
  color: var(--hf-ink);
  box-shadow: rgba(0, 70, 53, 0.12) 0 1px 4px;
}

/* Mode visibility: hide the manual fields while mapping, and vice versa. */
body #app .hf-bmap--map ~ .red,
body #app .hf-bmap--map ~ p:has(input[type="number"]),
body #app .hf-bmap--map ~ p:has(> a) {
  display: none;
}

body #app .hf-bmap--manual .hf-bmap__mapwrap {
  display: none;
}

@media (max-width: 620px) {
  body #app .hf-blay__grid {
    grid-template-columns: 1fr;
  }
}

/* The global "body #app button" stack paints every button teal with !important.
   Counter it for the boundary assistant's chrome buttons. */
body #app .hf-blay__card {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start !important;
  min-height: 0 !important;
  padding: 18px !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--hf-eucalyptus) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left;
  box-shadow: var(--hf-card-shadow) !important;
}

body #app .hf-blay__card:hover {
  border-color: rgba(0, 121, 92, 0.45) !important;
  background: #fff !important;
  color: var(--hf-eucalyptus) !important;
  box-shadow: var(--hf-card-shadow-active) !important;
}

body #app .hf-blay__card strong {
  color: var(--hf-ink);
  font-size: 16px;
}

body #app .hf-blay__back {
  min-height: 0 !important;
  padding: 7px 14px !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--hf-teal) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

body #app .hf-blay__back:hover {
  border-color: rgba(0, 121, 92, 0.4) !important;
  background: var(--hf-sage) !important;
  color: var(--hf-teal) !important;
}

body #app .hf-bmap__mode {
  min-height: 0 !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--hf-eucalyptus) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

body #app .hf-bmap__mode.is-active {
  background: #fff !important;
  color: var(--hf-ink) !important;
  box-shadow: rgba(0, 70, 53, 0.12) 0 1px 4px !important;
}

body #app .hf-bmap__undo,
body #app .hf-bmap__clear {
  min-height: 0 !important;
  height: 40px;
  padding: 0 14px !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--hf-ink) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

body #app .hf-bmap__undo:hover,
body #app .hf-bmap__clear:hover {
  border-color: rgba(0, 121, 92, 0.4) !important;
  background: var(--hf-sage) !important;
  color: var(--hf-ink) !important;
}

body #app .hf-bmap__undo:disabled,
body #app .hf-bmap__clear:disabled,
body #app .hf-bmap__use:disabled {
  opacity: 0.45;
}

body #app .hf-blay__cta {
  display: flex !important;
  justify-content: center;
  align-items: center;
  min-height: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
}

/* Example carousel (boundary assistant). */
body #app .hf-blay__carousel {
  position: relative;
  width: min(100%, 660px);
  margin: 0 auto;
}

body #app .hf-blay__viewport {
  overflow: hidden;
  border-radius: 12px;
}

body #app .hf-blay__track {
  display: flex;
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

body #app .hf-blay__slide {
  display: block;
  width: 100%;
  flex: 0 0 100%;
}

body #app .hf-blay__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px !important;
  height: 40px;
  min-height: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--hf-teal) !important;
  font-size: 16px !important;
  box-shadow: rgba(0, 70, 53, 0.18) 0 4px 12px !important;
  transform: translateY(-50%);
  cursor: pointer;
}

body #app .hf-blay__nav:hover {
  background: #fff !important;
  color: var(--hf-teal-hover) !important;
  border-color: rgba(0, 121, 92, 0.4) !important;
  /* keep the arrow vertically centred on hover; overrides the generic
     `#app button:hover { transform: translateY(-1px) }` that made it jump */
  transform: translateY(-50%) !important;
}

body #app .hf-blay__nav--prev { left: -14px; }
body #app .hf-blay__nav--next { right: -14px; }

body #app .hf-blay__pager {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: rgba(0, 70, 53, 0.16) 0 3px 10px;
}

body #app .hf-blay__count {
  color: var(--hf-ink);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

body #app .hf-blay__dot {
  width: 8px !important;
  height: 8px;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(150, 120, 78, 0.25) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

body #app .hf-blay__dot.is-active {
  background: var(--hf-teal) !important;
  transform: scale(1.25);
}

@media (max-width: 620px) {
  body #app .hf-blay__nav--prev { left: 6px; }
  body #app .hf-blay__nav--next { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  body #app .hf-blay__track,
  body #app .hf-blay__slide {
    transition: none;
  }
}

/* Configurator: white surfaces only — no sage (#faf6ee) backgrounds in the flow. */
body #app .red {
  background: #fff;
  border: 1px solid var(--hf-line);
}

body #app .collarsetting {
  background: #fff;
}

body #app ul.radiolist label.selected {
  background: #fff;
}

body #app .hf-blay__tut {
  background: #fff;
  border: 1px solid var(--hf-line);
}

body #app #step5 .left {
  background: #fff;
  border: 1px solid var(--hf-line);
}

body #app .productitems td:first-child img {
  background: #fff;
  border: 1px solid var(--hf-line);
}

body #app .productitems tr:last-child td {
  background: #fff;
  border-top: 2px solid var(--hf-teal);
}

body #app #boundarylength table tr:nth-child(even) td {
  background: #fff;
}

body #app .hf-blay__back:hover {
  background: #fff !important;
}

body #app .hf-bmap__undo:hover,
body #app .hf-bmap__clear:hover {
  background: #fff !important;
}

body #app .dragtorotate {
  background: #fff !important;
  border: 1px solid var(--hf-line);
}

/* ==========================================================================
   Audit-fix layer (1.0.136.22) — full-site professional pass
   ========================================================================== */

/* --- Collapse-O-Matic accordions (FAQ + troubleshooting pages) ----------- */
.entry-content .collapseomatic {
  display: block;
  position: relative;
  margin: 12px 0 0;
  padding: 16px 54px 16px 20px;
  background: #fff;
  border: 1px solid rgba(0, 70, 53, 0.16);
  border-radius: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #1d2a32;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.entry-content .collapseomatic:hover,
.entry-content .collapseomatic:focus-visible {
  border-color: rgba(0, 121, 92, 0.5);
  box-shadow: rgba(0, 70, 53, 0.09) 0 10px 26px;
}

.entry-content .collapseomatic::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--hf-teal);
  border-bottom: 2px solid var(--hf-teal);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease;
}

.entry-content .collapseomatic.colomat-close {
  border-radius: 12px 12px 0 0;
  border-bottom-color: transparent;
}

.entry-content .collapseomatic.colomat-close::after {
  transform: translateY(-30%) rotate(-135deg);
}

.entry-content .collapseomatic_content {
  margin: 0 0 12px;
  padding: 4px 20px 18px;
  background: #fff;
  border: 1px solid rgba(0, 70, 53, 0.16);
  border-top: 0;
  border-radius: 0 0 12px 12px;
}

/* --- Classic [gallery] shortcode → responsive grid (install-photos) ------ */
.entry-content .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 28px 0;
}

.entry-content .gallery .gallery-item {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
}

.entry-content .gallery .gallery-icon,
.entry-content .gallery .gallery-icon a {
  display: block;
  height: 100%;
}

.entry-content .gallery .gallery-icon img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  border: none;
  border-radius: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.entry-content .gallery .gallery-icon a:hover img,
.entry-content .gallery .gallery-icon a:focus-visible img {
  transform: translateY(-3px);
  box-shadow: rgba(0, 70, 53, 0.18) 0 16px 34px;
}

/* --- Legacy floated images: breathing room + mobile stacking ------------- */
main .entry-content img.alignright {
  float: right;
  margin: 6px 0 18px 26px;
  max-width: min(46%, 340px);
  height: auto;
  border-radius: 12px;
}

main .entry-content img.alignleft {
  float: left;
  margin: 6px 26px 18px 0;
  max-width: min(46%, 340px);
  height: auto;
  border-radius: 12px;
}

main .entry-content img.aligncenter {
  display: block;
  margin: 26px auto;
  height: auto;
}

@media (max-width: 600px) {
  main .entry-content img.alignright,
  main .entry-content img.alignleft {
    float: none;
    display: block;
    margin: 18px auto;
    max-width: 100%;
  }
}

/* --- Very long suburb/locality lists → columns ---------------------------- */
main .entry-content ul:has(li:nth-child(60)) {
  columns: 4;
  column-gap: 30px;
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  main .entry-content ul:has(li:nth-child(60)) {
    columns: 3;
  }
}

@media (max-width: 600px) {
  main .entry-content ul:has(li:nth-child(60)) {
    columns: 2;
    font-size: 14px;
  }
}

/* --- Dead hotlinked image (Central Coast distributor) --------------------- */
.entry-content img[src*="hiddenfencecentralcoast.com.au"] {
  display: none !important;
}

/* --- Product registration form (page 40673) ------------------------------- */
body.page-id-40673 #app .q > h3:first-of-type::before,
body.page-id-40673 #app .q > h2:first-of-type::before {
  content: none;
}

body.page-id-40673 #app .form.q > h3 {
  text-align: left;
  margin: 30px 0 12px;
}

body.page-id-40673 #app .form.q > h3:first-of-type {
  margin-top: 0;
}

body.page-id-40673 #app .form.q > ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-id-40673 #app .form.q > ul > li {
  list-style: none;
  margin: 0;
  padding: 6px 14px;
  background: rgba(150, 120, 78, 0.08);
  color: #0c4435;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}

body.page-id-40673 #app input[type="text"],
body.page-id-40673 #app input[type="email"],
body.page-id-40673 #app input:not([type]),
body.page-id-40673 #app select {
  width: 100%;
  max-width: 420px;
  padding: 10px 14px;
  border: 1px solid #c7d6d0;
  border-radius: 10px;
  background: #fff;
}

body.page-id-40673 #app button.button {
  background: var(--hf-teal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 34px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

body.page-id-40673 #app button.button:hover:not(:disabled) {
  background: #00604a !important;
}

body.page-id-40673 #app button.button:disabled {
  background: #9db5ae !important;
  color: #f5f1ed !important;
}

/* --- Duplicate heading inside CF7 product-review form --------------------- */
body.page-id-11389 .wpcf7 h2 {
  display: none;
}

/* --- Installation layouts: animated diagram grid --------------------------- */
.entry-content .hf-layouts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  margin: 30px 0;
}

.entry-content .hf-layouts-grid figure {
  margin: 0;
  background: #fff;
  border: 1px solid rgba(0, 70, 53, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: rgba(0, 70, 53, 0.06) 0 12px 30px;
}

.entry-content .hf-layouts-grid img {
  display: block;
  width: 100%;
  height: auto;
}

.entry-content .hf-layouts-grid figcaption {
  padding: 14px 18px 18px;
}

.entry-content .hf-layouts-grid figcaption strong {
  display: block;
  margin-bottom: 4px;
  color: #0c4435;
}

.entry-content .hf-layouts-grid figcaption span {
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: #54655f;
}

/* --- Battery cost table (2-year-battery-life) ------------------------------ */
.entry-content .hf-battery-table {
  overflow-x: auto;
  margin: 22px 0;
}

.entry-content .hf-battery-table table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

.entry-content .hf-battery-table th {
  background: #0c4435;
  color: #fff;
  text-align: left;
  padding: 12px 16px;
  font-size: 14.5px;
}

.entry-content .hf-battery-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 70, 53, 0.12);
}

.entry-content .hf-battery-table tbody tr:nth-child(even) {
  background: rgba(150, 120, 78, 0.045);
}

.entry-content p.hf-footnote {
  font-size: 13.5px;
  color: #6a7a74;
}

/* --- Related products: buttons align to card bottom ------------------------ */
body.single-product ul.products li.product {
  display: flex;
  flex-direction: column;
}

body.single-product ul.products li.product .button {
  margin-top: auto;
  align-self: flex-start;
}

/* --- Long hero titles must never clip on small screens --------------------- */
.hf-page-hero h1,
main .wp-block-post-title {
  overflow-wrap: break-word;
}

/* --- Legacy floated figures (classic-era pages) ---------------------------- */
main .entry-content figure.alignright {
  float: right;
  margin: 6px 0 18px 26px;
  max-width: min(46%, 360px);
}

main .entry-content figure.alignleft {
  float: left;
  margin: 6px 26px 18px 0;
  max-width: min(46%, 360px);
}

main .entry-content figure.alignright img,
main .entry-content figure.alignleft img {
  border-radius: 12px;
  height: auto;
}

@media (max-width: 600px) {
  main .entry-content figure.alignright,
  main .entry-content figure.alignleft {
    float: none;
    margin: 18px auto;
    max-width: 100%;
  }
}

/* --- Page titles: balanced wrap, comfortable size on small phones ---------- */
main .wp-block-post-title {
  text-wrap: balance;
}

@media (max-width: 480px) {
  main .wp-block-post-title {
    font-size: clamp(24px, 7vw, 28px);
  }
}

/* ==========================================================================
   Audit-fix layer round 2 (1.0.136.22)
   ========================================================================== */

/* Testimonials: the legacy-page treatment rebuilds quotes into cards but
   strands the original <hr> separators as direct children — hide them, and
   turn the "Client's Pet" photo table into a proper grid. */
body.page-id-90 .entry-content > hr {
  display: none;
}

body.page-id-90 .entry-content table,
body.page-id-90 .entry-content tbody {
  display: block;
  width: 100%;
  border: none;
}

body.page-id-90 .entry-content tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

body.page-id-90 .entry-content tr {
  display: contents;
}

body.page-id-90 .entry-content td {
  display: block;
  padding: 0;
  border: none;
}

body.page-id-90 .entry-content td img {
  width: 100% !important;
  height: 170px !important;
  object-fit: cover;
  border-radius: 12px;
}

/* Hidden Fence systems page: the step cascade depended on a legacy WOW.js
   animation hook that no longer fires for late steps — never hide the steps. */
html.hf-steps-js body.page-id-3902 .entry-content .steps .wp3 {
  opacity: 1;
  transform: none;
}

/* Product warranty registration: the configurator's two-column form grid
   scatters this page's headings/chips — single column here. */
body.page-id-40673 #app .form.q {
  display: block !important;
  max-width: 640px;
}

/* Wire cable page: all three cover blocks have a solid-black background, so
   every text element inside must be light to be legible. WordPress preset
   colour classes (.has-*-color) set teal/grey with !important, so this needs
   !important + page/cover specificity to win. */
body.page-id-67108 .wp-block-cover {
  color: rgba(255, 255, 255, 0.92) !important;
}

body.page-id-67108 .wp-block-cover :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: #fff !important;
}

body.page-id-67108 .wp-block-cover :is(p, li, span, em, blockquote) {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* In-cover links readable + clearly tappable; CTA buttons keep white text. */
body.page-id-67108 .wp-block-cover a:not(.wp-block-button__link):not(.wp-element-button) {
  color: #8fe3c9 !important;
  text-decoration: underline;
}

body.page-id-67108 .wp-block-cover .wp-block-button__link,
body.page-id-67108 .wp-block-cover .wp-element-button {
  color: #fff !important;
}

/* How a hidden fence works: legacy diagram overflowed 390px viewports. */
body.page-id-510 .entry-content {
  overflow-x: clip;
}

body.page-id-510 .entry-content img {
  max-width: 100% !important;
  height: auto !important;
}

/* Battery comparison table must fit a 390px screen without clipping. */
@media (max-width: 520px) {
  .entry-content .hf-battery-table table {
    min-width: 0;
    font-size: 13.5px;
  }

  .entry-content .hf-battery-table th,
  .entry-content .hf-battery-table td {
    padding: 9px 10px;
  }
}

/* Suburb list columns: never break town names mid-word. */
main .entry-content ul:has(li:nth-child(60)) {
  columns: 3;
}

main .entry-content ul:has(li:nth-child(60)) li {
  break-inside: avoid;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

@media (max-width: 900px) {
  main .entry-content ul:has(li:nth-child(60)) {
    columns: 2;
  }
}

/* Single-product configurator widget has its own "Step n of n" labels —
   the global #app step eyebrow showed a bogus "STEP 0" above them. */
body.single-product .hiddenfence-product-configurator #app .q > h3:first-of-type::before,
body.single-product .hiddenfence-product-configurator #app .q > h2:first-of-type::before {
  content: none;
}

/* Empty layout columns should not reserve space. */
.entry-content .wp-block-columns > .wp-block-column:empty {
  display: none;
}

/* Cart cross-sells: titles read as bare underlined links. */
body.woocommerce-cart .cross-sells ul.products li.product a {
  text-decoration: none;
}

body.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px;
  font-weight: 300;
  text-transform: none;
}

/* ==========================================================================
   Homepage "Hidden Fence Systems": DIY | Professional Install 50/50 split
   ========================================================================== */
.hf-home-systems-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}

.hf-home-systems-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hf-home-systems-col > .hf-home-card {
  flex: 1 1 auto;
}

.hf-home-systems-label {
  margin: 0;
  color: var(--hf-teal);
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
}

/* Both top cards share one media treatment so the 50/50 reads balanced. */
.hf-home-card--split .hf-home-card__media {
  min-height: 240px;
}

.hf-home-card--split .hf-home-card__media img {
  max-height: 300px;
}

@media (max-width: 620px) {
  .hf-home-systems-split {
    grid-template-columns: 1fr;
  }

  .hf-home-card--split .hf-home-card__media {
    min-height: 210px;
  }
}

/* The installation photo now backs the .hf-home-trust band (see above);
   the standalone .hf-home-banner figure has been removed. */

/* Contact distributor cards: pin the action buttons to the card bottom so
   every equal-height box lines its buttons up on a clean baseline. */
body.page-id-18 .entry-content .hf-contact-card .trackbuttons {
  margin-top: auto;
  padding-top: 16px;
}

/* Contact cards are WP flow blocks, so each card except the first inherited a
   margin-block-start (~19px). Inside the grid that offset each card within its
   cell — breaking row-1 top alignment (Brisbane vs Central Queensland) and
   adding uneven row spacing. Zero it so cards sit flush at their grid lines and
   spacing is purely the 16px grid gap. */
.hf-contact-grid > .hf-contact-card {
  margin-top: 0;
}

/* ==========================================================================
   Header CALL NOW → pill button with a mobile-phone icon.
   FontAwesome is not loaded on the front end, so the icon is an inline SVG
   mask tinted by the button's text colour.
   ========================================================================== */
.hf-header .hf-track-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  min-height: 38px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--hf-teal);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700 !important;
  line-height: 1.1;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: rgba(0, 70, 53, 0.18) 0 6px 16px -6px;
  transition:
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.hf-header .hf-track-link:hover,
.hf-header .hf-track-link:focus-visible {
  background: var(--hf-teal-hover);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: rgba(0, 70, 53, 0.22) 0 10px 22px -8px;
}

.hf-header .hf-track-link .hf-callnow-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5v.75A.75.75 0 0 1 12.75 3h-1.5a.75.75 0 0 1-.75-.75V1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5v.75A.75.75 0 0 1 12.75 3h-1.5a.75.75 0 0 1-.75-.75V1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Distributor-opportunities (and other legacy intro sections): paragraphs are
   grid items, so their own 15px top/bottom margins doubled up with the 34px
   grid row-gap (~64px between paragraphs). Remove the redundant margins and use
   a tighter, consistent vertical rhythm. */
.hf-legacy-section--intro {
  row-gap: clamp(14px, 1.6vw, 22px);
}

.hf-legacy-section--intro > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Homepage trust band: on desktop keep the text to ~a third of the width so
   more of the installation photo (the dog) is visible. */
@media (min-width: 981px) {
  .hf-home-trust__inner > div,
  .hf-home-trust h2 {
    max-width: 34%;
  }
}

/* ==========================================================================
   YouTube facade — thumbnail + title only (no channel/uploader). Replaces the
   player iframe until the visitor clicks to watch. (hiddenfence-yt-facade.js)
   ========================================================================== */
.hf-ytlite {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

/* The box self-sizes to 16:9, so neutralise WordPress's responsive-embed
   aspect spacer when a facade is present (otherwise the height doubles). */
.wp-block-embed.wp-has-aspect-ratio:has(.hf-ytlite) .wp-block-embed__wrapper::before {
  content: none !important;
  padding: 0 !important;
}

.hf-ytlite__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease, filter 300ms ease;
}

.hf-ytlite::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 78px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

.hf-ytlite__title {
  position: absolute;
  top: 11px;
  left: 14px;
  right: 14px;
  z-index: 2;
  color: #fff;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hf-ytlite__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 13px;
  background: rgba(18, 18, 18, 0.78);
  transition: background-color 200ms ease, transform 200ms ease;
}

.hf-ytlite__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff;
}

.hf-ytlite:hover .hf-ytlite__play,
.hf-ytlite:focus-visible .hf-ytlite__play {
  background: #f00;
  transform: translate(-50%, -50%) scale(1.04);
}

.hf-ytlite:hover .hf-ytlite__thumb {
  transform: scale(1.03);
  filter: brightness(1.04);
}

.hf-ytlite:focus-visible {
  outline: 3px solid rgba(0, 121, 92, 0.45);
  outline-offset: 2px;
}

.hf-ytlite-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Configurator Collar Colour step: on phones the swatches were a tall 2-column
   list (~310px, 3 rows) that forced scrolling. Make them a compact 3-column
   grid with smaller swatches so all colours are visible at once. Scoped to the
   colour list only via :has(img.colours). */
@media (max-width: 600px) {
  body #app ul.radiolist:has(img.colours) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body #app ul.radiolist label:has(img.colours) {
    min-height: 0;
    padding: 9px 5px;
    gap: 5px;
    font-size: 12px;
  }

  body #app img.colours {
    width: 40px;
    height: 40px;
    max-height: 40px;
  }

  body #app ul.radiolist label:has(img.colours).selected::after {
    top: 5px;
    right: 5px;
  }
}

/* Indoor wireless cat fence: the floated reference diagrams rendered tiny
   (~155-220px) on desktop. Enlarge them so the detail is legible. */
@media (min-width: 900px) {
  body.page-id-48208 .entry-content figure.alignright,
  body.page-id-48208 .entry-content figure.alignleft {
    width: clamp(300px, 26vw, 360px) !important;
    max-width: 360px !important;
    height: auto !important;
  }

  body.page-id-48208 .entry-content figure.alignright img,
  body.page-id-48208 .entry-content figure.alignleft img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ==========================================================================
   Homepage USP highlight band — 3 key selling points directly under the hero.
   ========================================================================== */
.hf-home-usps {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(26px, 3.6vw, 42px) max(16px, calc((100vw - 1200px) / 2));
  background: linear-gradient(180deg, #ffffff 0%, #f7f3ef 100%);
  border-bottom: 1px solid rgba(150, 120, 78, 0.12);
}

.hf-home-usps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  align-items: start;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

/* Four USP cards: pair them up before collapsing to one column. */
@media (max-width: 1080px) {
  .hf-home-usps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hf-home-usp {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  min-width: 0;
}

.hf-home-usp__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: rgba(150, 120, 78, 0.10);
  color: var(--hf-teal);
  box-shadow: rgba(0, 70, 53, 0.08) 0 6px 16px -8px;
}

.hf-home-usp__icon svg {
  width: 26px;
  height: 26px;
}

.hf-home-usp__body {
  min-width: 0;
}

.hf-home-usp__title {
  margin: 3px 0 4px;
  color: var(--hf-teal);
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 700;
  line-height: 1.22;
  text-wrap: balance;
}

.hf-home-usp__desc {
  margin: 0;
  color: var(--hf-eucalyptus);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .hf-home-usps__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Interior-page USP band: match the homepage's full-width band look. The page's
   .entry-content is full viewport width with root side-padding, so we negate that
   padding to reach the edges (main has overflow-x: clip, so this can't overflow). */
.hf-home-usps--page {
  width: 100%;
  max-width: 100%;
  margin: 0 0 clamp(26px, 4vw, 44px);
  padding: clamp(26px, 3.4vw, 40px) 0;
  border: 0;
  border-bottom: 1px solid rgba(150, 120, 78, 0.12);
  border-radius: 0;
  box-shadow: none;
}

/* Sit a first-child band close under the page hero (the hero's bottom margin +
   a forced block margin otherwise leave ~96px). High specificity + !important to
   beat the constrained-layout margin. body[class] keeps it page-agnostic. */
body[class] .entry-content > .hf-home-usps--page:first-child {
  margin-top: clamp(-46px, -3vw, -12px) !important;
}

/* The batteries page has no theme page hero (its hero is built in-content), so
   the first-child band needs normal top spacing, not the negative pull-up. */
body.page-id-139295 .entry-content > .hf-home-usps--page:first-child {
  margin-top: clamp(14px, 2vw, 22px) !important;
}

/* Edge-to-edge on desktop, matching the homepage band. The theme's constrained
   layout pins margins/max-width with !important, so this override needs both
   !important and child specificity to win; main has overflow-x: clip so it
   can't cause a scrollbar. */
@media (min-width: 1200px) {
  body[class] .entry-content > .hf-home-usps--page {
    width: auto !important;
    max-width: none !important;
    margin-left: calc((1200px - 100vw) / 2) !important;
    margin-right: calc((1200px - 100vw) / 2) !important;
    padding-left: calc((100vw - 1200px) / 2) !important;
    padding-right: calc((100vw - 1200px) / 2) !important;
  }
}

/* Make the systems-page YouTube video noticeably larger by widening its column. */
@media (min-width: 782px) {
  body.page-id-3902 .wp-block-columns:has(.hf-ytlite) > .wp-block-column:has(.hf-ytlite) {
    flex: 0 0 48% !important;
    max-width: 48% !important;
  }

  body.page-id-3902 .wp-block-columns:has(.hf-ytlite) > .wp-block-column:not(:has(.hf-ytlite)) {
    flex: 1 1 0 !important;
    max-width: none !important;
  }
}

/* Battery intro: the product image was rendering at 320px square, so the bordered
   image card towered over the (short) two-paragraph copy and the centred text
   floated in a mostly-empty box. Shrink the image and drop the tall min-height so
   the card hugs the image — the two columns then sit balanced and centred. */
body.page-id-139295 .hf-battery-intro .wp-block-column:first-child {
  min-height: 0;
  padding: clamp(16px, 2.4vw, 26px);
}

body.page-id-139295 .hf-battery-intro img {
  width: min(240px, 100%);
  max-height: 220px;
}

body.page-id-139295 .hf-battery-intro .wp-block-column:last-child > * {
  align-self: stretch;
}

body.page-id-139295 .hf-battery-intro p {
  max-width: 580px !important;
}

body.page-id-139295 .hf-battery-intro p + p {
  margin-top: 14px !important;
}

/* Ported "ULTRADOG packages" + "Which Dog Fence is best" sections (legacy markup
   from the production systems page). Give each section breathing room, constrain
   the ULTRADOG copy to a readable width, and clear the ezcol column floats so the
   following content sits below them. */
body.page-id-3902 .entry-content .contentarea {
  margin-top: clamp(44px, 6vw, 76px);
  clear: both;
}

body.page-id-3902 .entry-content .contentarea .max900 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

body.page-id-3902 .entry-content .contentarea::after {
  content: "";
  display: table;
  clear: both;
}

/* ===== PT5 Smart Fence — ported feature content polish ===== */
/* Narrow the content column from the site-wide 1200px to a more readable width
   (the theme drives content width off --hf-page-copy with !important, so we set
   the variable rather than fight specificity). */
body.page-id-271 .entry-content,
body.page-id-379 .entry-content {
  --hf-page-copy: min(920px, calc(100vw - 40px)) !important;
}

body.page-id-271 .entry-content > h2 {
  margin-top: clamp(40px, 5vw, 74px);
  text-align: center;
  color: var(--hf-teal);
}

body.page-id-271 .entry-content > h2:first-of-type {
  margin-top: clamp(26px, 3vw, 44px);
}

body.page-id-271 .entry-content .wp-block-columns {
  margin-top: clamp(20px, 2.4vw, 34px);
}

/* FAQ — native <details> styled as clean accordions */
body.page-id-271 details {
  max-width: 860px;
  margin: 0 auto 10px;
  border: 1px solid rgba(150, 120, 78, 0.16);
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 70, 53, 0.05) 0 10px 26px -14px;
}

body.page-id-271 details > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  padding: 15px 20px;
  font-weight: 600;
  color: #0b2d27;
  list-style: none;
}

body.page-id-271 details > summary::-webkit-details-marker {
  display: none;
}

body.page-id-271 details > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--hf-teal);
}

body.page-id-271 details[open] > summary::after {
  content: "\2212";
}

body.page-id-271 details > div {
  padding: 0 20px 16px;
  color: #36534c;
  line-height: 1.66;
}

/* ===== PT4 Professional — readability + cleaner image layout ===== */
body.page-id-379 .entry-content > h2 {
  margin-top: clamp(38px, 4.5vw, 64px);
}

body.page-id-379 .entry-content .wp-block-image.alignright,
body.page-id-379 .entry-content .wp-block-image.alignleft {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

body.page-id-379 .entry-content .wp-block-image img {
  max-height: 480px;
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Homepage "choose your dog system" Lexus-style showcase ===== */
.hf-dogsys {
  box-sizing: border-box;
  width: 100%;
  padding: clamp(38px, 5.5vw, 78px) clamp(16px, 4vw, 40px) clamp(30px, 4vw, 52px);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(150, 120, 78, 0.10), transparent 42%),
    linear-gradient(180deg, #faf6ee 0%, #fdfaf5 32%, #ffffff 78%);
  overflow: hidden;
  /* Shared product-image area size; container height and image cap stay in sync. */
  --hf-dogsys-media: clamp(250px, 21vw, 340px);
}

.hf-dogsys__head {
  max-width: 760px;
  margin: 0 auto clamp(20px, 3vw, 40px);
}

.hf-dogsys__kicker {
  margin: 0 0 8px;
  color: var(--hf-teal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hf-dogsys__title {
  margin: 0 !important;
  color: var(--hf-ink, #0b2d27);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
}

.hf-dogsys__stage {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  --hf-dogsys-peek: clamp(255px, 28vw, 370px);
}

.hf-dogsys__track {
  position: relative;
  height: 560px;
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.hf-dogsys__card {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 50%;
  width: min(440px, 88vw);
  margin: 0;
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.2vw, 30px) clamp(24px, 2.4vw, 32px);
  border: 1px solid rgba(150, 120, 78, 0.12);
  border-radius: 16px;
  background: #fff;
  text-align: left;
  transform: translateX(-50%) scale(0.78);
  transform-origin: center;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: rgba(0, 70, 53, 0.06) 0 14px 36px -18px;
  transition:
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.45s ease,
    box-shadow 0.45s ease,
    filter 0.45s ease;
}

.hf-dogsys__card.is-left,
.hf-dogsys__card.is-right {
  opacity: 0.62;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
  filter: saturate(0.78);
}

.hf-dogsys__card.is-left {
  transform: translateX(calc(-50% - var(--hf-dogsys-peek))) scale(0.82);
}

.hf-dogsys__card.is-right {
  transform: translateX(calc(-50% + var(--hf-dogsys-peek))) scale(0.82);
}

.hf-dogsys__card.is-left:hover,
.hf-dogsys__card.is-right:hover {
  opacity: 0.82;
}

.hf-dogsys__card.is-center {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
  filter: none;
  border-color: rgba(0, 121, 92, 0.28);
  box-shadow: rgba(0, 70, 53, 0.16) 0 30px 60px -28px;
}

.hf-dogsys__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--hf-teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hf-dogsys__media {
  display: grid;
  place-items: center;
  height: var(--hf-dogsys-media);
  margin-bottom: 16px;
}

.hf-dogsys__media img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: var(--hf-dogsys-media);
  object-fit: contain;
}

.hf-dogsys__tag {
  margin: 0 0 4px !important;
  color: var(--hf-eucalyptus, #5b7c73);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hf-dogsys__name {
  margin: 0 0 14px !important;
  color: var(--hf-ink, #0b2d27);
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.15;
}

.hf-dogsys__features {
  margin: 0 0 18px !important;
  padding: 0 !important;
  list-style: none;
}

.hf-dogsys__features li {
  position: relative;
  margin: 0 0 9px;
  padding-left: 28px;
  color: #36534c;
  font-size: 14px;
  line-height: 1.45;
}

.hf-dogsys__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background-color: rgba(150, 120, 78, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300795C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.hf-dogsys__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--hf-teal);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hf-dogsys__cta:hover {
  background: var(--hf-teal-hover, #006b51);
  transform: translateY(-1px);
}

/* side cards de-emphasise the detail, keep title + image prominent */
.hf-dogsys__card:not(.is-center) .hf-dogsys__cta {
  opacity: 0;
  pointer-events: none;
}

.hf-dogsys__nav {
  position: absolute;
  top: 38%;
  z-index: 5;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(150, 120, 78, 0.2);
  border-radius: 999px;
  background: #fff;
  color: var(--hf-teal);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: rgba(0, 70, 53, 0.12) 0 10px 24px -12px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hf-dogsys__nav:hover {
  background: var(--hf-sage, #f4efe9);
  transform: scale(1.06);
}

.hf-dogsys__nav--prev { left: clamp(0px, 1vw, 12px); }
.hf-dogsys__nav--next { right: clamp(0px, 1vw, 12px); }

.hf-dogsys__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(16px, 2vw, 26px);
}

.hf-dogsys__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(150, 120, 78, 0.24);
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.hf-dogsys__dot.is-active {
  width: 26px;
  background: var(--hf-teal);
}

@media (max-width: 860px) {
  /* Narrow the centre card and tuck the other two behind it so their edges peek
     out either side — a stacked-deck look that signals there are more options. */
  .hf-dogsys__stage {
    --hf-dogsys-peek: clamp(40px, 11vw, 56px);
  }
  .hf-dogsys {
    /* Landscape box shots are width-limited on a phone, so keep the image area
       tight to the image height — no empty space below it. */
    --hf-dogsys-media: clamp(150px, 50vw, 205px);
  }
  .hf-dogsys__card {
    width: min(330px, 82vw);
  }
  .hf-dogsys__card.is-left,
  .hf-dogsys__card.is-right {
    opacity: 0.5;
    pointer-events: auto;
  }
  .hf-dogsys__card.is-left {
    transform: translateX(calc(-50% - var(--hf-dogsys-peek))) scale(0.86);
  }
  .hf-dogsys__card.is-right {
    transform: translateX(calc(-50% + var(--hf-dogsys-peek))) scale(0.86);
  }
  .hf-dogsys__nav {
    top: auto;
    bottom: -4px;
  }
  .hf-dogsys__nav--prev { left: 8px; }
  .hf-dogsys__nav--next { right: 8px; }
}

/* --- "More accurate than GPS" full-width photo banner. --- */
.hf-geo {
  position: relative;
  width: 100%;
  min-height: clamp(480px, 54vw, 660px);
  display: flex;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}

.hf-geo__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias the crop to the lower-left so the dog stays in frame on every aspect. */
  object-position: 32% 82%;
  z-index: -2;
}

/* Tinted (brand green) gradients keep the white text legible over the bright sky
   and open paddock without flattening the photo. */
.hf-geo__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6,32,26,0.62) 0%, rgba(6,32,26,0.24) 24%, rgba(6,32,26,0) 46%),
    linear-gradient(90deg, rgba(6,32,26,0.58) 0%, rgba(6,32,26,0.24) 44%, rgba(6,32,26,0.04) 74%),
    linear-gradient(0deg, rgba(6,32,26,0.34) 0%, rgba(6,32,26,0) 24%);
}

.hf-geo__inner {
  width: var(--hf-home-shell, min(1200px, calc(100vw - 32px)));
  margin-inline: auto;
  padding: clamp(34px, 4.4vw, 64px) 0;
  display: flex;
  gap: clamp(24px, 4vw, 60px);
  align-items: flex-start;
}

.hf-geo__content {
  flex: 1 1 58%;
  max-width: 660px;
}

.hf-geo__heading {
  margin: 0 !important;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(23px, 2.85vw, 40px);
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(4,20,16,0.52);
}

.hf-geo__heading strong {
  font-weight: 800;
}

.hf-geo__aside {
  flex: 0 0 auto;
  align-self: stretch;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(22px, 3vw, 36px);
}

.hf-geo__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(9px, 1.2vw, 14px);
}

.hf-geo__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(17px, 1.55vw, 23px);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 14px rgba(4,20,16,0.5);
}

.hf-geo__tick {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(25px, 2.1vw, 31px);
  height: clamp(25px, 2.1vw, 31px);
  border-radius: 999px;
  background: var(--hf-teal, #00795c);
  box-shadow: 0 2px 12px rgba(4,20,16,0.4);
}

.hf-geo__tick svg {
  width: 58%;
  height: 58%;
  stroke: #fff;
}

/* Glass CTA sitting under the tick list, over the photo. */
.hf-geo__cta {
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #fff;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(4, 20, 16, 0.5);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hf-geo__cta:hover,
.hf-geo__cta:focus-visible {
  background: rgba(255, 255, 255, 0.26);
  border-color: #fff;
  color: #fff;
}

.hf-geo__logo {
  width: clamp(150px, 16vw, 232px);
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(4,20,16,0.55));
}

@media (max-width: 860px) {
  .hf-geo {
    min-height: clamp(560px, 130vw, 660px);
  }
  .hf-geo__bg {
    object-position: 38% 86%;
  }
  /* Stack the copy at the top; the lower half of the frame keeps the dog visible. */
  .hf-geo__inner {
    flex-direction: column;
    gap: clamp(20px, 5vw, 30px);
    padding-top: clamp(30px, 7vw, 48px);
  }
  .hf-geo__content {
    flex: none;
    max-width: 100%;
  }
  .hf-geo__aside {
    margin-left: 0;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 18px 26px;
  }
  .hf-geo__list {
    grid-template-columns: repeat(2, auto);
    gap: 10px 22px;
  }
  .hf-geo__logo {
    width: clamp(132px, 34vw, 190px);
  }
}

@media (max-width: 480px) {
  .hf-geo__list {
    grid-template-columns: 1fr;
  }
  .hf-geo__aside {
    flex-direction: column;
    align-items: flex-start;
  }
  .hf-geo__logo {
    align-self: flex-end;
  }
}

/* Small inline icon inside hero buttons (e.g. the map thumbnail on
   "Map your property"). */
.wp-block-button__link .hf-btn-ico {
  display: inline-block;
  width: 62px;
  /* Flush to the button's top/left/bottom edges: the height spans the 38px
     slot PLUS the button's 6px vertical paddings, and the negative margins
     cancel those paddings (values must track the 6px/12px padding rule for
     icon buttons below). The label keeps its own padding untouched. */
  height: 50px;
  margin: -6px 11px -6px -12px;
  vertical-align: middle;
  border-radius: 7px 0 0 7px; /* nest inside the button's 8px corners */
  object-fit: cover; /* photo icons crop to the slot */
}

/* Icon buttons: the icon hugs the button's left edge; the button keeps its
   own padding — only the content row stops centring. */
.wp-block-button__link:has(.hf-btn-ico) {
  justify-content: flex-start;
  text-align: left;
}

/* --- Dog-system showcase: stacked sliding coverflow ----------------------- */
/* Cards sit in one flex row that slides sideways so the active card is centred.
   Instead of a gap, the cards OVERLAP: the focused card is full-size and on top,
   and the unfocused cards tuck slightly behind it either side, scaled down and
   dimmed, fanning back with distance. Layering (z-index) is set from JS by each
   card's distance from the centre. */

.hf-dogsys__stage {
	overflow: hidden; /* clip cards that slide off / sit behind the ends */
	max-width: 940px; /* keep only the focused card + its two neighbours in view */
}

.hf-dogsys__track {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	height: auto;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
	/* How much each card tucks behind its neighbour. */
	--hf-dogsys-overlap: clamp(90px, 10vw, 140px);
}

.hf-dogsys__card {
	position: relative;
	top: auto;
	left: auto;
	flex: 0 0 auto;
	margin: 0 calc(var(--hf-dogsys-overlap) / -2);
	transform: scale(0.8);
	opacity: 0; /* JS reveals centre (1) + the two neighbours (0.6); rest stay 0 */
	filter: saturate(0.72);
	pointer-events: auto;
	cursor: pointer;
}

.hf-dogsys__card.is-center {
	transform: scale(1);
	opacity: 1;
	filter: none;
	cursor: default;
	border-color: rgba(0, 121, 92, 0.28);
	box-shadow: rgba(0, 70, 53, 0.24) 0 34px 74px -26px;
}

.hf-dogsys__nav[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.hf-dogsys__card img {
	-webkit-user-drag: none;
	user-select: none; /* swiping across a card image must not start a drag */
}

@media (max-width: 860px) {
	.hf-dogsys__track {
		--hf-dogsys-overlap: clamp(48px, 18vw, 84px);
		touch-action: pan-y; /* horizontal swipes drive the carousel */
	}
	.hf-dogsys__card {
		/* Centre card scales WITH the screen (~70vw) instead of a hard 250px
		   cap that left it looking skinny on 500-860px screens; ~15vw of the
		   previous/next cards — their product images included — still peeks
		   in either side. */
		width: min(70vw, 520px);
		transform: scale(0.82);
		filter: saturate(0.85);
	}
	/* The media box hugs the image: at this card width the fixed 50vw box is
	   taller than the scaled-down photo, leaving a dead band under it. */
	.hf-dogsys__media {
		height: auto;
		margin-bottom: 12px;
	}
	.hf-dogsys__media img {
		width: 100%;
		max-height: none;
	}
	.hf-dogsys__card.is-center {
		transform: scale(1);
		filter: none;
	}
	/* Arrows float over the peeking cards, centred on the row. */
	.hf-dogsys__nav {
		top: 50%;
		bottom: auto;
		z-index: 120;
		transform: translateY(-50%);
	}
	.hf-dogsys__nav:hover {
		transform: translateY(-50%) scale(1.06);
	}
	.hf-dogsys__nav--prev { left: 6px; }
	.hf-dogsys__nav--next { right: 6px; }
}

/* Homepage: stop horizontal scroll caused by the full-bleed .hf-home-showcase
   section using 100vw (100vw includes the scrollbar width, so it overflows by
   the scrollbar width). Clip the tiny overflow at the root. `clip` (not hidden)
   avoids creating a scroll container, so sticky positioning is unaffected. */
html:has(body.home),
body.home {
  overflow-x: clip;
}

/* Boundary tool: exclusion-zone drawing state. */
body #app .hf-bmap__actions .hf-bmap__excl.is-active {
  border-color: #d99b00;
  background: #ffd400;
  color: #26323a;
}

body #app .hf-bmap__actions .hf-bmap__excl.is-active:not(:disabled):hover {
  background: #ffde40;
}

/* Mapping Fence standalone page: result footer + print view. */
body #app .hf-bmap__final {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hf-line);
}

body #app .hf-bmap__result {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 650;
  color: var(--hf-ink);
}

body #app .hf-bmap__total {
  color: var(--hf-teal);
  font-size: 20px;
}

body #app .hf-bmap__manlab {
  margin-left: 14px;
  font-size: 13px;
  font-weight: 500;
}

body #app .hf-bmap__manual {
  width: 90px;
  margin: 0 4px;
  padding: 6px 8px;
  border: 1px solid var(--hf-line);
  border-radius: 8px;
}

body #app .hf-bmap__finalbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body #app .hf-bmap__finalbtns .hf-bmap__print {
  height: 44px;
  padding-inline: 18px;
  border: 1px solid var(--hf-line);
  border-radius: 8px;
  background: #fff;
  color: var(--hf-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

body #app .hf-bmap__finalbtns .hf-bmap__choose {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding-inline: 18px;
  border-radius: 8px;
  background: var(--hf-teal);
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

body #app .hf-bmap__finalbtns .hf-bmap__choose:hover {
  background: var(--hf-teal-hover);
}

body #app .hf-bmap__printsum {
  display: none;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
}

@media print {
  body:has(#hf-mapping-fence) .wp-site-blocks > *:not(main),
  body:has(#hf-mapping-fence) header,
  body:has(#hf-mapping-fence) footer,
  body:has(#hf-mapping-fence) .hf-blay,
  body:has(#hf-mapping-fence) .hf-bmap__toggle,
  body:has(#hf-mapping-fence) .hf-bmap__note,
  body:has(#hf-mapping-fence) .hf-bmap__bar,
  body:has(#hf-mapping-fence) .hf-bmap__actions,
  body:has(#hf-mapping-fence) .hf-bmap__finalbtns,
  body:has(#hf-mapping-fence) .hf-bmap__manlab {
    display: none !important;
  }

  body:has(#hf-mapping-fence) .hf-bmap__printsum {
    display: block !important;
  }

  body:has(#hf-mapping-fence) .hf-bmap__canvas {
    height: 460px !important;
    page-break-inside: avoid;
  }
}

/* Boundary tool: tiny per-segment length tags. */
.hf-seglabel {
  pointer-events: none;
}

.hf-seglabel span {
  display: inline-block;
  transform: translate(-50%, -50%);
  padding: 1px 5px;
  border-radius: 7px;
  background: rgba(24, 33, 39, 0.72);
  color: #ffd400;
  font: 650 10px/1.5 Arial, sans-serif;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.hf-seglabel-g {
  padding: 1px 5px;
  border-radius: 7px;
  background: rgba(24, 33, 39, 0.72);
  color: #ffd400 !important;
  font-weight: 650;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Boundary tool: transmitter marker + button active state. */
.hf-txmark {
  pointer-events: auto;
}

.hf-txmark span {
  display: block;
  width: 18px;
  height: 12px;
  transform: translate(-50%, -50%);
  background: #1f6fb2;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 3px rgba(31, 111, 178, 0.35);
  cursor: move;
}

body #app .hf-bmap__actions .hf-bmap__tx.is-active {
  border-color: #17568b;
  background: #1f6fb2;
  color: #fff;
}

/* Boundary tool: share row. */
body #app .hf-bmap__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

body #app .hf-bmap__share .hf-bmap__sharebtn {
  height: 40px;
  padding-inline: 14px;
  border: 1px solid var(--hf-line);
  border-radius: 8px;
  background: #fff;
  color: var(--hf-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

body #app .hf-bmap__share .hf-bmap__sharebtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body #app .hf-bmap__share .hf-bmap__shareactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body #app .hf-bmap__share .hf-bmap__shareactions[hidden] {
  display: none;
}

body #app .hf-bmap__share .hf-bmap__copy,
body #app .hf-bmap__share .hf-bmap__email {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding-inline: 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

body #app .hf-bmap__share .hf-bmap__copy {
  border: 1px solid var(--hf-teal);
  background: var(--hf-teal);
  color: #fff;
}

body #app .hf-bmap__share .hf-bmap__copy.is-copied {
  border-color: #1f7a44;
  background: #1f7a44;
}

body #app .hf-bmap__share .hf-bmap__email {
  border: 1px solid var(--hf-line);
  background: #fff;
  color: var(--hf-ink);
}

body #app .hf-bmap__share .hf-bmap__email:hover {
  border-color: rgba(0, 121, 92, 0.4);
  color: var(--hf-teal);
}

@media print {
  body:has(#hf-mapping-fence) .hf-bmap__share {
    display: none !important;
  }
}

/* Boundary tool: the measurement applies automatically — style the status chip. */
body #app .hf-bmap__actions .hf-bmap__use--auto {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding-inline: 14px;
  border: 1px solid var(--hf-teal);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 650;
}

body #app .hf-bmap__actions .hf-bmap__use--auto.is-pending {
  border-color: var(--hf-line);
  background: #fff;
  color: var(--hf-ink);
  opacity: 0.75;
}

/* Google map internals: the theme's global "body #app button" skin (teal pill,
   !important everywhere) must not restyle Google's own controls. */
body #app .hf-bmap__canvas .gm-style button:not([style*="display: none"]) {
  display: inline-block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #565656 !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
}

/* Buttons Google hides inline must STAY hidden — the theme's !important
   display would otherwise force them visible as empty white chips. */
body #app .hf-bmap__canvas .gm-style button[style*="display: none"] {
  display: none !important;
}

/* Google controls we don't want: the marker-drag undo chip, the collapsed
   "Map Data" attribution toggle, and the keyboard-shortcuts footer button. */
body #app .hf-bmap__canvas .gm-style [aria-label="Undo last edit"],
body #app .hf-bmap__canvas .gm-style [title="Undo last edit"],
body #app .hf-bmap__canvas .gm-style button[aria-label="Map Data"],
body #app .hf-bmap__canvas .gm-style button[aria-label="Keyboard shortcuts"] {
  display: none !important;
}

/* Higher specificity than the button reset above so the hide always wins. */
body #app .hf-bmap__canvas .gm-style button[aria-label="Undo last edit"],
body #app .hf-bmap__canvas .gm-style button[title="Undo last edit"] {
  display: none !important;
}

/* Google's Map/Satellite switcher: readable sizing on top of the button
   reset above, and a clearly bold selected state. */
body #app .hf-bmap__canvas .gm-style .gm-style-mtc button {
  padding: 0 14px !important;
  font-size: 12px !important;
}

body #app .hf-bmap__canvas .gm-style .gm-style-mtc button[aria-checked="true"] {
  color: #111 !important;
  font-weight: 700 !important;
}

/* Mapping Fence page (id 161215): trim the block-theme title template's
   oversized spacers so the heading isn't marooned in whitespace. */
body.page-id-161215 main > .wp-block-group > .wp-block-spacer:first-of-type {
  height: var(--wp--preset--spacing--20) !important;
}

body.page-id-161215 main > .wp-block-group > .wp-block-spacer:last-of-type {
  height: var(--wp--preset--spacing--10) !important;
}

body.page-id-161215 .wp-block-post-title {
  margin-top: 0;
  margin-bottom: 0;
}

/* Inline layout-example gallery: the examples ride the compact
   .hf-blay__carousel (one card in view, arrows + dots + swipe) so the
   gallery no longer stacks five tall cards down the page — same markup on
   the standalone Mapping Fence page and Step 6 of the configurator. */
body #app .hf-blay--inline {
  width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
}

/* Standalone Mapping Fence page only: break out of the constrained content
   column to span the full page width. Inside the configurator's Step 6 card
   the gallery stays put and simply fills the box. */
body #app #hf-mapping-fence .hf-blay--inline {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 clamp(16px, 4vw, 44px);
}

body #app .hf-blay--inline .hf-blay__q {
  max-width: 660px;
  margin: 0 auto 14px;
  text-align: center;
}

/* Wider than the base 660px so the neighbouring cards can peek in. */
body #app .hf-blay--inline .hf-blay__carousel {
  width: min(100%, 1080px);
}

/* Track: horizontal swipes drive the carousel, the page still scrolls. */
body #app .hf-blay--inline .hf-blay__track {
  touch-action: pan-y;
  align-items: stretch;
}

body #app .hf-blay--inline .hf-blay__track img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Centre-mode slides: narrower than the viewport so neighbours peek in from
   the sides. On wide containers two cards fit at once (47% each) and the JS
   shows them as a pair; below that it's one centred card. The JS measures
   these widths, so the @container steps just work. The padding is the gutter
   between visible cards (box-sizing keeps it inside the flex-basis). */
body #app .hf-blay--inline .hf-blay__slide {
  flex: 0 0 88%;
  box-sizing: border-box;
  padding: 0 9px;
  opacity: 0.45;
  transform: scale(0.94);
  transition: opacity 460ms ease, transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

@container (min-width: 620px) {
  body #app .hf-blay--inline .hf-blay__slide {
    flex-basis: 72%;
  }
}

@container (min-width: 700px) {
  body #app .hf-blay--inline .hf-blay__slide {
    flex-basis: 47%; /* two in view — covers the configurator's Step 6 column too */
  }
}

body #app .hf-blay--inline .hf-blay__slide.is-active {
  opacity: 1;
  transform: none;
}

/* Slides stretch to the tallest card so the carousel keeps one height. */
body #app .hf-blay--inline .hf-blay__ex {
  height: 100%;
  box-sizing: border-box;
}

/* Dots + count sit under the card here — bottom-right overlay would cover
   the cable legend. */
body #app .hf-blay--inline .hf-blay__pager {
  position: static;
  display: flex; /* block-level so the auto margins actually centre it */
  width: max-content;
  margin: 12px auto 0;
  background: transparent;
  box-shadow: none;
}

body #app .hf-blay--inline .hf-blay__ex {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 20px 20px 14px;
  border: 1px solid var(--hf-line);
  border-radius: 16px;
  background: #fff;
}

body #app .hf-blay--inline .hf-blay__extitle {
  font-size: 18px;
  color: var(--hf-ink);
}

body #app .hf-blay--inline .hf-blay__exdesc {
  margin: 0;
  font-size: 14px;
}

body #app .hf-blay--inline .hf-blay__eximg {
  width: 100%;
  height: auto;
  margin-top: 4px;
  border-radius: 12px;
}

body #app .hf-blay--inline .hf-blay__legend {
  margin: 6px 0 0;
}

body #app .hf-blay--inline .hf-blay__cta {
  display: block;
  width: 100%;
  max-width: 660px; /* hug the carousel column */
  margin: 22px auto 6px;
}

/* Boundary tool: right-click menu on a map corner (appended to <body>, so it
   sits outside #app and away from the theme's global button styling). */
.hf-vtxmenu {
  position: fixed;
  z-index: 100000;
  min-width: 190px;
  padding: 4px;
  background: #fff;
  border: 1px solid #d9dee0;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(24, 33, 39, 0.22);
  overflow: hidden;
}

.hf-vtxmenu .hf-vtxmenu__item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  background: #fff;
  color: #26323a;
  font: 600 13px/1.2 Arial, sans-serif;
  text-align: left;
  cursor: pointer;
}

.hf-vtxmenu .hf-vtxmenu__item:hover {
  background: #eef3f1;
}

/* --- Map coach: guided walkthrough above the plotting map. ----------------- */
/* Injected by boundary-map.js as .hf-coach (progress chips + one auto-
   advancing instruction card). updateSteps() drives chip .is-done/.is-current,
   swaps the card copy per state, and pulses the Transmitter button when that
   step is current. The old static .hf-bmap__note is superseded and hidden. */
body #app .hf-bmap__mapwrap .hf-bmap__note {
  display: none;
}
body #app .hf-coach {
  margin: 0 0 14px;
  text-align: left;
}
body #app ol.hf-coach__chips {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body #app .hf-coach__chips li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: #f1efe8;
  color: #8a948f;
}
body #app .hf-coach__chips li::before {
  content: "1";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: #cfd6d2;
  color: #fff;
}
body #app .hf-coach__chips li[data-step="boundary"]::before { content: "2"; }
body #app .hf-coach__chips li[data-step="tx"]::before { content: "3"; }
body #app .hf-coach__chips li[data-step="zones"]::before { content: "4"; }
body #app .hf-coach__chips li.is-done {
  background: #e7f2ea;
  color: #2f6d45;
}
body #app .hf-coach__chips li.is-done::before {
  content: "\2713";
  background: #3b8054;
}
body #app .hf-coach__chips li.is-current {
  background: var(--hf-teal, #00795C);
  color: #fff;
}
body #app .hf-coach__chips li.is-current::before {
  background: rgba(255, 255, 255, 0.25);
}
body #app .hf-coach__card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  padding: 13px 16px;
  border-radius: 12px;
  background: #fdf9ef;
  border: 1.5px solid #e7d9a8;
}
body #app .hf-coach__big {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--hf-teal, #00795C);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 16px;
  flex: 0 0 auto;
}
body #app .hf-coach--done .hf-coach__big {
  background: #3b8054;
}
body #app .hf-coach__txt {
  flex: 1 1 240px;
  font-size: 15px;
  line-height: 1.45;
  color: #26323a;
}
body #app .hf-coach__head {
  display: block;
  font-weight: 700;
  font-size: 15.5px;
}
body #app .hf-coach__sub {
  display: block;
  margin-top: 2px;
  color: #6d7a74;
  font-size: 12.5px;
}
body #app .hf-coach__sub em {
  font-style: normal;
  font-weight: 700;
  color: var(--hf-teal, #00795C);
}
body #app .hf-coach__demo {
  flex: 0 0 auto;
  margin-left: auto;
}
.hf-coach__tap {
  animation: hfCoachTap 2.2s infinite;
}
@keyframes hfCoachTap {
  0%, 20% { opacity: 0; }
  30%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
body #app button.hf-bmap__tx.hf-coach-pulse {
  background: var(--hf-teal, #00795C) !important;
  border-color: var(--hf-teal, #00795C) !important;
  color: #fff !important;
  animation: hfCoachPulse 1.6s ease-in-out infinite;
}
@keyframes hfCoachPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 121, 92, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(0, 121, 92, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hf-coach__tap,
  body #app button.hf-bmap__tx.hf-coach-pulse {
    animation: none;
  }
}

/* All headings run semibold site-wide (theme.json heading weight also raised
   300 -> 600; this rule guarantees it over cached global styles and any
   inline weights left in legacy content). */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
}

/* Google review cards on /testimonials/. The theme's JS builds the cards, so
   these only need to style the two extra pieces the reviews carry: the star
   row and the customer's own photo. Both selectors are doubled to outrank the
   .hf-testimonial-card__quote class the JS stamps onto every <p>. */
.hf-testimonial-card .hf-review-stars.hf-review-stars {
  margin: 0 0 10px;
  /* !important: a long body.page:not(...) chain later in this file sets the
     body copy colour and outranks anything reasonable on specificity alone. */
  color: #f5a623 !important;
  font-size: 15px;
  letter-spacing: 3px;
  line-height: 1;
}

.hf-testimonial-card .hf-review-photo.hf-review-photo {
  margin: 16px 0 0;
}

.hf-testimonial-card .hf-review-photo img {
  display: block;
  width: auto;
  max-width: min(100%, 210px);
  max-height: 260px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* "Client's Pet" gallery on /testimonials/ — replaces the old <table> layout,
   which could only ever be one rigid row width and collapsed to a single
   column on phones. Source photos are small legacy files (~150px wide), so the
   tile size is capped rather than stretched full-bleed to avoid upscaling. */
.hf-testimonial-gallery .hf-pet-gallery {
  display: grid;
  /* The gallery <section> is itself a grid, so this div lands as a grid ITEM
     and would otherwise shrink to its content (~276px). Span every track and
     stretch to claim the full width. */
  grid-column: 1 / -1;
  justify-self: stretch;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  /* Capped: the source photos are ~150px wide, so wider tiles just upscale. */
  max-width: 780px;
  margin: 0;
}

/* !important: the theme's vertical rhythm puts a 42px block margin on figures,
   which would show up here as a huge gap between the two rows. */
.hf-testimonial-gallery .hf-pet-gallery figure {
  margin: 0 !important;
}

.hf-testimonial-gallery .hf-pet-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(0, 70, 53, 0.05);
}

@media (max-width: 860px) {
  .hf-testimonial-gallery .hf-pet-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .hf-testimonial-gallery .hf-pet-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* Two stacked CTAs in the geo band. They live in their own wrapper so the
   aside's large space-between gap separates the GROUP from the tick list and
   logo, rather than pushing the two buttons apart from each other. */
.hf-geo__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.hf-geo__ctas .hf-geo__cta {
  justify-content: center;
}

@media (max-width: 900px) {
  .hf-geo__ctas {
    align-items: flex-start;
  }
}

/* Optional background video on a page hero (see hiddenfence_2024_page_hero_videos).
   Layering, back to front: video (-2) -> gradient scrim (-1) -> title. The hero
   image moves onto the video wrapper so it acts as the poster until the iframe
   paints, and remains the fallback if the embed is ever blocked. */
.hf-page-hero--video .hf-page-hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background-image: var(--hf-page-hero-image);
  background-position: center;
  background-size: cover;
}

/* Scale a 16:9 iframe so it always covers the banner, whichever way the box
   is proportioned — vw drives it on wide screens, vh on tall/narrow ones. */
.hf-page-hero--video .hf-page-hero__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100%;
  border: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Drop the image from the scrim layer so it doesn't sit over the video, and
   keep the gradients that hold the title legible. */
.hf-page-hero--video::before {
  z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(4, 31, 25, 0.72), rgba(4, 31, 25, 0.38) 46%, rgba(4, 31, 25, 0.08)),
    linear-gradient(180deg, rgba(150, 120, 78, 0.05), rgba(0, 75, 57, 0.42));
}

@media (prefers-reduced-motion: reduce) {
  .hf-page-hero--video .hf-page-hero__video iframe {
    display: none;
  }
}

/* Larger screens: the hero button labels grow with the viewport (font-size is
   a vw clamp) while the grid was pinned at 600px, so by 1440px the longest
   label ("Professional Install / Training", 278px) was wider than the 251px
   between its paddings and ran to the very edge. Widen the grid and open the
   side padding so every label sits comfortably inside. */
@media (min-width: 1100px) {
  body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-buttons {
    width: min(100%, 760px);
    gap: 12px;
  }

  body.home.page-id-35241 .entry-content > .wp-block-nk-awb .wp-block-button__link {
    padding: 18px 34px !important;
  }
}

/* Hero poster frame. The AWB wrap carries an inline background colour, so the
   poster goes on its inner layer, which sits behind the video iframe. Until
   Vimeo has loaded and started, the hero shows the video's own first frame
   instead of flat brand green; the iframe then fades in over the top. */
body.home.page-id-35241 .entry-content > .wp-block-nk-awb .nk-awb-inner {
  background-image: var(--hf-hero-poster, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}