/* ========================================================================= Super Fence 2026 — base, header, footer, page chrome ------------------------------------------------------------------------- Ported from the Elementor kit's Custom CSS (post-963.css, 3 Oct 2026). Rules targeting `.elementor-element-` are NOT carried over verbatim — those IDs die with Elementor. Their visual result is reproduced here against semantic class names, which the new templates emit. ========================================================================= */ :root { /* Palette — from the kit's own :root block. */ --sf-navy: #005784; --sf-navy-light: #0A6E9E; --sf-steelblue: #2F8FBF; --sf-orange: #FF6B35; --sf-orange-dark: #e85d29; --sf-text: #12233D; --sf-text-sec: #5B6B82; /* Aliases used through this stylesheet. */ --sf-ink: var(--sf-text); --sf-muted: var(--sf-text-sec); --sf-border: #E4E7EC; --sf-fill: #F7F8FA; --sf-price: #a90832; --sf-in-stock: #1F8A4C; --sf-out-stock: #C0392B; --sf-radius-sm: 8px; --sf-radius: 12px; --sf-radius-lg: 14px; /* Layout — the live site caps content at 1600 with a responsive gutter. */ --sf-maxw: 1600px; --sf-gut: 56px; } @media (max-width: 960px) { :root { --sf-gut: 24px; } } @media (max-width: 600px) { :root { --sf-gut: 14px; } } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--sf-fill); color: var(--sf-text); font-family: 'Manrope', Arial, sans-serif; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* The kit forced Manrope onto every element with a specificity hack because it was fighting Elementor's own typography. Without Elementor, inheritance from body is enough — except for form controls, which do not inherit. */ input, select, textarea, button { font-family: inherit; } img { max-width: 100%; height: auto; } a { color: var(--sf-navy); } h1, h2, h3, h4, h5, h6 { line-height: 1.25; } /* Shared horizontal rhythm: full-bleed background, content capped at 1600. */ .sf-bleed { padding-left: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2)); padding-right: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2)); } .sf-wrap { max-width: var(--sf-maxw); margin: 0 auto; padding-left: var(--sf-gut); padding-right: var(--sf-gut); } .sf-h1 { font-size: 34px; font-weight: 800; color: var(--sf-navy); letter-spacing: -.01em; line-height: 1.15; margin: 0 0 8px; } .sf-skip { position: absolute; left: -9999px; } .sf-skip:focus { left: 12px; top: 12px; z-index: 999; background: #fff; padding: 10px 16px; border-radius: var(--sf-radius-sm); box-shadow: 0 6px 18px rgba(18, 35, 61, .18); } /* ===== Header ============================================================ */ .sfh, .sfh * { box-sizing: border-box; } .sfh a { text-decoration: none; color: inherit; } .sfh { line-height: 1.55; } .sf-topbar { background: var(--sf-navy); color: #B7C4D8; font-size: 13px; display: flex; justify-content: space-between; align-items: center; padding-top: 9px; padding-bottom: 9px; padding-left: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2)); padding-right: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2)); } .sf-topbar .sf-phone { color: #FFFFFF; font-weight: 700; } .sf-header { background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--sf-border); gap: 24px; padding-top: 18px; padding-bottom: 18px; padding-left: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2)); padding-right: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2)); } .sf-logo img { height: 38px; width: auto; display: block; } .sf-nav { display: flex; gap: 34px; align-items: center; } .sf-nav > a, .sf-drop-t { font-size: 14px; font-weight: 500; color: var(--sf-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .sf-nav > a:hover, .sf-drop:hover .sf-drop-t, .sf-drop-t:focus { color: var(--sf-navy); } .sf-nav > a[aria-current="page"] { color: var(--sf-navy); font-weight: 700; } .sf-drop { position: relative; } .sf-menu { position: absolute; top: 100%; left: 0; min-width: 210px; max-width: min(360px, calc(100vw - 32px)); background: #FFFFFF; border: 1px solid var(--sf-border); border-radius: 10px; padding: 8px; box-shadow: 0 12px 28px rgba(18, 35, 61, .12); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease; z-index: 50; } .sf-drop:hover .sf-menu, .sf-drop:focus-within .sf-menu, .sf-drop.is-open .sf-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* One line per item: the panel grows to fit the longest name ("Outdoor Dog Enclosures & Runs") instead of wrapping it. max-width keeps a very long future category from running off the screen. */ .sf-menu a { display: block; padding: 9px 12px; border-radius: 7px; font-size: 14px; font-weight: 500; color: var(--sf-text); white-space: nowrap; } .sf-menu a:hover { background: #EAF1F8; color: var(--sf-navy); } .sf-actions { display: flex; gap: 12px; align-items: center; } .sf-btn { display: inline-block; padding: 11px 20px; font-weight: 700; font-size: 14px; border-radius: var(--sf-radius-sm); white-space: nowrap; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; } a.sf-btn-outline { background: transparent; border-color: var(--sf-border); color: var(--sf-navy); } a.sf-btn-outline:hover { border-color: var(--sf-navy); } a.sf-btn-primary { background: var(--sf-orange); color: #FFFFFF; border-color: var(--sf-orange); } a.sf-btn-primary:hover { background: var(--sf-orange-dark); border-color: var(--sf-orange-dark); color: #FFFFFF; } a.sf-btn-cart { background: transparent; border-color: var(--sf-border); color: var(--sf-navy); } a.sf-btn-cart:hover { border-color: var(--sf-navy); } .sf-cart-count { display: inline-block; margin-left: 4px; font-weight: 800; } .sf-nav-toggle { display: none; } .sf-nav-btn { display: none; width: 44px; height: 44px; flex: 0 0 auto; border: 1.5px solid var(--sf-border); border-radius: var(--sf-radius-sm); align-items: center; justify-content: center; cursor: pointer; font-size: 20px; color: var(--sf-navy); } .sf-search { display: flex; align-items: center; background: #F2F5F8; border: 1.5px solid var(--sf-border); border-radius: var(--sf-radius-sm); overflow: hidden; height: 40px; } .sf-search input { border: none; background: transparent; padding: 0 10px; font-size: 13px; color: var(--sf-text); width: 150px; outline: none; } .sf-search input::placeholder { color: #9AA5B4; } .sf-search button { border: none; background: transparent; color: var(--sf-navy); cursor: pointer; padding: 0 10px; font-size: 15px; height: 100%; display: flex; align-items: center; } .sf-search button:hover { color: var(--sf-orange); } @media (max-width: 960px) { .sf-topbar { font-size: 12px; } .sf-header { flex-wrap: wrap; gap: 14px; padding-top: 14px; padding-bottom: 14px; } .sf-logo { order: 1; margin-right: auto; } .sf-nav-btn { display: inline-flex; order: 2; } .sf-nav { display: none; order: 4; width: 100%; flex-direction: column; gap: 0; align-items: stretch; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--sf-border); } .sf-nav > a, .sf-drop-t { padding: 12px 4px; border-bottom: 1px solid #F0F2F5; } .sf-drop { position: static; } .sf-menu { position: static; opacity: 1; visibility: visible; transform: none; border: none; box-shadow: none; padding: 0 0 6px 14px; min-width: 0; max-width: none; border-radius: 0; } /* Stacked under the header on small screens, so wrapping is correct there. */ .sf-menu a { padding: 8px 4px; white-space: normal; } .sf-nav-toggle:checked ~ .sf-nav { display: flex; } .sf-actions { order: 3; gap: 8px; } .sf-btn { padding: 9px 14px; font-size: 13px; } } /* Header search becomes its own full-width row before the nav collapses. */ @media (max-width: 782px) { .sf-actions { flex-wrap: wrap; row-gap: 8px; } .sf-actions .sf-search { order: 9; flex: 1 0 100%; width: 100% !important; max-width: 100% !important; margin-top: 2px; height: 42px; } .sf-actions .sf-search input { flex: 1; width: auto !important; } } @media (max-width: 600px) { /* One line, phone only — the delivery message is dropped rather than wrapped. */ .sf-topbar { flex-direction: row; justify-content: center; gap: 0; text-align: center; padding-top: 7px; padding-bottom: 7px; } .sf-topbar > span:first-child { display: none; } .sf-topbar .sf-phone { font-size: 12px; } .sf-actions { width: 100%; order: 5; margin-top: 4px; } .sf-actions .sf-btn { flex: 1; text-align: center; } } /* Phone number as a small tappable pill on phones, as production. */ @media (max-width: 520px) { .sf-topbar .sf-phone a { display: inline-block; padding: 4px 10px; } } /* ===== Breadcrumb ======================================================== */ .sf-crumb { padding-left: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2)); padding-right: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2)); padding-top: 24px; padding-bottom: 16px; font-size: 13px; color: var(--sf-muted); } /* * Shop and category archives. Production puts the breadcrumb 64px below the * header in WooCommerce's own grey (#767676) at 13.8px — .92em of a 15px base — * and starts the sidebar grid 20px under it. The theme had it 24px down at * 11.96px (.92em of 13px), so the whole page sat 40px higher than live. * Scoped to archives: other templates keep the tighter spacing until they are * matched on their own. */ body.archive .sf-crumb { padding-top: 64px; padding-bottom: 20px; font-size: 15px; line-height: 22px; } body.archive .sf-crumb .woocommerce-breadcrumb { color: #767676; margin: 0 0 1em; } /* The Shop page used its own Elementor template (2089): 20px less above the breadcrumb, the crumb indented 20px, and 26px below it — breadcrumb text at 161px and the sidebar/H1 at 223px, against 185/241 on category pages. */ body.woocommerce-shop .sf-crumb { padding-top: 40px; padding-bottom: 26px; } body.woocommerce-shop .sf-crumb .woocommerce-breadcrumb { padding-left: 20px; } @media (max-width: 1024px) { body.woocommerce-shop .sf-crumb { padding-top: 30px; } } body.woocommerce-shop .sf-slay { padding-bottom: 20px; } /* production: 20px from pagination to footer */ /* Tablet and phone (≤1024px, Elementor's breakpoint on production): 46px above the breadcrumb instead of 64, and only 10px between the FAQ and the footer. */ @media (max-width: 1024px) { body.archive:not(.woocommerce-shop) .sf-crumb { padding-top: 46px; } } .sf-crumb a { color: var(--sf-navy); text-decoration: none; } .sf-crumb a:hover { color: var(--sf-orange); } /* ===== Hero ============================================================== */ .sf-hero { position: relative; background: #fff; padding: 48px 0 40px; border-bottom: 1px solid var(--sf-border); } .sf-hero-inner { position: relative; z-index: 2; } .sf-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .sf-hero-bg img { width: 100%; height: 100%; object-fit: cover; } .sf-hero-image::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(18, 35, 61, .72), rgba(18, 35, 61, .35)); } .sf-hero-image .sf-h1, .sf-hero-image .sf-hero-sub, .sf-hero-image .sf-eyebrow { color: #fff; } .sf-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 800; color: var(--sf-navy); margin: 0 0 8px; } .sf-hero-sub { font-size: 15px; color: var(--sf-muted); max-width: 70ch; margin: 0 0 18px; } .sf-hero-cta { margin: 0; } /* ===== Page content ====================================================== */ .sf-content { padding-top: 32px; padding-bottom: 64px; } .sf-content h2 { font-size: 20px; font-weight: 700; color: var(--sf-navy); margin: 32px 0 12px; } .sf-content h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; } .sf-content p { margin: 0 0 16px; } .sf-content a { color: var(--sf-steelblue); font-weight: 600; } /* ===== FAQ (generated from theme fields) ================================= */ .sf-faq { margin: 0 0 56px; } .sf-faq-title { font-size: 20px; font-weight: 800; color: var(--sf-navy); margin: 0 0 16px; } .sf-faq-item { border: 1px solid var(--sf-border); border-radius: var(--sf-radius); margin: 0 0 10px; background: #fff; } .sf-faq-q { cursor: pointer; padding: 16px 18px; font-weight: 700; color: var(--sf-text); list-style: none; } .sf-faq-q::-webkit-details-marker { display: none; } .sf-faq-q::after { content: "+"; float: right; color: var(--sf-navy); font-weight: 800; } .sf-faq-item[open] .sf-faq-q::after { content: "\2212"; } .sf-faq-a { padding: 0 18px 16px; color: var(--sf-muted); } .sf-faq-a p:last-child { margin-bottom: 0; } /* ===== Footer ============================================================ Ported from production's current rendered CSS, read back from the page and verified byte-identical (1,141 bytes, SHA-256 0dd5a2c7…). The theme's first pass came from the July capture (super-fence/wp-live/footer-widget.html), which production has since moved past — same staleness that put the homepage out of step. What changed: .sff-grid 1.6fr 1fr 1fr 1fr -> 2fr 1fr 1fr 1fr, + 40px margin .sff-logo-badge white, padded, round -> transparent, flush, 16px below column heading h2, 13px, UPPERCASE, 800 -> h4, 14px, sentence, 700 .sff-col a padding 5px 0 -> margin-bottom 9px .sff-col-brand p max-width 40ch, lh 1.7 -> max-width 300px, inherits 1.55 Production IS centred on a 1600px column: the kit stylesheet defines :root { --sf-gut: 56px / 24px <960 / 14px <600; --sf-maxw: 1600px } and then `.elementor-location-footer .sff { padding-left/right: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2)) }`, which at 0,2,0 outranks the flat `padding:56px 56px 24px` below. That is reproduced after the ported block. The kit stylesheet goes with Elementor, so the theme owns it. ========================================================================= */ .sff, .sff *{box-sizing:border-box;} .sff a{text-decoration:none;color:inherit;} .sff{font-family:'Manrope',Arial,sans-serif;background:#005784;color:#B7C4D8;font-size:13px;line-height:1.55;padding:56px 56px 24px;} .sff-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;} .sff-logo-badge{background:transparent;display:inline-block;padding:0;border-radius:0;margin-bottom:16px;} .sff-logo-badge img{height:34px;display:block;} .sff-col-brand p{max-width:300px;color:#B7C4D8;} .sff-col h4{color:#FFFFFF;font-size:14px;font-weight:700;margin:0 0 16px;} .sff-col a{display:block;color:#B7C4D8;margin-bottom:9px;font-weight:500;} .sff-col a:hover{color:#FFFFFF;} .sff-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;} .sff-bottom a:hover{color:#FFFFFF;} @media (max-width:960px){ .sff{padding:44px 20px 22px;} .sff-grid{grid-template-columns:1fr 1fr;gap:28px;} } @media (max-width:520px){ .sff-grid{grid-template-columns:1fr;gap:24px;} .sff-bottom{flex-direction:column;align-items:flex-start;gap:8px;} } /* Reproduces the kit's centring override (see the note above). Equal specificity to `.sff` and later in the file, which is what production achieves with its higher-specificity selector. */ .sff { padding-left: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2)); padding-right: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2)); } /* Production's footer logo is a hand-written with no width/height attributes, so `height:34px` alone scales it correctly. The theme renders it through wp_get_attachment_image(), which emits width and height attributes — the width attribute then fights the CSS height and squashes the artwork. `width:auto` restores production's rendered proportions; it is a difference in CSS only because the markup differs. */ .sff-logo-badge img { width: auto; max-width: 100%; } /* Production's .sff declares no heading line-height, so .sff-col h4 inherits 1.55 from .sff. The theme's global h1..h6{line-height:1.25} beats that and rendered the column headings at 17.5px instead of 21.7px. Inherit again, in the footer only. */ .sff h1, .sff h2, .sff h3, .sff h4, .sff h5, .sff h6 { line-height: 1.55; } /* Kept from the theme: production separates the legal links with a pipe via markup; this does it in CSS so the menu stays a plain list. */ .sff-legal a { display: inline-block; } .sff-legal a + a::before { content: "|"; margin: 0 10px; color: rgba(255, 255, 255, .3); } /* Hero label used in place of the H1 when the page content already supplies one (see page.php). Looks identical; it is only a different element. */ .sf-hero-kicker { font-size: 34px; font-weight: 800; color: var(--sf-navy); letter-spacing: -.01em; line-height: 1.15; margin: 0 0 8px; } /* Elementor documents still render their own full-width layout, so the theme must not add a second container around them. */ .sf-legacy-content { display: block; } /* Logo fallback when no custom logo is set in the Customiser. */ .sf-logo-text { font-size: 20px; font-weight: 800; color: var(--sf-navy); letter-spacing: -.01em; white-space: nowrap; } .sff-logo-text { color: var(--sf-navy); font-weight: 800; font-size: 16px; } /* Contact / quote page (.sfc): see assets/css/contact.css, ported verbatim from production and loaded on the Contact / Quote template only. */ /* Visually hidden, still read by screen readers and search engines. */ /* !important on the box so a layout rule on a parent (a flex column that stretches its children, say) cannot give the hidden heading real width and push the page sideways — which is exactly what happened on Promotions. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px !important; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px !important; min-width: 0 !important; max-width: none; word-wrap: normal !important; } /* "Hide the hero band" pages: production served these in a 1600px Elementor section with 60px top/bottom padding and a 10px column gutter (Testimonials: widgets 1580px wide at 155px, first one 60px under the header). */ .sf-content.sf-content-bare { max-width: none; padding: 60px calc(max(10px, (100% - var(--sf-maxw)) / 2) + 10px) 62px; } /* Elementor's tablet / mobile container padding on those pages, measured on production at 800 and 390px. */ @media (max-width: 1024px) { .sf-content.sf-content-bare { padding: 40px 40px 54px; } } @media (max-width: 767px) { .sf-content.sf-content-bare { padding: 20px 20px 35px; } } /* Elementor's 20px widget spacing between stacked blocks (the two review widgets on Testimonials). div ~ div rather than * + *: Trustindex emits and hidden 
 siblings that must not pick up the gap. */
.sf-content.sf-content-bare > div ~ div { margin-top: 20px; }

/* Cattle Crush landing ([sf_cattle_crush], snippet 33). Its section headings
   inherit the body's 1.6 on production; the theme's global h1..h6 1.25 made
   every .sfcc-hd 11px and every card 12px shorter. */
.sfcc h2, .sfcc h3, .sfcc h4 { line-height: 1.6; }

/* =========================================================================
   Promotions page (.sfpr) — rebuilt from production's Elementor layout,
   measured at 1905px: a black container the width of the 1600px column plus
   gutters (1712px), a 1280px banner band (50px/80px padding, image then a
   20px white line 20px below it), then one #F1F1F1 box per range (1280px,
   50px 21px 10px padding, 20px gaps, 20px above / 50px below — flex, so the
   margins add up to 70px between boxes rather than collapsing), with
   WooCommerce's own 5-column float grid inside (210px cards, 47px gutters).
   ========================================================================= */
.sfpr { background: #000; max-width: calc(var(--sf-maxw) + 2 * var(--sf-gut)); margin: 0 auto; padding: 0 10px 50px; line-height: 22px; display: flex; flex-direction: column; }
.sfpr > section { width: 100%; }
.sfpr-band { max-width: 1280px; margin: 0 auto; padding: 50px 0 80px; text-align: center; }
.sfpr-band img { display: block; width: 100%; height: auto; margin: 0 0 20px; }
.sfpr-band p { color: #fff; font-size: 20px; line-height: 22px; margin: 0; }
.sfpr-box { max-width: 1280px; margin: 20px auto 50px; background: #F1F1F1; padding: 50px 21px 10px; display: flex; flex-direction: column; gap: 20px; }
.sfpr-box > h2 { font-size: 30px; font-weight: 600; line-height: 30px; color: #000; margin: 0; }
.sfpr-box .woocommerce ul.products { margin-bottom: 15px; }
.sfpr-more { text-align: center; margin: 0; padding: 0 0 50px; }
.sfpr-btn { display: inline-block; background: #F76400; color: #fff; font-size: 15px; font-weight: 500; line-height: 15px; padding: 12px 24px; border-radius: 3px; text-decoration: none; }
.sfpr-btn:hover { color: #fff; filter: brightness(1.05); }
/* Production keeps the desktop spacing on phones; only the banner band runs
   edge to edge once the screen is narrower than the 1280px band. */
@media (max-width: 1300px) { .sfpr > .sfpr-band { margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); } }
@media (min-width: 768px) and (max-width: 1024px) { .sfpr-box { padding-left: 31px; padding-right: 31px; } } /* Elementor tablet padding */

/* Snippet 62 — no scroll-snap anywhere (smoother scrolling). The Elementor
   selectors it also covered no longer exist. */
html,body{scroll-snap-type:none !important;}