/*
Theme Name:     Neighborhood - HookLoom
Theme URI:      http://themeforest.net/
Description:    Child theme for the Neighborhood theme
Template:       neighborhood
Version:        2.2
*/

:root {
	/* Interaction feel. Both exist to be tweaked in one place rather than hunted for. */
	--hal-transition-speed: 0.3s;
	--hal-hover-brightness: 0.85;   /* oklch lightness multiplier on hover */
	/* Underline strength at rest. 0.35 was too pale to read as a coloured line — it composites to
	   #C9D1B1 on white, 1.53:1, which is why it kept getting reported as "grey". 0.65 is the first
	   step that reads as a line rather than a smudge (2.63:1 on white, 2.42:1 on the #f0f0f0 home
	   boxes). Measured, not guessed: plans/a11y/docs/screenshot/t-042-underline-variants.png. */
	--hal-color-link-opacity: 0.65;
	/* Underline geometry. Thickness applies to the HOVER/FOCUS state; at rest the line stays `auto` so
	   it scales with the font. Offset was a 4px literal repeated in four rules — same drift risk as the
	   colour, so it lives here too. */
	--hal-link-underline-thickness: 1px;
	--hal-link-underline-offset: 4px;

	--hal-color-white: #fff;
	--hal-color-black: #000;

	--hal-color-brand: #677C22;
	--hal-color-brand-hover: #65801B;
	--hal-color-brand-dark: #576c1c;
	/* Deepest brand green. Exists for the home-box overlays (t-002), where the panel is translucent
	   over a photograph and every lighter green fails 1.4.3 — see the overlay tokens below. */
	--hal-color-brand-deep: #455A0D;
	--hal-color-brand-mid: #8fae1b;
	--hal-color-focus: var(--hal-color-brand); /* keyboard focus indicator (t-017) */
	--hal-color-brand-bright: #a2c233;
	--hal-color-brand-light: #b4d445;
	--hal-color-brand-tint: #E0E9C0;
	--hal-color-accent: #c0d577;

	/* Body-copy link colour. 4.82:1 on white, 4.51:1 on the checkout #f7f9e8 panel. */
	--hal-color-brand-link: #657a20;
	--hal-color-brand-link-line: var(--hal-color-brand-link);

	/* THE TWO PAINTED UNDERLINE COLOURS. Derived here once so that no rule ever restates the
	   `rgb(from …)` expression — that is exactly how the underline drifted out of sync across the
	   four places that set it, leaving cart links pale on hover while their text darkened. Any rule
	   that draws a link underline uses one of these two and nothing else. */
	--hal-color-link-underline: rgb(from var(--hal-color-brand-link-line) r g b / var(--hal-color-link-opacity));
	--hal-color-link-underline-hover: var(--hal-color-brand-link-line);

	/* The light green is ONLY legible on dark surfaces — 2.04:1 on white, 7.52:1 on #252525. Named for
	   the surface rather than the role so it cannot be reached for on a white background by mistake,
	   which is how the homepage h1 ended up unreadable. */
	/* Lightened from --hal-color-brand-bright #a2c233 (7.52:1) to #C8E05A on 2026-08-06 — Eric:
	   "that green needs to be a lighter green that pops more". 10.41:1 on #252525. */
	--hal-color-brand-on-dark: #C8E05A;

	--hal-color-link-accent: var(--hal-color-brand-bright);
	--hal-color-link-strong: var(--hal-color-brand);
	/* On WHITE sub-menus — the bright green is 2.03:1 there. (t-042) */
	--hal-color-nav-current: var(--hal-color-brand-link);
	--hal-color-nav-hover: var(--hal-color-brand-hover);
	--hal-color-nav-eco-hover: var(--hal-color-link-accent);
	--hal-color-header-accent: var(--hal-color-brand);
	/* Section headings in the home boxes and on the eco/organics pages, all on WHITE. The light green
	   keeps --hal-color-brand-on-dark for the surfaces where it actually belongs. (t-042) */
	--hal-color-heading-accent: var(--hal-color-brand-link);
	--hal-color-heading-strong: var(--hal-color-brand);
	--hal-color-badge-bg: var(--hal-color-brand-bright);
	--hal-color-soft-action-bg: var(--hal-color-brand-light);
	--hal-color-cta-bg: var(--hal-color-brand);
	--hal-color-cta-bg-hover: var(--hal-color-brand-hover);
	--hal-color-cta-gradient-start: var(--hal-color-brand-light);
	--hal-color-cta-gradient-end: var(--hal-color-brand-bright);
	/* t-002: the home-box overlay is TRANSLUCENT over a photo, so its declared colours are not what
	   gets painted — `opacity` composites both the panel and its text with the image behind. At the
	   old 0.7 / #65801B the painted ratio was 2.85:1 and 2.73:1 against a 4.5 requirement, and no
	   plausible green passes at 0.7 (the darkest tried, #455A0D, still only reaches 3.79). Eric's
	   call: opacity 0.8 + this deeper green = 4.77:1. Kept OFF --hal-color-brand-hover on purpose —
	   that token also drives nav hover, CTA backgrounds, section accents and product hover, none of
	   which sit on a photograph. Rest and hover use the same pair swapped, so both states measure
	   identically and one value fixes both. */
	--hal-color-overlay-link: var(--hal-color-brand-deep);
	--hal-color-overlay-bg-hover: var(--hal-color-brand-deep);
	--hal-color-section-accent-bg: var(--hal-color-brand-hover);
	--hal-color-product-hover: var(--hal-color-brand-hover);
	--hal-color-status-accent: var(--hal-color-brand);
	--hal-color-review-rating-high: var(--hal-color-brand);

	--hal-color-text: #333;
	--hal-color-text-soft: #444;
	--hal-color-text-mid: #555;
	--hal-color-text-muted-strong: #666;
	/* Lightest grey that still clears 4.5:1 on our lightest surface (#f0f0f0, the homepage body).
	   Was #6f6f6f, which cleared white and #f7f7f7 but not #f0f0f0 (4.41:1). t-043. */
	--hal-color-text-muted: #6d6d6d;
	/* NOT usable for text: 2.85:1 on white, 2.50:1 on #f0f0f0 — fails 1.4.3 on every surface we
	   have. Kept for the decorative homepage overlay border only; text moved to -muted (t-043). */
	--hal-color-text-subtle: #999;
	/* NOT usable for text: 2.32:1 on white, 2.17:1 on the #f7f7f7 even rows. Decorative use only
	   (borders, rules). Every text use moved to -muted (t-102). */
	--hal-color-text-faint: #aaa;
	/* Muted text on the black footer: #666 was 3.66:1. 6.25:1, still clearly secondary. t-043. */
	--hal-color-text-on-dark: #8c8c8c;
	--hal-color-ink: #2e2e36;

	--hal-color-surface: #f7f7f7;
	--hal-color-surface-alt: #f0f0f0;
	--hal-color-surface-raised: #fcfcfc;
	--hal-color-surface-green: #e9f1da;
	--hal-color-surface-cool: #e8e8e8;

	--hal-color-border: #d8d8d8;
	--hal-color-border-light: #eaeaea;
	--hal-color-border-subtle: #e4e4e4;
	--hal-color-border-muted: #ddd;
	--hal-color-border-mid: #e0e0e0;
	--hal-color-border-strong: #c8c8c8;

	/* Soft-green action surface. Label moved #666 -> #333 on 2026-08-06 (Eric): at 4.54:1 the old
	   pair cleared 1.4.3 by 0.04 but READ as disabled, especially against iOS Safari's thinner
	   stems. #333 on #E0E9C0 is 9.98:1. Surface unchanged. */
	--hal-color-action-bg: var(--hal-color-brand-tint);
	/* Action hover. Darkens the SURFACE a step and the label to #333 rather than swapping the button
	   to a different green — on a pale tint a hue change reads as a state change, not a hover.
	   #333 on #D3DFA8 is 8.74:1, so the hover has room the rest state does not. */
	--hal-color-action-bg-hover: #D3DFA8;
	/* Translucent brand-green washes, used as a hover surface on the product tabs. Kept as their own
	   tokens rather than raw hex; over white they composite to #d0de9b, which is 8.79:1 with #333. */
	--hal-color-brand-wash: #9ab82877;
	--hal-color-brand-wash-line: #9ab828b8;
	--hal-color-action-text: var(--hal-color-text);
	/* Flat neutral for the secondary partner beside an action button (View Cart). Deliberately light
	   so it stays behind the green primary rather than competing with it. 10.99:1 with
	   --hal-color-ink; its border is derived, so lightening this carries the border with it. */
	--hal-color-action-secondary-bg: #E8E8E8;
	--hal-color-action-secondary-bg-hover: #DCDCDC;

	/* Button borders are derived from each button's OWN surface, so a surface change carries its
	   border with it instead of leaving a fixed grey behind. Derived once here, per the rgb(from …)
	   note above. These static values are the fallback; the @supports block restates them relative. */
	--hal-button-border-darkness: 0.9;
	--hal-color-action-border: #c2cba3;
	--hal-color-action-border-hover: #b7c28c;
	--hal-color-action-secondary-border: #cacaca;
	--hal-color-action-secondary-border-hover: #bfbfbf;
	/* The label for states you CANNOT act on — sold out only. Stays #666 so "unavailable" keeps
	   reading as recessive now that the buy label is #333. 4.60:1 on --hal-color-no-stock-bg. */
	--hal-color-state-text: var(--hal-color-text-muted-strong);
	/* iOS Safari renders these small uppercase labels noticeably thinner than desktop, which is what
	   made the buy button read as disabled. Weight is the other half of the fix, with the colour. */
	--hal-action-font-weight: 600;

	--hal-color-success-bg: #d9f2b0;
	--hal-color-success-icon: var(--hal-color-brand-mid);
	--hal-color-success-action-border: var(--hal-color-brand);
	--hal-color-info-bg: #F7F9E8;
	--hal-color-error-bg: #E4A879;
	--hal-color-danger: #CB2027;
	--hal-color-danger-bg: #D66166;
	/* t-092: was #e82d57 — 4.25:1 on white, a 1.4.3 failure for the sale PRICE (ins span.amount).
	   #A11838 is 7.77:1. The sale BADGE no longer uses this token; it has its own pair below. */
	--hal-color-sale: #A11838;
	/* Sale badge/ribbon. Alpha is baked into the hex so the ribbon stays translucent over the
	   product photo without fading its own text via opacity. */
	--hal-color-sale-badge-bg: #e7584de9;
	--hal-color-sale-badge-text: #222;
	--hal-color-form-border: var(--hal-color-text-muted);
	--hal-color-checkout-divider: var(--hal-color-surface);

	/* Variations-table stock surfaces. FLIPPED to light 2026-08-03 (Eric, t-057): they were dark
	   surfaces carrying white 12px labels, which — once the buy button moved to the pale action pair
	   — made the two states you CANNOT buy in the most prominent controls in the table. Now all three
	   states are light surfaces sharing one label colour, --hal-color-action-text #666, and the state
	   is carried by HUE alone: green buy, grey sold out, blue backorder. That keeps t-044's "three
	   hues, not three shades" while restoring the buy action to the front.

	   Each is measured against #666, not eyeballed: the surface has to stay light enough for 4.5:1 at
	   12px, which puts a floor on how far these can be tinted toward their hue. */
	--hal-color-backorder-bg: #DCE9F1;   /* 4.64:1 with #666. was #4a7891 white-on-dark, was #578DA9 3.62:1 */
	--hal-color-no-stock-bg: #E6E6E6;    /* 4.60:1 with #666. was #707070 white-on-dark, was #888    3.54:1 */
	/* Hover partners, one step darker, with #333 — same relationship the action pair uses. */
	--hal-color-backorder-bg-hover: #C9DCE9;
	--hal-color-no-stock-bg-hover: #D8D8D8;
	/* Disabled keeps its own darkness: the border is there to define the shape, not to add contrast
	   to a control you cannot use, so it sits much closer to the surface than the active one. */
	--hal-button-border-darkness-disabled: 0.97;
	--hal-color-action-border-disabled: #d5ddb6;
}

/* The border colours above, restated as derivations of their own surface. In its own @supports so a
   browser that cannot parse relative colour keeps the static fallbacks rather than losing the whole
   declaration to invalid-at-computed-value-time, which resolves to currentColor — a heavy dark border. */
@supports (color: oklch(from #fff calc(l * 0.9) c h)) {
	:root {
		--hal-color-action-border: oklch(from var(--hal-color-action-bg) calc(l * var(--hal-button-border-darkness)) c h);
		--hal-color-action-border-hover: oklch(from var(--hal-color-action-bg-hover) calc(l * var(--hal-button-border-darkness)) c h);
		--hal-color-action-secondary-border: oklch(from var(--hal-color-action-secondary-bg) calc(l * var(--hal-button-border-darkness)) c h);
		--hal-color-action-secondary-border-hover: oklch(from var(--hal-color-action-secondary-bg-hover) calc(l * var(--hal-button-border-darkness)) c h);
		--hal-color-action-border-disabled: oklch(from var(--hal-color-action-bg) calc(l * var(--hal-button-border-darkness-disabled)) c h);
	}
}

/* GENERAL STYLES */

/* Base Styles (overridden from neighborhood style.css) */

/* end base styles */

/* fix bg color FOUC */
body {background-color: var(--hal-color-white)!important;}
body.home {background-color: var(--hal-color-surface-alt)!important;}

/* restore bootstrap settings, parent theme overrides */
ul, ol {margin: 0 0 10px 25px;}

/* wordpress wraps imgs in p tags. We add a class to these to prevent the margin */
p.p-img-only {margin-bottom: 0;}

/* t-110/t-103: an inline <a> around a block image stays a line box — the image overflows it and the
   TARGET (2.5.8) is a ~14-16px strip across the picture. Each of these anchors is the only child of
   its container, so block wraps the image without an inline-block descender gap. */
.home-box > .home-image > .p-img-only > a,
a.pin-it-button,
#sa-merchant-seal a {
	display: block;
}

/* indent sub-li's. */
ol > li > ul > li {list-style: inside circle;}

/* element coloring */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
	accent-color: var(--hal-color-accent);
}

/* ==========================================================================
   CONTENT LINKS (t-042)

   Underline rather than the border-bottom used on Continue Shopping and the home-box lists. Same look
   is now reachable — `text-underline-offset` gives the gap the border was faking, and
   `text-decoration-thickness` gives the weight — and the underline is better on three counts: it skips
   descenders instead of striking through them, it wraps with the text across lines, and it is what AT
   and browser reader modes expect a link to have. The border-bottom rules that remain are left alone;
   they are on things that are visually buttons, not prose links.

   `body a` and not `a`: the PARENT THEME prints `a, .ui-widget-content a { color: #9ab828 }` into an
   inline <style> from its Theme Options, and that block is emitted AFTER every child stylesheet
   (child <link>s at HTML line ~126, the inline block at ~189). A plain `a` rule here is (0,0,1) and
   loses on load order. `body a` is (0,0,2) and wins, while still losing to every class-bearing rule,
   which is what we want. The tidy fix is to change the option itself in wp-admin to
   --hal-color-brand-link; this rule is then redundant but harmless.

   Colour is set twice on purpose. `rgb(from … r g b / 0.5)` and `oklch(from …)` are relative colour
   syntax (Chrome 119+, Safari 16.4+, Firefox 128+); the plain declaration above each is the fallback a
   browser without it keeps, so the underline is merely solid rather than missing.
   ========================================================================== */
body a {
	color: var(--hal-color-brand-link);
}

/* Dark surfaces flip to the on-dark green. --hal-color-brand-link is tuned for white and is 4.07:1 on
   black — caught by re-scanning after the `body a` rule above went in, which had quietly recoloured
   the links inside the black #shopper-schema block. Any new dark panel belongs in this list. */
#shopper-schema a,
#footer a,
#copyright a,
.full-width.callout a,
.eco h4.mission a {
	color: var(--hal-color-brand-on-dark);
}

body a,
.home-box.links li a,
.home-box ul.links li a {
	text-decoration: underline;
	text-underline-offset: var(--hal-link-underline-offset);
	text-decoration-color: var(--hal-color-link-underline);
	transition: color var(--hal-transition-speed) ease,
		text-decoration-color var(--hal-transition-speed) ease,
		text-decoration-thickness var(--hal-transition-speed) ease;
}

/* Buttons and navigation are not prose. Anything that reads as a control keeps its own styling and
   carries no underline — its affordance is the shape, not the line. */
nav a,
.menu a,
.button,
a.button,
a.sf-button,
a.checkout-button,
a.continue-shopping,
a.qty-plus,
a.qty-plus:hover,
a.qty-plus:focus,
a.qty-minus,
a.qty-minus:hover,
a.qty-minus:focus,
a.remove,
a.cart-contents,
a.gallery-thumb,
.beam-me-up a,
.prdctfltr_wc a,
.all-rugs-link a,
.all-rugs-link a:hover,
.all-rugs-link a:focus,
.woocommerce a.button,
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
a.hal-skip-link,
/* The homepage image overlays ("Shop Thick Wool", "Shop Loom-Hooked Wool") are buttons drawn over
   photography — a bordered panel with centred text. They read as controls, so they take the shape as
   their affordance and no underline. */
.home-image .overlay a,
a.product_share_email,
a.product_share_facebook,
a.product_share_twitter,
a.product_share_pinterest,
.widget_nav_menu a,
#footer a,
#copyright a,
.sa_review a,
#shopper-review-gallery a {
	text-decoration: none;
}

/* Hover: the underline firms up and the colour steps down one notch in lightness. oklch keeps the hue
   and chroma exactly, so this is the same green rather than a different one — which sRGB scaling could
   not promise. Applies only to the links that carry the decoration in the first place. */
body a:hover,
body a:focus,
.home-box.links li a:hover,
.home-box ul.links li a:hover {
	color: var(--hal-color-brand-link);
	color: oklch(from var(--hal-color-brand-link) calc(l * var(--hal-hover-brightness)) c h);
	/* Re-assert the LINE on hover. Bootstrap 2 carries a bare `a { text-decoration: none }` and the
	   parent theme adds a dozen `…a:hover { text-decoration: none }` rules, so setting only the colour
	   and thickness leaves an invisible underline: measured on the homepage and cart, every hover came
	   back `text-decoration-line: none`. */
	text-decoration-line: underline;
	text-decoration-color: var(--hal-color-link-underline-hover);
	text-decoration-thickness: var(--hal-link-underline-thickness);
}

/* The parent theme kills the underline on specific content links at a specificity our `body a` rule
   cannot reach — `.product-name a` is (0,1,1) in neighborhood/style.css:10987 and beats (0,0,2), which
   is why the cart's product links had no underline at all. These re-assert it at a specificity that
   wins, and are the list to extend when another one turns up. Found by reading computed style on the
   real pages, not by scanning: axe has nothing to say about a missing underline.

   t-148 item 3 REMOVED the three product-title selectors from this list. Eric, 2026-08-07: "at the
   mobile size especially the cart looks wayyyy too cluttered. we need an alternative for the links to
   look like links without the underline." A product title is a STANDALONE link in a table cell, not a
   link in a block of text, so 1.4.1's link rule never applied to it — t-042 over-applied the
   re-assertion. They keep the underline on hover and focus (the group below, unchanged), which is the
   alternative affordance. Prose links are untouched: "Non-Skid Rug Pads" sits inside a sentence and
   still carries its resting line. */
/* WooCommerce places button-shaped cart actions inside paragraphs. Keep the prose-link re-assertion
   from overriding the `.button` exception above. */
#page-wrap .page-content p a:not(.button),
#page-wrap .entry-content p a:not(.button),
.home-box .lower-copy p a {
	/* the shorthand `text-decoration: none` they override also resets the COLOUR to currentColor, so
	   the line colour has to be restated here too */
	text-decoration-line: underline;
	text-decoration-color: var(--hal-color-link-underline);
}

/* EVERY selector above needs a :hover twin, and leaving it out was a real bug rather than an
   omission. `.woocommerce td.product-name a` is (0,2,2) and `body a:hover` is (0,1,2), so the rule
   above outranked the hover rule and won in BOTH states — cart product links kept the resting line
   while their text darkened to 6.84:1, which is the "washed out / grey" the line was reported as.
   Measured on /dev/cart/: the painted underline was rgb(201,209,177) at rest AND on hover.

   `.shopping-bag .bag-product-title a` is the floating basket's product title. It is suppressed by a
   DIFFERENT rule than the rest of this list: the flyout is `div.shopping-bag` inside
   `nav.mini-menu > ul.menu`, so both `nav a` and `.menu a` in the no-underline list above catch it.
   The exception is deliberately narrow — only the product TITLE. The thumbnail link, the `×` remove
   control and the two `.sf-roll-button`s in that panel are controls or images and correctly keep
   `text-decoration: none`. If a selector is added above, add it here too. */
.woocommerce td.product-name a:hover,
.woocommerce td.product-name a:focus,
.woocommerce .product-name a:hover,
.woocommerce .product-name a:focus,
.shopping-bag .bag-product-title a:hover,
.shopping-bag .bag-product-title a:focus,
#page-wrap .page-content p a:not(.button):hover,
#page-wrap .page-content p a:not(.button):focus,
#page-wrap .entry-content p a:not(.button):hover,
#page-wrap .entry-content p a:not(.button):focus,
.home-box .lower-copy p a:hover,
.home-box .lower-copy p a:focus {
	text-decoration-line: underline;
	text-decoration-color: var(--hal-color-link-underline-hover);
	text-decoration-thickness: var(--hal-link-underline-thickness);
}

a:hover,
#sidebar a:hover,
.pagination-wrap a:hover,
.carousel-nav a:hover,
.portfolio-pagination div:hover > i,
#footer a:hover,
#copyright a,
.beam-me-up a:hover span,
.portfolio-item .portfolio-item-permalink,
.read-more-link,
.blog-item .read-more,
.blog-item-details a,
.author-link,
.comment-meta .edit-link a,
.comment-meta .comment-reply a,
#reply-title small a, ul.member-contact, ul.member-contact li a,
#respond .form-submit input:hover, span.dropcap2,
.spb_divider.go_to_top a, love-it-wrapper:hover .love-it,
.love-it-wrapper:hover span,
.love-it-wrapper .loved,
.comments-likes a:hover i,
.comments-likes .love-it-wrapper:hover a i,
.comments-likes a:hover span,
.love-it-wrapper:hover a i,
.item-link:hover,
#header-translation p a,
#swift-slider .flex-caption-large h1 a:hover,
.wooslider .slide-title a:hover,
.caption-details-inner .details span > a,
.caption-details-inner .chart span,
.caption-details-inner .chart i,
#swift-slider .flex-caption-large .chart i,
#breadcrumbs a:hover,
.ui-widget-content a:hover,
.woocommerce form.cart button.single_add_to_cart_button:hover,
.yith-wcwl-add-button a:hover,
#product-img-slider li a.zoom:hover,
.woocommerce .star-rating span {
	color: var(--hal-color-link-accent);
}

nav .menu li.current-menu-ancestor > a, nav .menu li.current-menu-item > a {
	color: var(--hal-color-nav-current);
}

nav .menu ul.sub-menu li.orgmenu {
	background-color: var(--hal-color-brand-tint);
}

.recent-post figure, span.highlighted, span.dropcap4,
.loved-item:hover .loved-count,
.flickr-widget li,
.portfolio-grid li,
.woocommerce-page nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li span.current, figcaption .product-added,
.woocommerce .wc-new-badge,
.yith-wcwl-wishlistexistsbrowse a,
.yith-wcwl-wishlistaddedbrowse a,
.woocommerce .widget_layered_nav ul li.chosen > *,
.woocommerce .widget_layered_nav_filters ul li a {
	background-color: var(--hal-color-badge-bg);
}

/* Dropcaps move to the soft-green action pair (t-042): the badge green with white on it is 2.04:1,
   and a dropcap is a real letter carrying real content. #333 on #E0E9C0 is 9.98:1. */
.home span.dropcap3,
.woocommerce span.dropcap3,
.shopmain span.dropcap3,
.post-1182 span.dropcap3 {
	background-color: var(--hal-color-action-bg);
	color: var(--hal-color-action-text);
}

body.playroom span.dropcap3 {background-color: #ffc0cb;}

/* THE ACTION CONTROLS — the soft-green pair, sitewide (t-054, Eric's direction 2026-08-01).
   White text on a light green is this site's recurring 1.4.3 failure, and the fix is one pair used
   everywhere rather than a per-control ratio nudge. #333 on #E0E9C0 is 9.98:1, and the label carries
   --hal-action-font-weight because passing 1.4.3 was never the thing that made these read as
   available (see the :root note).

   Most of these controls ALREADY passed before this change: add-to-cart and the search button were
   both white on #677C22 = 4.68:1. Moving them is a design decision that removes the trap, not a
   remediation of a failing ratio. The one genuine failure here is the contact form's Send button,
   which was white on #9ab828 = 2.27:1 and had never been measured because the contact page has no
   scan export.

   !important throughout because the parent theme prints its Theme Options colours into an inline
   <style> AFTER every child stylesheet, so an equal-specificity child override silently loses.
   Backorder and swatch are excluded: t-044 keeps out-of-stock states as distinct HUES (sold-out
   grey, backorder blue, buy green), and on a pale tint they would stop reading as separate states. */
body .wpcf7 input.wpcf7-submit[type="submit"],
.woocommerce div.summary table.variations-order-table button.single_add_to_cart_button:not(.backorder):not(.swatch),
.woocommerce form.cart button.single_add_to_cart_button:not(.backorder):not(.swatch),
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.wc-proceed-to-checkout .button.checkout-button,
.shopping-bag .bag-buttons a.checkout-button,
.searchform button,
.mobile-search-form button {
	background: var(--hal-color-action-bg) !important;
	background-image: none !important;
	color: var(--hal-color-action-text) !important;
	/* Open Sans is the one face here with a REAL 600 (css/hal_fonts.css, and the headings already use
	   it). Tahoma and Arial ship only Regular and Bold, so 600 on those snaps to full Bold. */
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-weight: var(--hal-action-font-weight) !important;
	/* !important is forced here: the .woocommerce button family sets `border: … !important` further
	   down to beat the parent, and that shorthand carries border-color with it. */
	border-color: var(--hal-color-action-border) !important;
	text-shadow: none;
}

/* The search button's visible mark is its <i> glyph, not the button's own color — the button itself
   computes #767676, which is why reading the button's `color` against its surface gives a nonsense
   1.03:1 and looks like a critical failure when nothing is wrong. */
.searchform button i,
.mobile-search-form button i {color: var(--hal-color-action-text) !important;}

/* Hover: darken the text, hold the surface. The old hover swapped the whole button to a darker green,
   which on a pale tint would read as the button changing state rather than responding to the pointer. */
body .wpcf7 input.wpcf7-submit[type="submit"]:hover,
.woocommerce div.summary table.variations-order-table button.single_add_to_cart_button:not(.backorder):not(.swatch):hover,
.woocommerce form.cart button.single_add_to_cart_button:not(.backorder):not(.swatch):hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.wc-proceed-to-checkout .button.checkout-button:hover,
.shopping-bag .bag-buttons a.checkout-button:hover,
.searchform button:hover,
.mobile-search-form button:hover {
	background: var(--hal-color-action-bg-hover) !important;
	border-color: var(--hal-color-action-border-hover) !important;
	color: var(--hal-color-text) !important;
}

/* Disabled takes --hal-button-border-darkness-disabled: near-invisible against its own surface,
   because the border defines the shape and should not add emphasis to a control you cannot use. */
.searchform button:disabled,
body .wpcf7 input.wpcf7-submit[type="submit"]:disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled,
.woocommerce input.button.alt:disabled {
	border-color: var(--hal-color-action-border-disabled) !important;
}

.searchform button:hover i,
.mobile-search-form button:hover i {color: var(--hal-color-text) !important;}

a.sf-button.green {
	background-color: var(--hal-color-soft-action-bg);
	background-image: linear-gradient(90deg, rgba(180, 212, 69, 0.15) 0%, rgba(159, 193, 47, 0) 50%, rgba(142, 174, 21, 0) 50.12%) !important;
}

a.sf-button.medium.green.rounded {
	color: var(--hal-color-white);
	margin-top: -10px;
}

.page-description {margin-top: 0px;}

h1 {
	text-align: center;
}

.asset-bg.alt-one {
	background-color: var(--hal-color-surface);
}

/* Contact form */
#contact-submit {
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	gap: 12px;
	float: right;
	clear: right;
	min-height: 69px;
}

#contact-submit .wpcf7-spinner {
	top: auto;
	margin: 0;
}

#contact-submit input {
	font-size: 1.125rem;
}

/* Contact form layout, now that CF7's autop is off (logic/settings.php) and the form definition
   carries its own markup. Label above control, one rule instead of a <br> per field. */
#container .wpcf7 label {
	display: block;
}

#container .wpcf7 .hal-field {
	clear: both;
	overflow: visible;
	margin: 0 0 18px;
}

/* The first field's label carries the weight the form's <h2> used to. The <h2> said the same words
   as this label, and the section already has a heading above it ("Email us"), so the duplicate went
   rather than the label. Same type as that <h2> — 22px/300, 28px line — so nothing moves. */
#container .wpcf7 label.hal-field-lead {
	font-size: 22px;
	font-weight: 300;
	line-height: 28px;
	margin: 10px 0;
}

/* The spinner is visibility:hidden until submit, but display:block — so it reserved 24px plus the
   row's 12px gap at all times, which read as a gap between Turnstile and Send. Out of flow. */
#contact-submit {
	position: relative;
}

#contact-submit .wpcf7-spinner {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	margin-top: -12px;
}

/* Inherited padding is 28px right / 14px left, so the label sits off-centre in the button. */
#contact-submit input.wpcf7-submit {
	padding-left: 22px;
	padding-right: 22px;
}

/* Turnstile is a full-width block, so Send dropped below it. Share the row. */
#container .wpcf7 .wpcf7-turnstile {
	float: left;
}

/* Every field is `width: 95%`, so the floated submit row sat 38px right of every other control. */
#contact-submit {
	margin-right: 5%;
}

/* The parent squares the button on hover (border-radius: 0), which reads as a different control
   appearing under the pointer. Hold the shape; the colour change is the hover feedback. */
body .wpcf7 input.wpcf7-submit[type="submit"]:hover {
	border-radius: 10px;
}

#contact-buttons a:last-child {margin-right: 0;}

.contact-title {padding: 0 !important;}

p.address,div.address {text-align: center;}


#contact-recaptcha-holder {float: left;}

.grecaptcha-badge { visibility: hidden; }

.wpcf7 .wpcf7-response-output {
	clear: both;
	font-size: 0.875rem;
	text-align: center;
	color: var(--hal-color-text);
	border: 1px solid var(--hal-color-form-border);
	border-color: #912323;
} /* submit message doesnt underlap buttons */

/* CF7 6.1.6 ships `.wpcf7 form .wpcf7-response-output {margin: 2em 0.5em 1em; padding: 0.2em 1em}`,
   which outranks the rule above — so the box sat 7px in from the left and 31px past the fields'
   right edge. Match the 95% every other control uses; the 60px top keeps it clear of the float. */
#container .wpcf7 form .wpcf7-response-output {
	box-sizing: border-box;
	width: 95%;
	margin: 60px 0 14px;
	padding: 7px 14px;
}

#container .wpcf7 form.sent .wpcf7-response-output {
	background-color: var(--hal-color-success-bg);
	border-color: var(--hal-color-success-action-border);
}

/* t-060: the per-field error tip sits on the LABEL's row, right-aligned — its original intent, which
   never painted because the parent theme's `.wpcf7 p {overflow: hidden}` (neighborhood/style.css:6344)
   clipped anything at top: -18px. Lifting the clip only on paragraphs that hold a control. In flow
   under the field was tried and is worse: it reads as belonging to the NEXT field's label. */
#container .wpcf7 p:has(> .wpcf7-form-control-wrap) {
	overflow: visible;
}

#container .wpcf7 span.wpcf7-not-valid-tip {
	position: absolute;
	top: -18px;
	right: 40px;
	left: inherit;
}

/* Points down at the field it belongs to. Decorative, so the alt-text form keeps it out of names. */
#container .wpcf7 span.wpcf7-not-valid-tip:after {
	content: " \25BE";
	content: " \25BE" / "";
}

#hal-mailing {
	clear: both;
	margin-top: 20px;
}

.hal-contact-lc {display: none; color: var(--hal-color-black) !important;}

/* t-054: the three Immediate Help controls use the same complete action pair as Send and Add to Cart.
	The scoped hover also defeats the parent theme's white label and 0.7 opacity declarations. */
body a.sf-button.hal-contact-phone,
body a.sf-button.hal-contact-sms,
body a.sf-button.hal-contact-lc {
	background: var(--hal-color-action-bg) !important;
	background-image: none !important;
	color: var(--hal-color-action-text) !important;
}

body a.sf-button.hal-contact-phone span,
body a.sf-button.hal-contact-sms span,
body a.sf-button.hal-contact-lc span,
body a.sf-button.hal-contact-phone span:after,
body a.sf-button.hal-contact-sms span:after,
body a.sf-button.hal-contact-lc span:after {
	color: var(--hal-color-action-text) !important;
}

body a.sf-button.hal-contact-phone:hover,
body a.sf-button.hal-contact-sms:hover,
body a.sf-button.hal-contact-lc:hover {
	background: var(--hal-color-action-bg-hover) !important;
	background-image: none !important;
	color: var(--hal-color-text) !important;
	opacity: 1 !important;
}

body a.sf-button.hal-contact-phone:hover span,
body a.sf-button.hal-contact-sms:hover span,
body a.sf-button.hal-contact-lc:hover span,
body a.sf-button.hal-contact-phone:hover span:after,
body a.sf-button.hal-contact-sms:hover span:after,
body a.sf-button.hal-contact-lc:hover span:after {
	color: var(--hal-color-text) !important;
}

.hal-contact-lc span:after,
.hal-contact-sms span:after,
.hal-contact-phone span:after {
	color: var(--hal-color-ink) !important;
	font-weight: 900;
	padding-left: 6px;
	font-size: 0.875rem;
	font-family: 'Font Awesome 5 Free'!important;
}

.hal-contact-phone span:after {
	content: "\f095";
}

/* t-054: this glyph now REPLACES the word "Text", so it is no longer decorative — it is the only
	visible thing distinguishing this button from the dial button beside it. That makes it a meaningful
	non-text mark under 1.4.11, which wants 3:1; --hal-color-action-text on --hal-color-action-bg is
	4.54:1. The `/ ""` gives it empty alt text so the glyph itself stays out of the accessibility tree
	(house pattern, t-031) — the name comes from the .screen-reader-text word that js/contact.js leaves
	in place. */
.hal-contact-sms span:after {
	content: "\f3cd" / "";
	color: var(--hal-color-ink) !important;
}

.hal-contact-lc span:after {
	content: "\f4ad";
	font-size: 1.25rem;
	color: var(--hal-color-black) !important;
}

/* COPY STYLING */

/* input placeholders: can't combine into 1 rule */
::-webkit-input-placeholder { /* WebKit browsers */
	color: var(--hal-color-text-muted) !important;
	font-style: italic !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: var(--hal-color-text-muted) !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: var(--hal-color-text-muted) !important;
	font-style: italic !important;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: var(--hal-color-text-muted) !important;
	font-style: italic !important;
}

.header-copy {
	margin: 25px auto;
	width: 70%;
	font-family: "Open Sans", sans-serif;
	font-size: 0.8125rem;
}

.header-copy h4 {
	text-align: center;
	font-size: 140%;
	padding-bottom: 4px;
	border-bottom: 1px solid #e7e7e7;
}

.header-copy p {
	font-size: 0.8125rem;
}

.product-list .header-copy .copy-emphasis, .organics .product-list .copy-emphasis {
	font-size: 130%;
	padding-top: 12px;
	text-align: center;
}

.header-copy h5.fiber-info {
	text-align: center;
	margin-top: 20px;
}

/* landing pages with product listings */
.product-list div.rightcol {
	overflow: hidden;
	float: right;
	text-align: right;
	width: 30%;
}

/* adjust for header on top of listing pages */
.term-description .product-list div.rightcol {

}

.product-list .header-box {
	margin-top: -13px;
}

.product-list div.rightcol img {
	min-width: 20%;
}

.product-list div.rightcol a {
	display: block;
	width: 100%;
	height: 100%;
	padding-bottom: 4px;
}

.product-list #header-banner,
.product-list #header-banner {
	max-width: 80%;
	margin-top: 0;
	min-height: 100px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.product-list #header-banner.full {max-width: 100%;}

/* hide mobile replacement banner */
.product-list #header-banner a.mobile {display: none;}

.product-list .header-copy {
	width: 70%;
	margin: 0 auto 20px auto;
	font-size: 0.875rem;
}

.product-list .header-copy h1, .product-list .header-copy h2 {
	text-align: center;
	margin-top: 0;
}

.product-list .header-copy h2 {
	font-size: 115%;
	font-weight: inherit;
	color: var(--hal-color-text-soft);
	font-style: italic;
}

.product-list .header-copy h1 {
	font-size: 1.625rem;
	width: 80%;
	padding-bottom: 6px;
	margin: 16px auto 0 auto;
	border-bottom: 1px solid var(--hal-color-border);
}

.product-list .header-copy p.copy {
	width: 75%;
	margin: 20px auto;
	line-height: 140%;
}

.product-list .copybox p {
	margin-top: 16px;
	text-align: justify;
}

/* re-enable when you configure breadcrumbs */
#breadcrumbs {display: none;}

p.note {
	font-size: 0.75rem;
	line-height: 1.6;
	font-style: italic;
	color: var(--hal-color-text-muted);
}

p.image {margin: 0;}

.shadow-bottom {
	box-shadow: 0 2px 4px 0 var(--hal-color-text-mid);
}

.shadow {
	box-shadow: 1px 1px 7px 0 rgba(40, 40, 40, .6);
}

.woocommerce p.stock-note {
	text-align: right;
	float: right;
	margin-bottom: 0;
	font-style: normal;
}

/* Keep the floated result count and stock note inside the listing header so the notice that follows
	starts below both columns. A new block formatting context preserves their desktop alignment without
	clipping the product filter controls contained by the same header. */
header.woocommerce-products-header {
	display: flow-root;
}

/******************************************************* HEADER STYLES */
.inner-page-wrap.no-top-spacing {
	margin-top: 16px;
}

.home .inner-page-wrap.no-top-spacing {margin-top: 0;}

/* fix irksome bottom bg */
.header-wrap {background-color: var(--hal-color-white);}

/* t-119: #header-section is an inline-block on a baseline, so .header-wrap reserved 4.5px of
   descender space beneath it. The parent's margin-bottom: -7px over-corrected that by 2.5px, and
   the overhang painted across the top of the home slider. Drop both halves; measured 103 == 103. */
#header-section {
	margin-bottom: 0;
	vertical-align: top;
}

#header-section > #main-nav {border: none;}
#header-section > #main-nav > .container {
	border-bottom: 1px solid var(--hal-color-border-subtle);
	border-top: 1px solid var(--hal-color-border-subtle);
	z-index: 20; /* product filter goes up to 16, sigh */
}

/* t-140: BOTH rules under the header came from this ONE element. On desktop #main-navigation fills
   the container and they read as the nav bar's top and bottom edges. Below 980 the nav collapses
   into the hamburger, the container shrinks to 9px, and the two borders land 9px apart — the "two
   stacked lines" reported twice. Measured at 402 before changing anything. Removing the bottom one
   leaves a single rule flush under the header; nothing is masked with a matching background. */
@media only screen and (max-width: 979px) {
	#header-section > #main-nav > .container {border-bottom: 0;}
}
.header-shadow #header-section:before {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

#main-nav .header-right ul.menu > li.shopping-bag-item {
	padding-top: 3px;
	font-size: 0.875rem;
}

/* Parent mini-cart buttons contain duplicate spans for a retired rollover effect. */
.shopping-bag .sf-roll-button span + span {display: none;}

/* Keep header and embedded mini-cart actions visually consistent. */
.shopping-bag .bag-buttons a,
.woocommerce.widget_shopping_cart .woocommerce-mini-cart__buttons a {
	border: 1px solid var(--hal-color-border-light);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 12px;
	padding: 10px 20px;
}

.woocommerce.widget_shopping_cart .woocommerce-mini-cart__buttons a {
	padding-right: 12px;
	padding-left: 12px;
}

.shopping-bag .bag-buttons a.bag-button,
.woocommerce.widget_shopping_cart .woocommerce-mini-cart__buttons a:not(.checkout) {
	/* Flattened 2026-08-06 (Eric): the gradient was the ONLY difference between this and Checkout
	   beside it, and it made the flat green primary read as the disabled one of the pair. */
	background-color: var(--hal-color-action-secondary-bg);
	background-image: none;
	border-color: var(--hal-color-action-secondary-border);
	color: var(--hal-color-ink);
	text-align: center;
}

.shopping-bag .bag-buttons a.bag-button:hover,
.woocommerce.widget_shopping_cart .woocommerce-mini-cart__buttons a:not(.checkout):hover {
	/* Was the green CTA gradient, which made the SECONDARY button turn primary-coloured on hover. */
	background: var(--hal-color-action-secondary-bg-hover) !important;
	background-image: none !important;
	border-color: var(--hal-color-action-secondary-border-hover);
	color: var(--hal-color-ink) !important;
}

/* PayPal injects z-index 100 inline, which Chromium composites above the mini-cart. */
.woocommerce-cart iframe[title="PayPal"] {z-index: 0 !important;}

#main-nav i.sf-cart {vertical-align: -5px;}
#main-navigation {padding-top: 3px;}

/* cart sidebar */
.woocommerce .widget_shopping_cart .cart_list li {
	padding-left: 0;
}

/* avoid FOUC */
.sidebar .woocommerce.widget_shopping_cart {display: none;}

.woocommerce ul.cart_list li dl dt,
.woocommerce ul.cart_list li dl dd {
	line-height: 110%;
	margin-bottom: 0;
}

.woocommerce ul.cart_list li dl dt {
	padding: 0;
	font-weight: normal;
}

.woocommerce ul.cart_list li dl .variation-Ships {
	font-weight: bold;
}

.woocommerce ul.cart_list li dl dd.variation-Ships {
	margin-left: 4px;
}

.woocommerce ul.cart_list li dl dd {
	margin-bottom: 0;
	font-weight: normal;
	margin-left: 16px;
}

.woocommerce ul.cart_list li a {
	font-weight: 300;
}

.woocommerce ul.cart_list li span.quantity {
	border-left: 2px solid rgba(0,0,0,.1);
	padding-left: 1em;
}

.woocommerce a.remove {
	color: var(--hal-color-danger) !important;
	font-size: 0.9375rem;
	height: 15px;
	width: 15px;
	border-radius: 10px !important;
}

.woocommerce a.remove:hover,
.woocommerce table.shop_table tr td.product-remove a.remove:hover {
	background-color: var(--hal-color-danger-bg);
}

.sidebar .woocommerce ul.product_list_widget li > a {
	padding-left: 14px;
}

.woocommerce .widget_shopping_cart .cart_list li a.remove, .woocommerce.widget_shopping_cart .cart_list li a.remove {
	margin-left: -6px;
	padding-left: 0;
}


/* admin styling (actual wp-admin styling in hal_admin.css) */

/* style user switcher return box */
#user_switching_switch_on {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	width: 300px;
	margin: 0 auto;
	text-align: center;
	padding: 9px;
	background-color: var(--hal-color-cta-gradient-start);
	background-image: linear-gradient(to bottom, var(--hal-color-cta-gradient-start) 0%, var(--hal-color-cta-gradient-end) 100%);
}

#user_switching_switch_on + .demo_store {display: none;}

#user_switching_switch_on a {
	color: var(--hal-color-ink);
	font-variant: small-caps;
	font-size: 0.875rem;
}

/* end admin styling */

/* searchbar styling */
.searchform {margin: 0 10px 0 0;}

/* Search submit reads as inert while the field is empty (t-029). Greyed deliberately: WCAG 1.4.3 and
   1.4.11 both exempt INACTIVE user interface components from the contrast minimums, so this state has
   no ratio to meet — the ACTIVE state does, and is untouched below. Kept focusable via aria-disabled
   rather than the disabled attribute, so it stays in the tab order and announces its state. */
.searchsubmit[aria-disabled="true"] {
	color: #767676;
	opacity: 0.55;
	cursor: default;
}

.searchsubmit[aria-disabled="true"]:hover {
	color: #767676;
}
/* The search label is hidden VISUALLY, never from assistive tech. `display: none` drops it out of the
   accessibility tree, which left input#s-main-navigation with no accessible name at all (4.1.2 / 3.3.2)
   even though the label[for] was correct — measured on dev 2026-08-01. Clip instead. */
.searchform label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}
/* Centred, both fields (Eric, 2026-08-06): it pulls the text toward the submit button without the
   caret starting hard right, and it is what the mobile field originally did. */
.searchform .search-field,
#header-section .mobile-search-form .search-field {
	text-align: center;
}

.searchform .search-field {
	width: 116px;
	margin: 7px 0;
	font-size: 70%;
	border: 2px solid #eee;
	border-top-width: 1px; /* some weird extra border showing up, remove */
}
.searchform .search-field:focus {border-color: #ccc !important;}
.searchform button,
.mobile-search-form button {
	background: var(--hal-color-cta-bg);
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	padding: 4px 4px 5px 8px;
	font-size: 1.125rem;
	height: 32px;
	width: 32px;
	/* Was `none`, which made this the one action control with nothing for a border-color to paint.
	   Set here rather than overridden later — this rule is the last one to touch the border. */
	border: 1px solid var(--hal-color-action-border);
}
.searchform button:hover {background: var(--hal-color-cta-bg-hover);}
.searchform button i,
.mobile-search-form button i {color: var(--hal-color-white); font-size: inherit;}

/* The free-shipping promo line in the header bar. Was an <h3> until t-030 — a heading that named no
   section, sitting above the page's own h1. Same rules, keyed on the class it now carries. */
nav.header-menu h3,
nav.header-menu .hal-free-shipping {
	float: right;
	clear: both;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--hal-color-header-accent);
	margin: 0;
	margin-top: 11px;
}

/* hide free shipping banner in mini menu */
nav.mini-menu h3,
nav.mini-menu .hal-free-shipping {
	display: none;
}

/* t-067: the shipping block's lead sentence and two ship-date lines were an h2 and two h5s that
   named no section. Same rendering, keyed on classes. Content lives in pages/34 (faq + shipping). */
.hal-ship-lead,
.hal-ship-eta,
.hal-ship-note {
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
	color: var(--hal-color-black);
	margin-top: 10px;
}

.hal-ship-lead {
	font-size: 22px;
	line-height: 28px;
	margin-bottom: 10px;
}

.hal-ship-eta,
.hal-ship-note {
	font-size: 14px;
	line-height: 18px;
}

.hal-ship-eta {margin-bottom: 0;}
.hal-ship-note {margin-bottom: 15px; font-style: italic;}

nav ul.menu li {margin: 0;}

/* keyboard skip link: visually hidden (via .screen-reader-text) until focused.
   WooCommerce ships .screen-reader-text with !important, so the reveal needs !important too. */
a.hal-skip-link:focus {
	clip: auto !important;
	clip-path: none !important;
	width: auto !important;
	height: auto !important;
	position: fixed !important;
	top: 8px !important;
	left: 8px !important;
	z-index: 100000;
	padding: 12px 20px;
	background-color: #fff;
	color: var(--hal-color-brand);
	border: 2px solid var(--hal-color-focus);
	border-radius: 3px;
	text-decoration: none;
	font-size: 1rem;
}
#page-wrap:focus {outline: none;} /* programmatic focus target for the skip link; not an interactive control */
#logo img, #logo a {display: initial;}
#logo a {float: left;}

#logo .logo-tagline {
	font-size: 0.9375rem;
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
	margin-top: 34px;
	margin-left: 120px;
	margin-bottom: 0;
	color: #5a5a5a;
	line-height: 110%;
}

/* mobile (single file and smaller layout) search styling */
/* DESCENDANT, not `a > i`: hal_cart_icon_wrap() puts a span around the glyph so the badge can anchor
   to it, which made the icon a grandchild and silently dropped this whole rule — the desktop cart
   went 0x0 with no mask and the badge sat where the glyph should have been. */
.menu > li.shopping-bag-item a i.sf-cart,
.mobile-cart-link i.sf-cart {
	/* `shop_cart_2.png` was 25x20 native with no @2x, so every phone upscaled it 3x — it was soft at
	   its own size, never mind larger. Redrawn as `images/cart.svg` (same silhouette, measured off
	   the PNG) and applied as a MASK rather than a background image, so the glyph takes its colour
	   from `background-color` and there is no second asset to keep in sync. */
	background-image: none;
	background-color: var(--hal-color-black);
	-webkit-mask-image: url("images/cart.svg?v=5");
	mask-image: url("images/cart.svg?v=5");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	/* Set here, NOT inherited from the parent's `a > i` rule — the badge wrapper made the icon a
	   grandchild and that direct-child selector stopped matching, leaving the desktop glyph
	   `display: inline`, which silently ignores width and height. The mask still applied, so it
	   looked styled and measured 0x0. */
	display: inline-block;
	height: 22px;
	width: 31px;
	vertical-align: middle;
	/* above the badge, so the basket occludes its lower edge */
	position: relative;
	z-index: 2;
	top: -1px;
}

/* t-141. The hamburger had NO right margin and sat 10px off the viewport edge, where it competes
   with the browser's own back-swipe. Gaps widen slightly; the budget is 320, where the Apple Pay
   mark reaches the wordmark with ~5px to spare. */
#logo a.mobile-cart-link {
	float: right;
	margin-right: 28px;
	/* the whole control — glyph AND badge — sits lower than the other two; moving the link rather
	   than the glyph keeps the badge's relationship to the basket intact. 3px is the alignment
	   nudge; the extra 2px only applies when a badge is actually there (below). */
	top: 3px;
}

#logo a.mobile-search-link {
	margin-right: 32px;
	font-size: 1.4375rem;
}

#logo a.show-main-nav {
	margin-right: 14px;
}

/* The three controls were aligned by three different ad-hoc nudges that fought each other — a
   -2px margin on the search link, a -2px vertical-align on the cart glyph — leaving the magnifier
   sitting high. Equal-height flex boxes align them by construction instead; the cart keeps ONE
   deliberate lift because its glyph fills its box while the icon-font glyphs leave slack at the
   bottom, so equal boxes still read low. `text-decoration: none` because these are icon-only links
   and the sitewide underline began painting once they became flex containers. */
#logo a.mobile-search-link,
#logo a.mobile-cart-link,
#logo a.show-main-nav {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	height: 24px;
	margin-top: 0;
	line-height: 1;
	text-decoration: none;
}

#logo a.mobile-search-link i,
#logo a.show-main-nav i {
	font-size: 20px;
	vertical-align: middle;
}

/* t-141: the glyphs are 16-18px wide and Eric reported them "difficult to press". 2.5.8 was already
   met via the spacing exception (target-probe: 0 nodes at 402/414), so this is a hit-area change,
   not remediation. Same pattern as the two widget dismiss buttons: a transparent, centred ::after
   takes the TARGET to 36x36 while the painted glyph is untouched — Eric, 2026-08-03, "fine to have
   a bigger click area but not fine to have the close button that size". */
#logo a.mobile-search-link,
#logo a.mobile-cart-link,
#logo a.show-main-nav {
	position: relative;
}

#logo a.mobile-search-link::after,
#logo a.mobile-cart-link::after,
#logo a.show-main-nav::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	transform: translate(-50%, -50%);
}

/* parent theme sets this to 5, which means dropdown menus can never be higher than 5. */
#header-section {z-index: auto;}

/* t-148: the injected mobile disclosure button is off at every width except the phone breakpoint,
   where css/hal_responsive.css turns it on. Above it the menu opens on hover and :focus-within and
   the chevron is already suppressed, so a second control there would be a duplicate. */
.hal-submenu-toggle {display: none;}

/* t-138: the open field was dragged up into the logo row by a per-breakpoint top/left pair
   (-52/110, -52/210, -57/480) while the magnifier that opens it floats with the viewport — so at 402
   it landed on the Apple Pay mark and at 320 on the magnifier itself. It now takes its own row
   directly under those controls, right-aligned to them, at every width. */
/* Eric, 2026-08-06: the field sat flush against the tagline (measured 0px above, 10px below at 402).
   The gap is split evenly instead. */
#header-section .mobile-search-form {
	position: relative;
	margin: 5px 0;
	padding: 0 10px;
	text-align: right;
	z-index: 999;
}

#header-section .mobile-search-form .search-field {
	border: 1px solid var(--hal-color-border-subtle);
	background-color: var(--hal-color-surface);
	width: 60%;
	max-width: 260px;
	margin: 0;
	padding: 5px 8px;
	font-size: 1rem;
	vertical-align: middle;
}

#header-section .mobile-search-form button {
	vertical-align: middle;
	margin-left: 6px;
}

/* Eric, 2026-08-06: with a magnifier in the header AND one in the field, "you dont know which to
   click". The two are separated rather than deduplicated — the header one goes black so it reads as
   chrome, and the field's submit takes a brighter green with a black glyph so it reads as the
   action. Scoped to the mobile form; the desktop search button has no competing icon beside it and
   keeps the t-054 soft-green pair. */
#logo a.mobile-search-link,
#logo a.mobile-search-link i,
#logo a.show-main-nav,
#logo a.show-main-nav i {
	color: var(--hal-color-black);
}

#header-section .mobile-search-form button {
	background: var(--hal-color-brand-bright) !important;
	border-color: var(--hal-color-brand) !important;
}

#header-section .mobile-search-form button i {
	color: var(--hal-color-black) !important;
}

#header-section .mobile-search-form button:hover {
	background: var(--hal-color-brand-light) !important;
}

/* Eric, 2026-08-06: "the search icon could fade way out" once the field is open. The parent theme
   already adds .active on the toggle. 0.5 is the FLOOR, not a taste choice — the glyph stays
   operable (it closes the field), so 1.4.11 still applies to it at 3:1, and black at 0.5 over white
   measures 3.95:1. Fading further would need the control to become genuinely inactive. */
#logo a.mobile-search-link.active {
	opacity: 0.5;
}

/* Cart badge. Count comes from the WooCommerce fragment (logic/checkout.php), never from the cached
   header render. Fill and border are the action-control pair, so it darkens with the palette rather
   than carrying its own greens. Numeral is black on #E0E9C0 — 16.6:1.

   It sits BEHIND the cart so the basket swallows its lower edge and reads as goods in the cart —
   which is why the glyph carries a z-index at all.

   ANCHORED TO THE GLYPH, not the link. hal_cart_icon_wrap() puts a span around `i.sf-cart` (it cannot
   go inside — the icon is a mask, and a mask clips its subtree), so this one rule serves the mobile
   AND desktop headers and neither needs a magic pixel offset. The basket spans x4.4-25.3 of the
   27.5-unit viewBox, so its centre is 54% of the glyph; the 1px is Eric's. translateX(-50%) keeps 1,
   2 and 3 digits on the same centre. */
.hal-cart-icon {
	position: relative;
	display: inline-block;
	line-height: 0;
	/* The glyph's own right margin (6px, from the parent theme's `.mobile-cart-link i` rule) moves
	   OUT to the wrapper. Left on the icon it sits INSIDE the wrapper, making the wrapper 37px wide
	   against a 31px glyph — so `left: 54%` measured against the wrong box and landed the badge
	   4.26px right of the basket centre. Measured, not guessed. */
	margin-right: 6px;
}

.hal-cart-icon i.sf-cart {
	margin-right: 0;
}

/* The extra drop exists ONLY to make room for the badge, so it is keyed off the badge actually being
   there — Eric, 2026-08-06: "when the carts are empty, can you undo the height adjustments, they're
   only for when cartitems exist".

   `:has()` rather than a JS-toggled class: the badge is replaced wholesale by the WooCommerce
   fragment, and a selector re-evaluates on its own where a class would need re-applying on every
   swap. Where `:has()` is unsupported the rule is simply dropped, which lands on the empty-cart
   position — the safe default rather than a broken one.

   Moving the WRAPPER (desktop) or the LINK (mobile) carries the badge along, so the tuck and
   centring are identical in both states. */
#logo a.mobile-cart-link:has(.hal-cart-count:not([hidden])) {
	top: 5px;
}

.menu > li.shopping-bag-item a.cart-contents:has(.hal-cart-count:not([hidden])) .hal-cart-icon {
	top: 3px;
}

.hal-cart-icon .hal-cart-count {
	position: absolute;
	z-index: 1;
	/* -13.33px: 0.67px below -14, which is exactly 2 device pixels at DPR 3 — Eric's call, and the
	   sub-pixel value is deliberate rather than a stray decimal. */
	top: -13.33px;
	left: 54%;
	margin-left: 1px;
	transform: translateX(-50%);
	width: 16px;
	height: 16px;
	padding: 0;
	box-sizing: border-box;
	border: 1px solid var(--hal-color-action-border);
	border-radius: 50%;
	background: var(--hal-color-action-bg);
	color: var(--hal-color-black);
	/* rem so it scales with zoom (1.4.4); the count is in the link's accessible name too, so this
	   glyph is never the only source. WAVE alerts under 10px — t-120 owns that list. */
	font: 600 0.5625rem/0.8125rem "Open Sans", Arial, sans-serif;
	text-align: center;
	/* OPTICAL, not layout: the numeral is geometrically centred to 0.01px, but digit ink sits right
	   of its advance box ("12" has 0.79px of slack left, 0.50px right), so it reads right-heavy. */
	text-indent: -0.5px;
}

.hal-cart-icon .hal-cart-count[hidden] {display: none;}


/* The DESKTOP cart link gets the same badge, cloned client-side by hal_cart_badge_desktop() because
   that link is the parent theme's markup and has no element for the fragment to replace. The icon
   drops 2px so the badge has room above it without touching the menu row. */
#main-nav i.sf-cart {vertical-align: -7px;}


.show-main-nav {
	font-size: 1.4375rem;
}

div.header-right > nav {margin-right: 0 !important;}
/* login button alignment */
div.header-right nav.header-menu ul.menu li:only-child {
	float: right;
}

div.header-right nav.header-menu ul.menu li a {
	color: var(--hal-color-text-muted);
}

div.header-right nav.header-menu ul.menu li:last-child a {
	margin-right: 0;
}

nav .menu ul.sub-menu li.orgmenu {background-color: var(--hal-color-brand-tint);}


#header-section #header {
	padding-bottom: 0;
	padding-top: 0;
}

/* teaser banner */
.hal-teaser-banner {
	background-color: var(--hal-color-surface-green);
	border: 1px solid #b9cc95;
	border-left: none;
	border-right: none;
	padding: 12px 0;
	text-align: center;
	margin-bottom: 4px;
}

.hal-teaser-banner .hal-teaser-content p {
	margin: 1em 0 0.3em 0;
	list-style: none outside;
   width: auto;
   word-wrap: break-word;
	font-size: 0.875rem;
	letter-spacing: 0.5px;
	font-family: "Tahoma", Arial, Helvetica, sans-serif;
	color: var(--hal-color-text-mid);
}

.hal-teaser-banner img {
	vertical-align: middle;
	display: block;
	text-align: center;
	margin: 0 auto;
}

/* Affiliate-specific styling if needed */
.hal-teaser-banner.teaser-affiliate {
	/* override styles for affiliate teasers */
}

p.demo_store {
	/* display: none; TESTMOD: mobile menu styling on dev. */
	padding: 0;
	margin: 0 auto;
	border: none;

	font-size: 0.6875rem;
	width: 29em;
	min-height: 55px;

	box-shadow: none;

	background-color: var(--hal-color-cta-gradient-start);
	background-image: -moz-linear-gradient(top, var(--hal-color-cta-gradient-start) 0%, var(--hal-color-cta-gradient-end) 100%);
	background-image: -webkit-linear-gradient(top, var(--hal-color-cta-gradient-start) 0%, var(--hal-color-cta-gradient-end) 100%);
	background-image: linear-gradient(to bottom, var(--hal-color-cta-gradient-start) 0%, var(--hal-color-cta-gradient-end) 100%);
	z-index: 998;
	color: var(--hal-color-ink);
}

p.demo_store a.woocommerce-store-notice__dismiss-link {display: none;}

p.demo_store strong {display: block;}

/* White on the light-green gradient is 1.69–2.04:1. Dark text on the same gradient is 6.20–7.49:1,
   and it matches the notice's own body colour instead of fighting it. Gradients read as INCOMPLETE
   to axe rather than as a violation, which is why this one never showed up as a failure. (t-042) */
p.demo_store a {
	color: var(--hal-color-action-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding-bottom: 2px;
}

p.demo_store a:hover {
	font-weight: bold;
}

body.admin-bar p.demo_store {display: none !important;}

/* more subtle live store notice, used as emergency banners for now */
body.hal-live p.demo_store,
body.hal-dev p.demo_store {
	border: 1px solid var(--hal-color-border);
	border-top: none;
	border-bottom: none;
}

/* uncomment below to test live store notice on dev */
/*body.hal-dev p.demo_store ,*/
body.hal-live p.demo_store {
	background-color: var(--hal-color-white);
	background-image: none;
	color: var(--hal-color-text-faint);
}

/*body.hal-dev p.demo_store a,  body.hal-dev p.demo_store span*/
body.hal-live p.demo_store a, body.hal-live p.demo_store span {
	color: #a3b745 !important;
}

#menu-main-navigation li > a {
	margin-left: 12px;
	margin-right: 12px;
	text-transform: none;
}

.shoplink > a {font-weight: bold;}

#menu-main-navigation li.ecolink > a,
#menu-main-navigation li.shoplink > a:hover,
#menu-main-navigation li.faqlink > a:hover {
	color: var(--hal-color-nav-hover);
}

#menu-main-navigation li.ecolink > a:hover {
	color: var(--hal-color-nav-eco-hover);
}

/* dont auto-highlight first option of submenu when it's clickable */
#menu-main-navigation .sub-menu > li.current-menu-item > a {
	color: #222;
	background-color: var(--hal-color-white);
}

#menu-main-navigation .sub-menu > li.current-menu-item > a:hover {
	background-color: var(--hal-color-badge-bg);
}


ul.social-icons.light.small li a {
	background-image: url("images/social-icons-mono-light-small.png") !important;
	background-image: url("images/social-icons-small.png") !important;
}

#top-bar {
	/*padding-bottom: 3px !important;*/
	background-color: transparent !important;
}

.tb-right ul.social-icons.small {
	margin-right: 0px !important;
}

html body #container #header-section header#header #logo a.visible-phone i.icon-align-justify:before {
	content: "MENU";
}

html body #container #header-section header#header #logo a.visible-phone i.icon-align-justify {
	font-family: "Helvetica", Arial, Helvetica, Tahoma, sans-serif;
	font-weight: bold;
}

/*  mini header search adjustment */
nav.mini-menu {
	height: 44px;
	margin-top: -4px;
}


nav.mini-menu .searchform .search-field {
	border-width: 1px;
	margin: 0;
	padding: 2px;
	width: 10em;
	height: auto;
}

nav.mini-menu .searchsubmit {
	font-size: 0.875rem;
	height: 24px;
	width: 24px;
	padding: 2px 2px 3px 6px;
}

/* toplinks (faq, contact) bar */
#toplinks-menu {
	margin-top: 34px;
	margin-right: 26px !important;
}

.logged-in #toplinks-menu {
	margin-right: -36px !important;
}


#toplinks-menu li {
	font-size: 0.875rem;
	border-left: 1px solid var(--hal-color-border);
}

#toplinks-menu li:first-child {
	border-left: none;
}

#toplinks-menu li a {
	color: #5a5a5a;
}

#toplinks-menu li a:hover {
	color: var(--hal-color-link-strong);
}

/* end header */

/******************************************************* HOMEPAGE STYLES */

/* cotton/ wool homepage */
/* columns same height */

/* attempt to replace parallax */
.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.home-content.full-width {
	padding-bottom: 0;
}

.home-content.links.full-width {
	padding-top: 0;
	padding-bottom: 40px;
}

.home-content.lower-links.full-width {
	padding-top: 0;
	padding-bottom: 0;
}

.home-content.full-width.lower {padding-top: 0;}

.home-box {
	background-color: var(--hal-color-white);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	display: table-cell;
	float: none;
	border-right: 0px solid var(--hal-color-surface-alt);
	width: 50%;
}

.home-box.cotton {border-right-width: 20px;}
.home-box.wool {border-left-width: 20px;} /* half of home-border border-right */
.home-box.links {width: 600px;} /* can't use percentages for a width to stick' */


.home-box-container {
	display: table;
	height: 100%;
}

.home-box-border {
	border: 2px solid var(--hal-color-border-light);
	box-sizing: border-box;
	height: 100%;
}

.full-width.light-green .home-box-border {
	border-color: var(--hal-color-surface-green);
	border: none;
}


.home-teaser {
	display: block;
	clear: both;
	margin-left: 0;
	margin-right: 0;
	background-color: var(--hal-color-surface-alt);
}

.teaser-box {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	display: table-cell;
	float: none;
	border-right: 4px solid var(--hal-color-surface-alt);
}

.teaser-box:last-child {border-right-width: 0;}

.teaser-box img {
	box-shadow: 0px 2px 3px 0px rgba(50, 50, 50, .6);
	width: 100%;
	/*width: 372px;
	height: 93px;*/
}

.teaser-img {
	padding: 0;
	padding-bottom: 4px;
	margin:0;
	border: 1px solid var(--hal-color-border);
	border-bottom: none;
}


.home-teaser .home-box,
.home-teaser .home-box.wool  {
	background-color: var(--hal-color-surface-alt);
	border: 20px solid var(--hal-color-surface-alt);
	border-top: none;
	border-bottom: none;
}


/* wool homepage */
div.img-text {
	padding: 72px 0;
}

.img-text .text-img-row:first-child {
	margin-bottom: 72px;
}

.img-text hr {
	width: 50%;
	margin: 0 auto;
}

.img-text .textblock p {
	font-size: 1.25rem;
	line-height: 1.5;
	text-align: justify;
}

.img-text .textblock h2 {
	padding-bottom: 12px;
	margin: 0;
	line-height: 1.2;
	font-size: 1.5rem;
	padding-top: 0;
	border-bottom: none;
}

.img-text .textblock h4 {
	width: auto;
	margin: 0;
	padding-top: 12px;
	text-align: center;
	font-size: 1.25rem;
	color: var(--hal-color-heading-accent);
}

.img-text .textblock {
	padding-top: 0;
	padding-bottom: 24px;
}

.img-text .textblock p {
	margin: 12px 0;
}

.img-text .image {
	margin-top: 36px;
}

.img-text .textblock.span6 {margin-left: 0;}

.img-text .img-right .image {float: right;text-align: right;}

.img-text .img-left .textblock {float: right; padding-left: 0; padding-right: 0;}

.img-text .img-right .textblock {padding-left: 0;}

/* shop link */
.teaser-box .shopbutton {
	display: block;
	background-color: var(--hal-color-white);
	color: var(--hal-color-text);
	font-size: 1.125rem;
	line-height: 1.6;
	font-family: "Open Sans", sens-serif;
	top: 31px; /* for border */
}

.teaser-box a.shopbutton:hover,
.teaser-box:hover a.shopbutton {
	opacity: .85;
	color: var(--hal-color-link-strong);
}

/* t-101: #6d6d6d on the brand tint is 4.09:1 and fails 1.4.3. The action-control pair
   t-054 settled is #666 on the same tint, 4.54:1. The inherited gradient darkens the LEFT
   end to ~4.34:1, so flatten it — same treatment the contact buttons already carry. */
h5.fiber-info a.sf-button.green {
	background-color: var(--hal-color-brand-tint);
	background-image: none !important;
	color: var(--hal-color-action-text);
}

h5.fiber-info a.sf-button {
	font-size: 0.875rem;
}

h5.fiber-info a.sf-button.green:hover {
	background-color: var(--hal-color-soft-action-bg);
}

.shopmain .home-box {
	border: 2px solid var(--hal-color-surface-alt);
}
.shopmain .home-box.wool {border-left-width: 0;}
.shopmain .lower-links .home-box {border-width: 0;}

.home-content.links .home-box {
	background-color: var(--hal-color-surface-alt);
	padding: 10px;
}

.home-content.lower-links .home-box {
	background-color: var(--hal-color-white);
	padding-bottom: 0;
}

.home-box p {
	padding: 8px 20px;
	margin: 0;
	color: var(--hal-color-text-muted);
	line-height: 150%;
	font-size: 0.8125rem;
}

.home-box h4 {
	padding: 6px 20px;
	margin-bottom: 0;
	margin-top: 12px;
	font-weight: bold;
	font-size: 0.875rem;
	color: var(--hal-color-text-soft);
}

.home-box p img.shopshot {
	padding: 0;
}

.home-box h2 {
	letter-spacing: 2px;
	padding-bottom: 8px;
	font-size: 1.375rem;
	width: 80%;
	margin: 0 auto;
}

.home-box h2 a {
	color: var(--hal-color-heading-accent);
	text-decoration: none;
}

.home-box h2.newcat:after {
	content: "*NEW*";
	float: right;
	display: inline;
	padding-right: 0;
	font-weight: bold;
}


/* shop links */
.home-box p.shopbutton {
	margin-top: 7px;
	margin-right: 20px;
	float: right;
	padding: 0;
}

.home.landing .home-box p {
	padding-left: 46px;
	padding-right: 46px;
}

.home.landing .home-box .lower-copy {margin-bottom: 0;}

.home-teaser .home-box p.shopbutton {
	float: none;
	margin: 0;
}

.home-box a.sf-button {
	margin: 0;
	color: var(--hal-color-white);
}

.home-box a.sf-button:hover {
}

.home .banner {
	text-align: center;
	font-size: 2em;
	color: var(--hal-color-text-muted);
}

.home-box .lower-copy {
	margin-bottom: 20px;
}

.home-box .lower-copy h4 {

}

.home-box .lower-copy p {
	text-align: left;
}

.home-box.links li,
.home-box ul.links li {
	display: inline-block;
	padding: 2px;
}

.home-box ul.links {
	margin: 0 auto;
	margin-bottom: 10px;
	width: 85%;
}

.home-box.links li a,
.home-box ul.links li a {
	padding: 2px 6px;
	margin-right: 7px;
	letter-spacing: 1px;
	font-size: 0.8125rem;
	/* was raw #B6D435 — 1.69:1 on the homepage's #f0f0f0 (t-042) */
	color: var(--hal-color-brand-link);
	/* border-bottom removed (t-042): it paired with the underline added above and drew TWO lines.
	   The underline is the link cue now — it skips descenders, wraps across lines, and is what
	   reader modes expect; text-underline-offset gives the gap the border was faking. */
}

/* space out bottom links */
.home-box.links li a {
	margin-right: 15px;
}

/* was `text-decoration: none` — it existed to suppress the parent theme's underline-on-hover, which
   is now the styling we want. The border-bottom below is the box's own separator, not a link cue. */
.home-box.links li a:hover,
.home-box ul.links li a:hover {text-decoration-line: underline;}

.home-box.links ul.greylinks li a {
	color: var(--hal-color-text-muted);
}

.home-box.links ul.greylinks li a:hover {
	color: var(--hal-color-text-mid);
}

/* `.home-box ul.links li a:hover` USED to live here setting --hal-color-link-accent (the bright green,
   2.03:1 on white) plus a raw #b0d81a border. It is the same specificity as the hover rule near the top
   of this file and came LATER, so it won — which is why these links lightened on hover instead of
   darkening. Deleted rather than repointed: the rule at "Hover: the underline firms up…" already says
   everything this one was saying, correctly. Read off the live element with `RULES=1 pnpm probe`,
   not deduced — the specificity arithmetic alone said it should lose. */

.home-box.links li:last-child a {margin-right: 0;}

.home-box .home-image {
	z-index: 1;
}

.home-box .home-image p {padding: 0;}

.home-box .home-image .overlay-box {
	background-color: var(--hal-color-white);
	z-index: 2;
}

.home-box .home-image .overlay {
	margin-top: -208px;
	margin-left: auto;
	margin-right: auto;
	width: 260px;
	height: 60px;
	background-color: var(--hal-color-white);
	opacity: .80;   /* t-002: was .70 — see the overlay tokens in :root */
	padding: 4px;
	border: 1px solid var(--hal-color-text-subtle);
}

.home-box .home-image .overlay.wide {width: 280px;}

.shopmain .home-box .home-image .overlay {margin-top: -196px;}

.home-box .home-image .overlay:hover {
	background-color: var(--hal-color-overlay-bg-hover);
}

.home-box .home-image .overlay:hover a {
	text-decoration: none;
	color: var(--hal-color-white);
}

.home-box .home-image .overlay a {
	display: block;
	letter-spacing: 1px;
	color: var(--hal-color-overlay-link);
	font-size: 1.125rem;
	text-align: center;
	padding: 12px 0;
	line-height: 1.9;
	border: 1px solid #E0DADF;
	font-family: "Open Sans", sans-serif;
}

/* general homepage */
.home #swift-slider .flex-caption .flex-caption-details {
	display: none !important;
}

.home #swift-slider .flex-active-slide .flex-caption {
	bottom: 125px !important;
}

.home #swift-slider .flex-caption h4 span {
	font-size: 1.3125rem !important;
	line-height: 1.5 !important;
}

.home .tp-caption {
	opacity: .65 !important;
	padding: 4px !important;
}

.full-width {
	box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.3) inset !important;
	padding-top: 30px;
	padding-bottom: 30px;
}

.full-width h2,
.shopmain .home-box h2 {
	color: var(--hal-color-heading-accent);
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: 1px solid var(--hal-color-border-muted);
	padding-bottom: 7px;
	text-align: center;
	font-size: 1.25rem;
	line-height: 1.2;
	margin-top: 0px;
	padding-top: 10px;
}

.shopmain .home-box h2 {
	border-bottom: none;
}

/* neighborhood 3.0 removed support for alt-bg, re-adding */
.alt-bg {
  margin: 40px 0;
  margin-left: -210px!important;
  padding: 30px 200px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.home .alt-bg,
.shopmain .alt-bg,
.page-heading.alt-bg {
	margin-bottom: 0px;
	margin-top: 0px;
	border-bottom-width: 0px;
	border-top-width: 0px;
}

.home .horizontal-break,
.shopmain .horizontal-break {
	height: 2px !important;
	width: 50px !important;
	margin: 20px auto 25px !important;
	background-color: var(--hal-color-border-subtle) !important;
}

.full-width.light-grey {
	background: none;
	background-color: var(--hal-color-surface-alt);
}

.full-width.dark-grey {
	background: none;
	background-color: #252525;
}

.full-width.callout {
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: none;
	margin-top: 0;
}

.full-width.light-green {
	background: none;
	background-color: var(--hal-color-surface-green);
}

/* vertical alignment of homepage copy */
.full-width h2.dyefree {margin-top: 20px;}
.full-width h2.craft {margin-top:80px;}
.full-width h2.designs,
.full-width h2.fiber,
.full-width h2.landfill {margin-top:50px;}

.home .full-width.home-content {
}

.full-width.teaser-content {
	padding-top: 0;
	padding-bottom: 0;
}

/* The homepage hero h1 sits on #252525. It was --hal-color-heading-strong (the dark brand green),
   which is 3.27:1 there — the same green that is correct on white and wrong on this. Now the
   on-dark green, 7.52:1, matching what .eco h4.mission span has always used. (t-042) */
.full-width.callout h1 {
	text-align: center;
	color: var(--hal-color-brand-on-dark);
	text-transform: none;
	border: none;
	letter-spacing: normal;
	padding: 6px 0;
	margin: 0;
	line-height: 100%;
	font-size: 1.125rem;
}

.shopmain h1 {
	margin-top: 20px;
	letter-spacing: 1px;
}

/* Green, not white: since the rhetorical line moved out to its own <p>, everything left in the h1
   is ONE heading and reads as one — Eric 2026-08-06, "the span of the h1 should be green like
   before". White now belongs to the <p> alone. */
.full-width.callout h1 span {
	color: var(--hal-color-brand-on-dark);
	padding-left: 10px;
	display: inline-block;
}

/* 2026-08-06: the rhetorical line moved out of the h1's <span> into its own <p>. It labels nothing,
   so it was never a heading — same call as t-030 — and the h1 was 115 characters and three
   sentences. Takes the white the span carried, and the h1's type so the block still reads as one. */
.full-width.callout p {
	color: var(--hal-color-white);
	text-align: center;
	font-size: 1.125rem;
	line-height: 100%;
	margin: 0;
	padding: 0 0 6px;
}

.full-width.returns {
	margin-top: 0;
	margin-bottom: 0;
	border-bottom-width: 0;
	border-top-width: 0;
	background: none;
	background-color: var(--hal-color-action-bg);
	padding: 30px 0;
}

/* t-084: the promo line is a <p>, not a heading — h2 kept so older content still renders.
   text-transform is explicit because the h2 was getting UPPERCASE from `#page-wrap h2`; matching
   the box was not the same as matching the rendering, and the capitals were lost for a few hours. */
.full-width.returns h2,
.full-width.returns p {
	text-transform: uppercase;
	margin-bottom: 20px;
	margin-top: 0px;
	border-bottom-width: 0px;
	border-top-width: 0px;
	font-weight: normal;
	color: var(--hal-color-action-text);
	border-bottom: 0px solid var(--hal-color-border-muted);
	padding: 0;
	margin: 0;
	font-size: 3em;
	line-height: 100%;
	text-align: center;
}

/* Alternate Homepage styling */
.full-width.full-banner {
	padding-top: 16px;
	padding-bottom: 16px;
	background-color: var(--hal-color-section-accent-bg);
}

.full-width.full-banner h1 {
	font-size: 2rem;
	color: var(--hal-color-white);
}

.full-width.full-banner + .full-width {
	padding-top: 40px;
}

.home .freeshipping,
.shopmain .freeshipping {
	font-size: 3em !important;
}

/* full width with background image banner */
body.organics .full-width.full-bg::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

/* organics page */
body.organics .full-width.eco-banner::before {
	background-image: url(/images/cotton-organics-roll-edge-on-home-banner-2000x.jpg);
	height: 350px;
}

body.organics .full-width.eco-banner {
	height: 280px;
}

body.organics .eco-heading {
	margin-top: 360px;
	margin-left: 130px;
}

body.organics .eco-heading h1 {
	font-size: 400%;
	line-height: 120%;
	color: var(--hal-color-white);
	text-transform: uppercase;
	text-align: left;
}

body.organics .eco-heading h3 {
	color: var(--hal-color-white);
	font-size: 200%;
	text-transform: uppercase;
	margin-top: 20px;
}

body.organics .home-box h4 {
	font-weight: 300;
	font-size: 1rem;
	color: var(--hal-color-text-muted-strong);
}

body.organics h4.lower-h {
	font-size: 0.875rem;
	font-weight: 300;
	text-transform: uppercase;
	color: var(--hal-color-text-muted);
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}

body.organics .lower-copy p {
	min-height: 76px;
}

body.organics .home-box {
	width: 33%;
	vertical-align: top;
}

.full-width.light-green .home-box {border-color: var(--hal-color-surface-green);}

body.organics .home-box.cotton {border-right-width: 20px;}

body.organics div.organics-content {
	background-color: var(--hal-color-white);
	padding: 80px;
}

body.organics img.gots-logo {
	margin: 0 auto;
	display: block;
}

body.organics .organic-logos-full div.organics-content {
	padding: 0 80px;
	padding-bottom: 20px;
}

body.organics div.organics-content.organics-box-lower {
	margin-top: 20px;
	border-bottom:none;
}

body.organics .full-width.home-content.organic-logos-full {
	padding-top: 0;
}

body.organics .organic-logos-full .home-box-border {
	border-top: none;
}

body.organics .home-box-border {padding-top: 16px;padding-bottom:16px;}

h2.organic-styles {
	font-weight: 300;
	color: var(--hal-color-text);
	font-size: 1.375rem;
	max-width: 724px;
	border-bottom: none;
	margin: 20px auto;
	padding-bottom: 8px;
}

body.organics .organics-copy-inner {
	margin: 20px 0;
}

h5.fiber-info a {margin-right: 0;}

h5.fiber-info span {
	color: var(--hal-color-text-muted);
	display: block;
}

h4.copy-emph {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--hal-color-text-faint);
}

.organics-copy-inner h4 {
	margin-top: 30px;
	margin-bottom: 0;
	color: var(--hal-color-text-muted-strong);
}

body.organics .full-width.callout h1 {color: var(--hal-color-white);}
body.organics .full-width.callout h1 span {color: #90AA2D;}

.organics-logos {
	text-align: center;
	margin: 0 auto;
	margin-bottom: 20px;
}

.organics-logos img {
	display: inline-block;
	margin-right: 50px;
}

.organics-logos img:last-child {margin-right:0;}

.organics-intro {
	max-width: 724px;
	margin: 0 auto;
	text-align: center;
}

.organics-intro p {
	text-align: left;
	clear: both;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--hal-color-text-muted);
}

.organics-intro .organics-copy-intro-lower p {
	margin: 0;
}

 .organics-copy-intro-lower {
	margin-left: 40px;
	margin-top: -10px;
}

.tallcap {margin-bottom: 90px;}

.organics-intro h3 {
	color: var(--hal-color-heading-accent);
	padding-top: 7px;
	margin-top: 20px;
	border-top: 1px solid;
}

.organics-intro h2, .organics-intro h3 {
	border-color: var(--hal-color-surface-cool);
	margin: 20px auto;
}

body.organics .full-width.home-content.teaser {
	padding-top: 30px;
	padding-bottom: 30px;
}

.copy-teaser {
	background-color: var(--hal-color-white);
	width: 250px;
	margin: 0 auto;
	text-align: center;
	border: 1px solid var(--hal-color-surface-cool);
	padding: 0;
	border-radius: 40px;
	padding-bottom: 12px;
}

.copy-teaser > h4 {
	color: var(--hal-color-heading-accent);
	margin-bottom: 10px;
}

.copy-teaser > p {
	text-align: center;
	color: var(--hal-color-text-muted);
	margin-bottom: 0;
}

.copy-teaser > h5 {
	padding-top: 12px;
	margin: 0;
}

.copy-teaser > h5 a {
	margin-bottom: 0;
}


/** offset mini menu header for anchor links */
p.anchor {
	margin-bottom: 60px;
}

/******************************************************* PAGE STYLES */
.full-width-text {
	padding-bottom: 20px;
	padding-top: 20px;
}

/* hide "rugs by type" header  -- never mind, looks bad.*/

/* sidebar links */
.sidebar .widget ul li > a {padding: 6px 0;}

.sidebar .widget_categories ul > li.menu-item a,
.sidebar .widget_archive ul > li.menu-item a,
.sidebar .widget_nav_menu ul > li.menu-item a,
.sidebar .widget_meta ul > li.menu-item a,
.sidebar .widget_recent_entries ul > li.menu-item,
.widget_product_categories ul > li.cat-item a,
.widget_layered_nav ul > li.menu-item a,
.widget_nav_menu ul > li.menu-item.current-menu-item ul.sub-menu li a {
	color: var(--hal-color-text-muted);
	font-size: 0.75rem;
}

.widget_nav_menu ul > li.menu-item.current-menu-item a,
.sidebar .widget_categories ul > li.menu-item a:hover,
.sidebar .widget_archive ul > li.menu-item a:hover,
.sidebar .widget_nav_menu ul > li.menu-item a:hover,
.sidebar .widget_meta ul > li.menu-item a:hover,
.sidebar .widget_recent_entries ul > li.menu-item a:hover,
.widget_product_categories ul > li.cat-item a:hover,
.widget_layered_nav ul > li.menu-item a:hover,
.widget_nav_menu ul > li.menu-item.current-menu-item ul.sub-menu li a:hover {
	/* Sidebar current item + hovers, all on white. --hal-color-link-accent is the bright green at
	   2.03:1 — this rule was the last thing painting it on a white surface. (t-042) */
	color: var(--hal-color-brand-link);
}


	.sidebar .widget_nav_menu ul > li.menu-item-has-children > a
,	.sidebar .widget_nav_menu ul > li.pseudo-parent > a {
	font-size: 0.875rem;
}

.sidebar .widget_nav_menu ul > li.menu-item.newcat a::after {
	content:"NEW";
	float: right;
	display: inline;
	padding-right: 16px;
	color: var(--hal-color-status-accent);
}

.sidebar .widget_nav_menu ul li.menu-item-has-children.maincat > a {
	text-decoration: underline;
	font-size: 1rem;
}

/* no right angle bracket to be underlined */
.widget_nav_menu ul li.menu-item-has-children.maincat > a::before {
	content: none;
}


/* The "you are here" marker on the current menu item. Empty alt text keeps the » out of the link's
   accessible name — the state it marks is already carried programmatically by aria-current="page",
   so spoken it is pure noise ("right-pointing double angle quotation mark"). Same mechanism and same
   fallback ordering as the icon-font glyphs (t-031). */
.widget_nav_menu ul > li.menu-item.current-menu-item > a::before {
	content:"\00BB  ";
	content:"\00BB  " / "";
	float: none;
	display: inline;
}

/* no more weird right-aligned arrows on menu in sidebar and footer */
.widget_nav_menu ul > li a:before {
    float: left;
    margin-right: 0.2em;
}

/* padding before and after "all x rugs" row */
.widget_nav_menu ul > li.menu-item-has-children,
.widget_nav_menu ul > li.rugpad {
	margin-top: 8px;
	border-top: none;
}

.sidebar .widget_nav_menu ul > li.menu-item.rugpad a {
	font-size: 1rem;
}

.widget_nav_menu ul > li.menu-item-has-children:first-child {margin-top: inherit;}

a.sf-button.rounded, a.sf-button.roundedarrow {
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}
a.sf-button.black {
	background-image: -moz-linear-gradient(top, var(--hal-color-cta-gradient-start) 0%, var(--hal-color-cta-gradient-end) 100%) !important;
	background-image: -webkit-linear-gradient(top, var(--hal-color-cta-gradient-start) 0%, var(--hal-color-cta-gradient-end) 100%) !important;
	background-image: linear-gradient(to bottom, var(--hal-color-cta-gradient-start) 0%, var(--hal-color-cta-gradient-end) 100%) !important;
	background-color: var(--hal-color-cta-gradient-start);
	color: var(--hal-color-ink);
}

a.sf-button.large {
	padding-bottom: 8px;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
}

a.sf-button.slightlyrounded:hover, a.sf-button.slightlyroundedarrow:hover, a.sf-button.rounded:hover, a.sf-button.roundedarrow:hover {
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	opacity:0.7 !important;
	filter:alpha(opacity=70) !important; /* For IE8 and earlier */
}

h3 a {
	color: var(--hal-color-link-strong) !important;
	font-weight: 400;
	font-size: 0.8125rem;
}

/* choosing a rug page styling */
.eco.chooserug .page-content h2 {
	text-align: center;
	margin-top: 30px;
	border-bottom: none;
}

.eco.chooserug .page-content h4 {
	margin: 10px 0;
	font-weight: bold;
}

.eco.chooserug .page-content h4.mission {
	margin-top: 0;
	font-weight: normal;
}

.eco.chooserug hr {margin-top: 0;}
.eco.chooserug .copybox div {margin-bottom: 40px;}
.eco.chooserug .copybox h4 {margin-bottom: 4px;}

.eco.chooserug .copybox {
	padding: 0 20px;
}

.eco.chooserug .copybox p {
	font-size: 1rem;
	line-height: 1.4;
	margin-bottom: 6px;
}

.cat-box {
	margin-top: 30px;
}

.cat-box hr {
	width: 40%;
	margin: 0 auto 10px auto;
	border-top-color: var(--hal-color-border-muted);
}

.cat-box div {
	float: left;
	width: 270px;
	min-width: 160px;
	box-sizing: border-box;
	padding: 14px 10px;
	margin: 0;
	margin-bottom: 30px;
	background-color: #fefffa;
	border: 1px solid #d8ee8d;

	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;
	border-radius: 20px;
}

.cat-box .double {
	width: 570px;
}


/* eco commitment page styling*/
.eco .page-content p, .eco .page-content li {font-size: 0.875rem;line-height: 1.45;}

.eco .page-content h1 {margin-bottom: 16px;}

.eco .page-content li {
	margin-top: 14px;
	width: 90%;
	margin-left: 5%;
}
.eco .eco-fiber li {margin-top: initial;}

.eco .content-banner {margin-bottom: 30px;}

.eco .page-content .fa-li,
.organics .page-content .fa-li {
	color: var(--hal-color-status-accent);
	margin-top: 2px;
}

.eco .page-content .fa-ul {
	margin-left: initial;
	display: block;
}

.eco .page-content h2 {
	border-bottom: 1px solid var(--hal-color-border-mid);
	padding-bottom: 4px;
	letter-spacing: 1px;
}

.eco .page-content h4 {
	text-align: center;
	margin: 40px 0;
	font-size: 1.125rem;
	clear: both;
}

h4#signoff {
	font-size: 1.5rem;
	color: var(--hal-color-heading-accent);
	margin-top: 60px;
}

.eco h4.mission {
	text-align: center;
	color: var(--hal-color-white);
	padding: 8px 0;
	margin: 0;
	margin-bottom: 20px;
	line-height: 125%;
	font-size: 1rem;
	padding: 8px 0;
	background-color: #353535;
}

/* on #353535 — same role as the homepage hero h1, now the same token (t-042) */
.eco h4.mission span {color: var(--hal-color-brand-on-dark);}

.eco .page-content h5 {
	font-size: 1.125rem;
	margin: 30px 0;
}

.eco .eco-fiber p {max-width: 720px;}
.eco .eco-fiber p.image {max-width: inherit;}
.eco .eco-copy p {max-width: 600px;}
.eco .eco-copy li {max-width: 500px;}

.eco .page-content h6 {
	color: var(--hal-color-text-muted-strong);
	text-transform: uppercase;
	margin-bottom: 0;
	margin-top: 20px;
}

.eco .page-content img.alignright {
}

.eco #clothing-bins {
	margin-bottom: 30px;
}

.eco #clothing-bins p.note {
	margin-top: 6px;
	text-align: center;
}

.eco .weaver img {margin-top: 60px;}

.cotton-journey.spb_accordion .ui-accordion .ui-accordion-header {
	width: 280px;
	border-top: none;
}

.cotton-journey .ui-accordion h3.ui-accordion-header .ui-icon {
	right: initial;
	top: 6px !important;
	color: var(--hal-color-status-accent);
}

.cotton-journey .spb_accordion_wrapper {
	border-bottom: none;
}
.cotton-journey.spb_accordion .ui-accordion .ui-accordion-content {
	display: none;
	border-bottom: 1px solid var(--hal-color-border-subtle);
}

.cotton-journey.spb_accordion .spb_accordion_section > h3 a {
	padding-left: 20px;
	padding: 5px 0 5px 20px;
}

.cotton-journey.spb_accordion .spb_accordion_section > h3:hover a {
	background-color: var(--hal-color-brand-tint);
}

/* revolution slider tweaks */
.hal-banner-headline {font-size: min(14px) !important;}
.hal-banner-label {font-size: min(12px) !important;}
.hal-slider-label {font-size: min(11px) !important;}

span.tp-bullet-title {
	display: none !important;
}

/*** Answerbase ***/
	#page-wrap .answerbase-widget {
		border: 1px solid rgb(221, 221, 221);
		padding: 10px 8px;
		display: grid;
		grid-template-columns: 1fr;
		max-width: 400px;
		margin: 30px auto;
	}

	.answerbase-widget h5 {text-align: center;}

	.answerbase-widget img,
	.woocommerce div.product div.images img {
		width: inherit;
		display: inherit;
	}

	/* fix widget footer */
	#page-wrap .answerbase-widget > div:last-of-type > img.float-right {
		width: 40%;
		max-width: 160px;
		float: none !important;
		justify-self: end;
	}

	#page-wrap .answerbase-widget > div:last-of-type {display: grid;}
	#page-wrap .answerbase-widget > div:last-of-type > hr {display: none;}

	/* question box */
		#ask-question-box
		, #page-wrap .simple-ask-form input:not([type="checkbox"])
		, #page-wrap .simple-ask-form textarea {
			font-size: 110%;
			font-weight: normal;
			text-align: center;
			margin: 0 auto;
		}

		#page-wrap .simple-ask-form textarea {display: none;}

		.answerbase-widget #ab_ask,
		.answerbase-widget .simple-ask-form #simple-ask-submit {
			display: block;
			width: 25%;
			max-width: 120px;
			background-color: var(--hal-color-brand-wash);
			color: var(--hal-color-text-mid);
			margin-left: auto !important;
			margin-right: auto !important;
			margin-bottom: 3ex !important;
			margin-top: -3ex; /* not important because only for main button */
			padding: 14px 8px;
			border-radius: 6px;
			font-size: 0.875rem;
			font-weight: bold !important;
			letter-spacing: 1px;
			text-shadow: none !important;
			border-color: #b0c754 !important;
			border-width: 2px !important;
		}

		.answerbase-widget #ab_ask:hover,
		.answerbase-widget .simple-ask-form #simple-ask-submit:hover {
			color: var(--hal-color-black) !important;
		}

		.simple-ask-form > form > div > #IAgreeToTheTerms {
			vertical-align: middle;
			margin-right: 6px;
			margin-bottom: 20px;
			margin-top: 30px; /* same as margin for label */
			margin-left: 10%;
		}

		.simple-ask-form > form > div > label[for="IAgreeToTheTerms"] {
			vertical-align: middle;
			font-size: 0.6875rem;
			color: var(--hal-color-text-muted);
			margin-top: 30px; /* same as margin for checkbox */
			margin-bottom: 20px;
		}


		#page-wrap .answerbase-widget label[for="EmailAddress"] {
			display: none;
		}

		#page-wrap .answerbase-widget #EmailAddress {
			width: 60%;
			margin-top: 20px;
		}

		.characters-remaining {
			text-align: right;
			padding-right: 8px;
			color: var(--hal-color-text-muted);
			font-style: italic;
		}

		div:has(> img.avatar),
		#page-wrap .answerbase-widget img.avatar {display: none;}

/*** end answerbase ***/

/*********** WOOCOMMERCE ***********/

/* hide the free badge from data import */
.woocommerce .free-badge {display: none;}

.woocommerce .term-description {padding-top: 0;}

/* The listing h1 ("All Rugs") is hidden by the shared clipping rule further down this file — search
   `t-055`. It used to be `display: none` here, which also removed it from the accessibility tree. */

/* underlay / overlay support https://jsfiddle.net/hookloom/vbpa8s35/ */

	.hal-underlay {
		position: relative;
		/* background-image: url('/2013site/images/2013/10/MASTER-ROLL-PANO-web1.jpg'); */
		background-size: cover;
		background-position: center;
	}

	/* support nested containers in underlay before img */
	.hal-underlay * {height: inherit;}

	/* hack to work around nested div under underlay needing height: 100% */
	body .hal-overlay, body .hal-overlay * {
		height: initial;
	}

	.hal-underlay img {
		height: 100%; /* scales img down to size of parent */
		width: 100%;
	}

	.hal-overlay {
		width: auto;
		margin: 0 auto;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%, -50%);

		padding: 8px 50px;
		background-color: var(--hal-color-white);
		outline: 5px solid var(--hal-color-white);
		border: 1px solid var(--hal-color-border);
	}

	/* typically use an h4 in the overlay for links etc */
	.hal-overlay h4 {
		margin: 0 auto;
		font-size: 1.5rem;
		letter-spacing: 1px;
		color: var(--hal-color-text-muted-strong);
		background-color: var(--hal-color-white);
		text-transform: uppercase;
	}

	.hal-overlay h5 {
		font-size: 0.875rem;
		text-decoration: none;
		color: var(--hal-color-text-muted);   /* t-102: was -faint, 2.32:1 */
		margin-top: 6px;
		margin-bottom: 0;
		font-weight: 300;
		font-style: normal;
		text-align: center;
	}

/* Shop page */
	/* multiple page results, so show result count and bump it down */
	.woocommerce div.woocommerce-count-wrap {
		margin-bottom: 0;
		color: var(--hal-color-text-muted);
		width: 150px;
		text-align: left;
	}

	div.woocommerce-count-wrap p.woocommerce-result-count,
	div.woocommerce-count-wrap p.woocommerce-show-products {
		font-size: 0.625rem;
		line-height: 1.6;
		margin-top: 0;
		margin-bottom: 0;
	}

	div.woocommerce-count-wrap p.woocommerce-result-count:only-child {margin-top: 16px;}

	/* fix all-rugs (main shop page) formatting, including sale/bysize pages */
	body.shopmain div.woocommerce-shop-page div.page-description,
	body.shopmain div.page-description {
		margin-top: -13px;
		margin-bottom: 20px;
	}

	#search-title {
		margin: 0;
		background-color: var(--hal-color-surface-alt);
		border: 1px solid #dadada;
		border-top: none;
		padding-top: 4px;
	}

	div.shop-banner {
		margin: 20px 0;
	}

	body.shopmain .hal-underlay {height: 110px;}

	.shopmain div.shop-banner {
		margin: 0;
	}

	body.shopmain .hal-underlay img {
		box-shadow: 0 2px 4px 0 var(--hal-color-text-mid);
		opacity: 0.75;
	}

	h4.search-heading em {
		font-weight: bold;
		padding: 0 6px;
	}

	h4.bysize-heading {font-size: 1.25rem;}




/* end shop */


/* listing pages */

/* playroom landing page + generalized styles originating from it */

.header-box div.logos {
	margin: 0 auto;
	text-align: center;
	margin-bottom: 0;
	border: 1px solid #acc354;
	border-top: none;
}

body.playroom .header-box {
}

body.playroom .header-box h2 {
	font-size: 155%;
	font-weight: normal;
	color: var(--hal-color-text-mid);
	font-style: italic;
	text-align:center;
	margin: 0 auto;
}

.header-box img.side_img {
	float: right;
	margin-top: 10px;
	padding-left: 15px;
 }

div.woocommerce.landing-products ul.products {
	border-top: none;
	padding-top: 0;
}

h3.organic-styles {
	font-weight: 300;
	font-style: normal;
	color: var(--hal-color-text-mid);
	font-size: 1.375rem;
	border-bottom: none;
	margin: 50px auto;
	margin-bottom:0;
	text-align:center;
}

h1.alt_banner {
	background-color: var(--hal-color-white);
	text-align: center;
	color: #ff98aa;
	text-transform: none;
	border: none;
	letter-spacing: normal;
	padding-bottom: 16px;
	padding-top: 26px;
	margin: 0;
	line-height: 150%;
	font-size: 1.625rem;
}

h1.alt_banner span {
	color: var(--hal-color-heading-strong);
	font-size: 1.25rem;
	display: block;
	margin-top: 10px;
}

body.playroom span.dropcap3 {background-color: #ffc0cb;}

body.playroom .product-list .header-copy {margin: 50px auto 0 auto;}

img.playroom-logo {
	display: inline-block;
	padding-right: 12px;
	padding-left: 3px;
}

h3.organic-styles {
	color: pink;
	text-decoration: underline;
	text-align: center;
	text-underline-offset: 6px;
	/* literal, not --hal-link-underline-thickness: this is a decorative heading, not a link, and the
	   link token must keep one meaning */
	text-decoration-thickness: 1px;
	text-decoration-color: #ffe9ed;
	margin-top: 36px;
	margin-bottom: 16px;
}

body.playroom h5.fiber-info {text-align: center;}

body.playroom h5.fiber-info {color: var(--hal-color-text-muted-strong);}

body.playroom h5.fiber-info a.sf-button.green {
	margin: 0 auto;
	display: block;
	width: 12em;
	margin-top: 6px;
}

.product-list .header-copy h4.copy-emphasis {
	font-weight: 400;
	border-bottom: 1px solid #ffe5ee;
	color: var(--hal-color-text-mid);
}

body.playroom .copybox {
	padding-bottom: 12px;
	border-bottom: 1px solid #ffe5ee;
}

body.playroom .inner-page-wrap {margin-bottom: 0;}

.signoff {
	text-align: center;
	color: var(--hal-color-text-muted);
}

.header-copy h5 {
	font-size: 1rem;
	text-decoration: none;
	margin-top: -6px;
	color: var(--hal-color-text-muted);   /* t-102: was -faint, 2.32:1 */
	margin-bottom: 4px;
	font-weight: 300;
	font-style: normal;
	text-align: center;
}

/* pinterest save icon positioning */
.pinterest-for-woocommerce-image-wrapper {
	right: 0px;
	left: initial;
	top: -21px;
	opacity: 0.4 !important;
}

.pinterest-for-woocommerce-image-wrapper:hover {opacity: 1 !important;}

/* hide on mobile, can't be seeing a million pinterest icons. */
body.mobile-browser .pinterest-for-woocommerce-image-wrapper {display: none;}

/* hide sorting and FIRST pagination from listing pages. REFACTOR once dev fixes theme hook */
/* .page-content > .woocommerce-count-wrap:first-child {display: none;} */

/* new filtering */
	.prdctfltr_wc {
		position: static;
	}

	.prdctfltr_wc form {
		margin-bottom: -10px;
		margin-top: -10px;
	}

	.prdctfltr_close_sidebar {display: none;}

	.prdctfltr_wc .prdctfltr_filter_title .prdctfltr_woocommerce_filter {
		justify-content: flex-start;
		align-items: baseline;
		flex-wrap: wrap;
		font-size: 0.875rem;
		margin-right: 5px;
		align-self: baseline;
	}

	.prdctfltr_topbar {
		margin-left: 30px;
	}

	/* slug buttons, plus all rugs link in header.  */
		.prdctfltr_topbar > span
	,	.all-rugs-link a {
		font-size: 0.6875rem;
		background-color: var(--hal-color-surface);
		border: 1px solid var(--hal-color-border-light);
		border-radius: 7px;
		display: inline-block;
		white-space: nowrap;
		padding: 0.25em 1em;
		margin-right: 0.5em;
		margin-bottom: 0.5em;
		padding-left: 0;
	}

	.all-rugs-link {
		position: relative;
		top: 80px;
		float: right;
		z-index: 2;
		height: 31px;
		margin-bottom: -31px;
		margin-right: 0;
	}

	.all-rugs-link a {
		color: var(--hal-color-text-muted-strong);
	}

	.all-rugs-link a:hover {
		color: #222;
		border-color: #bbb;
	}

	/* empty alt text keeps the glyph out of the link's accessible name — see t-031 */
	.all-rugs-link a:before {
		content: "\f02e";
		content: "\f02e" / "";
		color: var(--hal-color-link-accent) !important;
		font-weight: 900;
		font-family: 'Font Awesome 5 Free'!important;
	}

	.prdctfltr_topbar>span:before {display: none;}
	.prdctfltr_wc.prdctfltr_woocommerce.pf_select>span span {cursor: default;}

		.prdctfltr_topbar .prdctfltr-delete
	,	.all-rugs-link a:before {
		color: var(--hal-color-danger);
		position: relative;
		top: 1px;
		font-size: 0.75rem;
		line-height: 100%;
		border-radius: 7px;

		padding-left: 4px;
		padding-right: 5px;
		padding-bottom: 5px;
		padding-top: 5px;
	}


	.prdctfltr_topbar .prdctfltr-delete:hover {
		background-color: var(--hal-color-danger-bg);
		color: var(--hal-color-white);
	}

	/* dropdown styling */
	.prdctfltr_wc .prdctfltr_filter {
		padding-right: 0;
	}

	.prdctfltr_woocommerce .prdctfltr_filter.disabled {display: none !important;}

	.prdctfltr_wc .prdctfltr_filter_title {
		display: inline-block;
		font-size: 0.875rem;
		font-weight: normal;
	}

	.prdctfltr_wc.pf_default_inline .prdctfltr_woocommerce_filter_submit {margin-top: 0;}

	.prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_filter .prdctfltr_regular_title {
		margin-bottom: 4px;
		padding: 6px 10px;
		font-weight: normal;
		color: var(--hal-color-text-muted-strong);
		font-size: 0.875rem;
		line-height: 16px;
		border-color: var(--hal-color-border-light);
	}

	.prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_filter .prdctfltr_regular_title:hover {
		color: var(--hal-color-black);
		border-color: var(--hal-color-border-strong);
	}

	.prdctfltr_wc.prdctfltr_woocommerce.pf_select i.prdctfltr-down,
	.prdctfltr_wc.prdctfltr_woocommerce.pf_select i.prdctfltr-up {
		top: 5px;
		right: 10px;
		font-size: 1.25rem;
	}

	/* the popup boxes */
	.prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_filter .prdctfltr_add_scroll {
		position: absolute;
		width: calc(100% - 10px);
		padding: 2px;
		top: 33px;
	}

	.prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_filter .prdctfltr_add_scroll .prdctfltr_checkboxes {
		padding-right: 0;
		padding-top: 0;
	}

	/* Hide a facet whose only option is already applied. `.prdctfltr_filter_wrapper` is in the chain
	   for specificity, not structure: below 900 the plugin sets `display: block !important` from a
	   SEVEN-class selector (`:not()` counts its argument), which beat the six-class version of this
	   rule — so every facet reappeared on mobile. See css/AGENTS.md. */
		body.filtering-pa_fabric .prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_woocommerce_ordering .prdctfltr_filter_wrapper .prdctfltr_pa_fabric
	,	body.filtering-pa_weave .prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_woocommerce_ordering .prdctfltr_filter_wrapper .prdctfltr_pa_weave
	,	body.filtering-pa_palette .prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_woocommerce_ordering .prdctfltr_filter_wrapper .prdctfltr_pa_palette
	,	body.filtering-pa_design .prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_woocommerce_ordering .prdctfltr_filter_wrapper .prdctfltr_pa_design
	,	body.filtering-pa_dimensions .prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_woocommerce_ordering .prdctfltr_filter_wrapper .prdctfltr_pa_dimensions
	,	body.filtering-features .prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_woocommerce_ordering .prdctfltr_filter_wrapper .prdctfltr_product_tag
	{display: none !important;}

	/*

	.prdctfltr_filter label::after {
		content: "";
		border-bottom: 1px solid var(--hal-color-border-light);
		width: 33%;
		height: 1px;
		display: block;
	}

	.prdctfltr_filter label:last-child:after {display: none;}
 */

	.prdctfltr_wc.prdctfltr_round .prdctfltr_filter label > span:before,
	.prdctfltr_wc.prdctfltr_round .prdctfltr_filter label.prdctfltr_active > span:before {
		display: none;
		/*
		margin-right: 6px;
		margin-left: 4px;
		width: 12px;
		height: 12px;
		margin-top: 4px;
  */
	}

	.prdctfltr_wc .prdctfltr_customize {
		width: calc(100% - 4px);
		margin-right: 0;
	}

	/* filter popup checkbox / row */
		.prdctfltr_filter label {
			min-height: 26px;
			padding-top: 2px;
			padding-left: 8px;
			margin-bottom: 0;
			font-size: 0.8125rem;
			color: var(--hal-color-text-muted-strong);
		}

		.prdctfltr_filter label:hover {
			background-color: #d2e48e;
		}

		label.prdctfltr_active,
		label.prdctfltr_active:hover {
			background-color: #f2f2f2;
			cursor: default;
		}

	/* orderby styling */
		.prdctfltr_filter_wrapper .prdctfltr_filter {
			width: calc(20% - 2px);
		}

		.prdctfltr_wc .prdctfltr_filter.prdctfltr_orderby {
			margin-bottom: -28px;
			width: 100px;
			clear: left;
		}

		/* hide when no results */

	.prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_filter.prdctfltr_orderby .prdctfltr_regular_title {
		padding: 0 10px;
		font-size: 0.625rem;
		line-height: 1.6;
		color: var(--hal-color-text-muted);
		font-family: "Tahoma", Arial, Helvetica, sans-serif;
		text-transform: uppercase;
	}

		.prdctfltr_wc .prdctfltr_filter.prdctfltr_orderby i.prdctfltr-down,
		.prdctfltr_wc .prdctfltr_filter.prdctfltr_orderby i.prdctfltr-up {
			position: relative;
			display: inline-block;
			top: 1px;
			left: 8px;
			font-size: 0.875rem;
		}

		.prdctfltr_wc.prdctfltr_round .prdctfltr_filter label > span:before,
		.prdctfltr_wc.prdctfltr_round .prdctfltr_filter label.prdctfltr_active > span:before {
			width: 9px;
			height: 9px;
		}

		.prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_filter.prdctfltr_orderby .prdctfltr_add_scroll {
			top: 22px;
		}

	.prdctfltr_orderby.prdctfltr_filter label {
		font-size: 0.625rem;
		line-height: 2.2;
	}

		.prdctfltr_count {
			margin-left: 2px;
			margin-top: -1px;
			line-height: 12px;
			height: 14px;
			border-color: #ccc;
			padding-left: 2px;
			padding-right: 3px;
			border-radius: 4px;
		}

		/* for now let's display price sorting always, since it works.
		.prdctfltr_ft_price,
		.prdctfltr_ft_price-desc { display: none !important; }

		body.bysize .prdctfltr_ft_price,
		body.bysize .prdctfltr_ft_price-desc { display: inherit !important;}
		*/

		label.prdctfltr_ft_price:after,
		label.prdctfltr_ft_price-desc:after,
		body.order-price-desc .prdctfltr_title_remove[data-key=orderby] + span:after,
		body.order-price .prdctfltr_title_remove[data-key=orderby] + span:after {
			font-family: "Font Awesome 5 Free";
			 font-size: 1rem;
			 font-weight: 600;
			 vertical-align: -2px;
			 color: var(--hal-color-text-soft);
			 padding-left: 6px;
		}

		label.prdctfltr_ft_price-desc:after,
		body.order-price-desc .prdctfltr_title_remove[data-key=orderby] + span:after {
			content: "\f160";
			/*content: "\f886";*/
		}

		label.prdctfltr_ft_price:after,
		body.order-price .prdctfltr_title_remove[data-key=orderby] + span:after {
			content: "\f884";
			/*content: "\f162";*/
		}

		label.prdctfltr_ft_price:after,
		label.prdctfltr_ft_price-desc:after {
			font-size: 0.875rem;
		}

/* unsure if used */

/* end new filtering */

/* bysize support */
.shopmain.bysize.woocommerce .page-description h2 {
	text-align: center;
	color: var(--hal-color-text-muted);
	font-size: 0.875rem;
}

/* sale support */
.woocommerce span.onsale {
	background: var(--hal-color-sale-badge-bg);
	color: var(--hal-color-sale-badge-text);
	font-size: 13px;
	letter-spacing: 2px;
	overflow: visible;
	z-index: 3;
	display: none;
}

.woocommerce.sale span.onsale {
	display: block;
}

.shopmain.sale.woocommerce .woocommerce-result-count {
	float: left;
}

/* hide viewproduct sale banners for now, they're hideous. */
body.single span.onsale {display: none;}

/* product sale styling */
ins {
	text-decoration: none;
}

ins span.amount {
	color: var(--hal-color-sale);
	font-weight: bold;
}

.sale-sizes span  {
	font-weight: bold;
}

.price ins span.amount,
.product-price ins span.amount {
	display: block;
}

.sale-sizes, .colorway-list {
	clear: left;
	text-align: center;
	font-size: 0.75rem;
}

.colorway-list {
	position: absolute;
	width: 100%;
	z-index: 5;
	margin: 0;
}

.colorway-list a {
	font-family: "Tahoma", Arial, Helvetica, sans-serif;
	width: 100%;
	letter-spacing: 1px;
	background-color: var(--hal-color-white);
	border-top: 1px solid var(--hal-color-surface-cool);
	border-bottom: 1px solid var(--hal-color-surface-cool);
	border-right: 1px solid #dfdfdf;
	opacity: 0.83;
	display: block;
	color: var(--hal-color-text-mid);
	line-height: 24px;
	height: 26px;
	box-sizing: border-box;
	/*opacity: 1;*/
}

.colorway-list a:hover {
/*	background-color: #dce8b2;*/
	color: var(--hal-color-link-accent);
	opacity: 1;
}

.colorway-list a i {
	padding-left: 6px;
	font-style: normal;
	text-decoration: inherit;
	color: var(--hal-color-link-accent);
}

.woocommerce form.woocommerce-ordering {
	float: left;
}

.woocommerce form.woocommerce-ordering select {
	height: auto !important;
	margin-bottom: 0;
}

/* listing product grid styling */

	.woocommerce .products ul, .woocommerce ul.products {
		max-width: 870px;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
		column-gap: 1.25em;
		row-gap: 2em;
		justify-items: start;
		align-items: start;
		margin: 0;
		padding-top: 10px;
	}

	.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
		float: none !important;
		margin: 0 !important;
		padding: 0;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* remove weird woocommerce table organizing rules */
	.woocommerce .products ul::before,
	.woocommerce .products ul::after,
	.woocommerce ul.products::before,
	.woocommerce ul.products::after {
		content: none;
		display: none;
	}

	/* Remove the custom stuff based on columns, its all grid now */
	.woocommerce ul.products li.first, .woocommerce-page ul.products li.first,
	.woocommerce ul.products li.last, .woocommerce-page ul.products li.last {
		clear: none;
		margin-left: 0;
		margin-right: 0;
	}
/* end grid styling for listproduct */


/* choose sizes button */
body.woocommerce ul.products li.product figure figcaption {background: transparent;}

li.product figcaption .shop-actions > a.button {
	background: var(--hal-color-ink) !important;
	text-align: center;
}

/* hide product category display */
.woocommerce span.posted_in {
	display: none;
}

.woocommerce ul.products li.product h3 {
	line-height: 15px;
	text-align: center;
}

.woocommerce ul.products li.product:hover {
	/* background-color: var(--hal-color-product-hover); */
}
/*
.woocommerce-page ul.products li.product h3 {border-bottom: 1px solid var(--hal-color-white);}

.woocommerce-page ul.products li.product:hover h3 {border-bottom-color: var(--hal-color-product-hover);}
*/

ul.products li.product .product-details {width: 100%;}

.woocommerce ul.products li.product figure {
	margin-bottom: 8px;
	box-shadow: 2px 2px 5px 0 rgba(40, 40, 40, .7);
}

/* end listing pages */


/* set page wrap same as no-space page wrap margin*/
.inner-page-wrap {
	margin-top: 16px;
}

.woocommerce div.product div.summary {
	margin-bottom: 0;
}

#product-title {margin-left: 0;}


.woocommerce .page-heading.alt-bg {
	border: none;
	background-color: transparent;
	padding-bottom: 0;
}

.woocommerce .page-heading .heading-text {
	float: none;
	margin-bottom: 10px;
	margin-left: 30px;
}

#product-title h1 {
	float: right;
	width: 48%;
	text-transform: uppercase;
	color: var(--hal-color-text-soft);
	font-size: 1.125rem;
	line-height: 120%;
	white-space: normal;
	padding-bottom: 6px;
	border-bottom: 1px solid #d9d9d9;
}

.woocommerce div.product .product-short {
	margin-bottom: 0;
}

.product-short h4 {
	text-align: center;
	margin-bottom: 5px;
}

/* Limit to just viewproduct page product-short */
.entry-summary div.product-short {
	margin-top: 20px;
	text-align: center;
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
	color: var(--hal-color-text-soft);
 }

.entry-summary div.product-short p {
	font-size: 0.9375rem;
	line-height: 1.35;
}

/* product image */
.woocommerce div.product div.images {
	z-index: 3;
	padding-bottom: 0;
}

/* lightslider tweaks */
	#product-img-slider .lSSlideWrapper {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		border-bottom: 1px solid var(--hal-color-border-mid);
		margin-bottom: 0;
	}

	/* Thumbnail visibility and hover states */
	.lSSlideOuter .lSPager.lSGallery li {
		opacity: 0.5; /* Dimmer for inactive thumbnails */
		min-height: 60px;
		transition: opacity 0.3s ease, border-color 0.3s ease;
		border: 1px solid transparent; /* Invisible border to prevent jumping */
		box-sizing: border-box;
	}

	/* Active thumbnail - full opacity and grey border */
	.lSSlideOuter .lSPager.lSGallery li.active {
		opacity: 1 !important; /* Force full opacity for active */
		border: 1px solid #888; /* Grey border for active */
	}

	/* Hover state - brighter but not as much as active */
	.lSSlideOuter .lSPager.lSGallery li:hover:not(.active) {
		opacity: 0.8;
		border: 1px solid #a8a8a8; /* Light grey on hover */
	}

	.lSPager button.gallery-thumb {
		border: none;
		background-color: transparent;
	}

	/* Thumbnail images */
	.lSSlideOuter .lSPager.lSGallery img {
		display: block;
		visibility: visible;
		height: auto;
		max-width: 100%;
		width: 100%;
	}

	/* Zoom container styles */
	#product-img-slider .zoomContainer {
		border-color: var(--hal-color-border-mid);
		z-index: 101;
		pointer-events: none;
	}

	#product-img-slider .zoomContainer:hover {
		border: 1px solid var(--hal-color-border-mid);
		border-bottom-width: 0;
	}

	/* Navigation arrows */
	#product-img-slider .flex-direction-nav a {
		z-index: 100;
	}

	/* Override parent theme's disabled arrow behavior */
	.lSAction > a.disabled {
		pointer-events: none !important;
		opacity: 0 !important;
	}

	/* Smooth arrow transitions */
	.lSSlideOuter .lSAction > a {
		transition: opacity 0.2s ease, right 0.35s ease, left 0.35s ease;
	}

	/* Hide arrows during initialization */
	.lSSlideOuter:not(.slider-loaded) .lSAction {
		visibility: hidden;
	}

	.slider-loaded + .lSAction {
		visibility: visible;
	}

	/* Hide white dot link to full image */
	#product-img-slider ul.slides li > a {
		display: none;
	}

	/* Product image navigation spacing */
	#product-img-nav {
		margin-top: 16px;
	}

	/* Product notice styling */
	#product-img-notice {
		display: none;
		margin-left: 28px;
		font-size: 0.75rem;
		color: var(--hal-color-text-muted);
		line-height: 1.25;
		margin-top: 2px;
		margin-bottom: 8px;
	}

	#product-img-notice i {
		color: var(--hal-color-text-muted);   /* t-102: was -faint, 2.32:1 */
		font-style: inherit;
	}

	/* Allow overflow for zoom functionality */
	.woocommerce div.product div.images,
	#product-img-slider {
		overflow: visible;
	}

	/* Emergency fallback for first image visibility */
	body.hal-live #product-img-slider .slides > li:first-child {
		opacity: 1;
	}
/* end slider */

/* product variations table */
div.summary table.variations-order-table {
	--hal-cell-v-pad: 8px;
	--hal-button-v-pad: 6px;

	width: 100%;
	margin-bottom: 20px;
}

div.summary table.variations-order-table td,
div.summary table.variations-order-table thead th {
	padding-block: var(--hal-cell-v-pad);
	padding-inline: 0;
}

div.summary table.variations-order-table thead th {
	border-bottom: 1px solid var(--hal-color-border-subtle);
	font-size: 80%;
	font-weight: bold;
	letter-spacing: inherit;
	color: inherit;
	text-align: left;
}

b.size-sep {
	font-size: 85%;
	font-weight: normal;
}

div.summary table.variations-order-table td:nth-child(1) b {
	color: var(--hal-color-text-muted);
}

div.summary table.variations-order-table tr.runner td:nth-child(1) {
	letter-spacing: inherit;
}

/* t-102: the prime marks were #aaa — 2.32:1 on white, 2.17:1 on even rows. 32 painted nodes.
   Now the same muted grey as the rest of the cell; there is no lighter value that still clears
   4.5:1 on #f7f7f7, so the size distinction is carried by the glyph rather than by colour. */
div.summary table.variations-order-table td:nth-child(1) i {
	color: var(--hal-color-text-muted);
	font-style: inherit;
}

div.summary table.variations-order-table td:nth-child(1),
div.summary table.variations-order-table th:nth-child(1) {
	width: 39%;
	letter-spacing: 1px;
	color: var(--hal-color-text-mid);
	font-weight: bold;
}

div.summary table.variations-order-table td:nth-child(2),
div.summary table.variations-order-table th:nth-child(2) {
	width: 25%;
	text-align: center;
}

div.summary table.variations-order-table td:nth-child(3),
div.summary table.variations-order-table th:nth-child(3) {
	width: 15%;
	font-size: 0.625rem;
	font-weight: bold;
}

/* Keep unavailable variations subordinate to purchasable sizes and prices. */
div.summary table.variations-order-table tr:has(.no-stock-button) td:nth-child(1),
div.summary table.variations-order-table tr:has(.no-stock-button) td:nth-child(3) {
	font-weight: normal;
}

/* Backordered rows read the same way: size and price drop to regular weight. */
div.summary table.variations-order-table tr:has(button.backorder) td:nth-child(1),
div.summary table.variations-order-table tr:has(button.backorder) td:nth-child(3) {
	font-weight: normal;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: inherit;
	color: inherit;
}

div.summary table.variations-order-table td:nth-child(4),
div.summary table.variations-order-table th:nth-child(4) {
	width: 21%;
	text-align: right;
}

div.summary table.variations-order-table tbody tr:nth-child(even) td {
	background-color: var(--hal-color-surface);
}

div.summary table.variations-order-table td form {
	display: inline;
	margin: 0;
}

body.single .product .no-stock-button {
	width: 48px;
	padding: 3px 4px;
	float: none;
	margin: 0;
	background-color: var(--hal-color-no-stock-bg);
	border-radius: 2px;
	/* t-057: the light surface takes the shared action label colour, not white (1.27:1 on #E6E6E6). */
	color: var(--hal-color-action-text);
	text-align: center;
}

div.summary table.variations-order-table button.single_add_to_cart_button,
div.summary table.variations-order-table .no-stock-button {
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	padding-block: var(--hal-button-v-pad);
	font-size: inherit;
	font-weight: normal;
	line-height: 1;
	text-transform: uppercase;
}

div.summary table.variations-order-table button.single_add_to_cart_button {
	padding-inline: 6px 8px;
}

/* t-054: the backorder button keeps its own hue (t-044: sold-out grey, backorder blue, buy green),
   so it must ALSO keep its own label colour. The sitewide action rule excludes .backorder from the
   SURFACE but the WooCommerce .button.alt block sets the label on every alt button, which briefly left
   #666 on #4A7891 = 1.19:1 — a worse violation than the one this task set out to fix, created by
   moving a colour without its background. Surface and label travel together, always. */
div.summary table.variations-order-table button.single_add_to_cart_button.backorder {
	background: var(--hal-color-backorder-bg) !important;
	color: var(--hal-color-action-text) !important;
}

/* t-057: backorder is the one stock state that is still a BUTTON, so it gets the same hover
   relationship as the buy button — surface one step darker, label to #333. Sold Out is a div and
   has no hover. */
div.summary table.variations-order-table button.single_add_to_cart_button.backorder:hover {
	background: var(--hal-color-backorder-bg-hover) !important;
	color: var(--hal-color-text) !important;
}

/* The backorder CART label matches its row: regular weight, not the sitewide action 600. Needs the
   extra class to outrank the !important action-font rule further down. */
.woocommerce div.summary table.variations-order-table button.single_add_to_cart_button.backorder:not(.swatch) {
	font-weight: normal !important;
}

/* And its plus icon sits 25% lighter than the label, derived from it rather than pinned — the
   backorder action should not compete with the in-stock one. Decorative (aria-hidden), so the
   softer value carries no meaning. Unsupported browsers inherit the label colour, today's look. */
div.summary table.variations-order-table button.single_add_to_cart_button.backorder i {
	color: oklch(from currentColor calc(l * 1.25) c h);
}

div.summary table.variations-order-table span.variation-availability {
	color: var(--hal-color-status-accent);
	font-size: 110%;
}

div.summary table.variations-order-table span.variation-availability.backorder {
	color: var(--hal-color-text-muted);
	font-size: 90%;
}

/* tab styling */
	.woocommerce div.product .woocommerce-tabs .panel {
		padding: 10px 8px !important;
	}

	/* swatch tab */
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		color: var(--hal-color-text-muted);
	}
	/* last tab clearfix */
	.wc-tabs-wrapper .wc-tab:last-child:after {
		display: table;
		line-height: 0;
		content: "";
		clear: both;
	}

	/* fix annoying tab misalignment with wprocket enabled */
	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		background: var(--hal-color-white);
	}

	/* product care tab */
	.product-care ul li {
		list-style-type: circle;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
		text-decoration: underline;
		text-underline-offset: 4px;
		text-decoration-color: var(--hal-color-brand-wash-line);
		text-decoration-thickness: 2px;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) a:hover {
		background-color: var(--hal-color-brand-wash);
		color: var(--hal-color-black);
	}

	/* avoid FOUC */
	#tab-swatch, #tab-care, #tab-reviews {display: none;}

	#tab-swatch h3 {font-size: 1rem;}

div.summary button.single_add_to_cart_button.swatch {
	background-color: var(--hal-color-surface) !important;
	color: #626268;
	border: 1px solid var(--hal-color-border-light) !important;
	font-size: 90%;
}

div.summary button.single_add_to_cart_button.swatch i {
	font-size: 0.875rem;
}

div.summary button.single_add_to_cart_button.swatch:hover {
	background-color: var(--hal-color-cta-bg-hover) !important;
}

.summary form {
	margin-bottom: 0;
}

.product .summary form:last-of-type {
}

.product .summary .summary-top {
	display: none;
}

.product .summary .summary-top-replacement {
	margin-bottom: 10px;
}

.product .summary .summary-top-replacement p.free-shipping {
	font-size: 1.125rem;
	line-height: 1em;
	text-align: center;
	color: var(--hal-color-text-soft);
	margin: 0px auto;
}

/* Return-policy footnote. Was an <h4> until t-030 — see template/checkout/rugpads.php. */
.summary-top-replacement h4,
.summary-top-replacement .hal-return-policy {
	text-align: right;
	font-size: 0.75rem;
	font-family: "Tahoma", Arial, Helvetica, sans-serif;
	color: var(--hal-color-text-muted);
	margin: 0;
	font-style: italic;
}

ul.products li.product span.wc-new-badge {
	display: none !important;
}

div.summary div.product-share ul li a {
	color: #87b319 !important;
	font-size: 1.8em !important;
}

div.swatch_container h4 {
	display: inline;
	margin-right: 10px;
	line-height: 26px;
}

div.swatch_container {
	margin: 20px 0 10px 0;
}

.woocommerce-tabs {margin-top: 20px;}

/* hide pinterest icon */
.product-share li:last-child {
	display: none;
}

/* uh, some product page stuff I think... */
body.single .product .summary #product-accordion.accordion {
	margin-bottom: 0;
}

body.single .product .summary #product-accordion.accordion .accordion-group:nth-child(1) {
	border-bottom: 0;
	margin-bottom: 0;
}

body.single .product .summary #product-accordion.accordion .accordion-group:nth-child(2),
body.single .product .summary #product-accordion.accordion .accordion-group:nth-child(3),
body.single .product .summary .product_meta p .posted_in,
body.single .product .summary .product_meta p .tagged_as {
	display: none;
}

body.single .product .summary .product_meta {
	display: none;
}

body.single .product .summary .product-share {
	margin-top: 0;
}

/* End product page */


/* woocommerce */

/* cart page */
body.woocommerce-cart .cart_totals small {display: none; }
.woocommerce-cart .woocommerce .container form .row .span3 { text-align: center; }

.wcppec-checkout-buttons__separator {display: none;}
div.wc-proceed-to-checkout #wc-stripe-payment-request-button-separator {display: none !important;}
.woocommerce .cart_totals .woo_pp_cart_buttons_div,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	text-align: center;
}

body.woocommerce-cart div.wc-proceed-to-checkout {margin-top: 28px;}

#wc-stripe-payment-request-wrapper {padding-top: 0 !important;}

/* t-148 item 1: the express-checkout stack. Three separate margin owners set the two gaps and nobody
   had set them against each other — measured 414/mobile on dev: 12px above PayPal, 10px above ours.
   One flex gap replaces all three, so the spacing has a single owner and cannot drift again. */
.woocommerce-cart div.wc-proceed-to-checkout {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* !important is the narrow case css/AGENTS.md names: Stripe's JS writes an INLINE `margin-top: 1em`
   on its element, which no stylesheet selector can outrank. The gap is the flex container's now. */
.woocommerce-cart div.wc-proceed-to-checkout > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Ours measured 42px against PayPal's 45 and Stripe's 40 — the short one in the stack. 42/14px/20px
   are all the PARENT theme's (neighborhood/style.css ~9686); this rule matches its specificity and
   wins on load order. The floor is PayPal's measured height and js/cart.js raises the variable if a
   gateway renders taller, since both are third-party-drawn and neither height is ours to set. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	/* A flex container drops whitespace-only runs, so the space before the arrow glyph vanished. */
	gap: 0.35em;
	height: auto;
	min-height: var(--hal-express-btn-h, 45px);
	/* The parent's `line-height: 42px` was doing the job of a height. Left alone with `height: auto`
	   it stacks on the `padding: 12px 10px !important` that hal_responsive.css sets between 768 and
	   1024 and the button measured 68px — the old fixed height had been masking that conflict.
	   A normal line-height lets min-height be the only thing setting the box. */
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 0;
	box-sizing: border-box;
}

/* mini cart sidebar */
.bag-product-title {width: 90%; }

/* align remove coupon button */
a.woocommerce-remove-coupon:before {
	content: '\a';
	white-space: pre-wrap;
}

/* align rugpad text to upper right of cart */
	h2.bag-summary {
		float: left;
		margin-bottom: 4px;
	}

	.rugpad-link p {
		margin: 0;
		padding-top: 17px; /* 13px font plus bag-summary margin-bottom) */
		font-size: 0.8125rem;
		font-style: italic;
		text-align: right;
		color: #6a6a6a;
	}

	body.single-product .rugpad-link p {padding-top: 16px;}

	.woocommerce-message .rugpad-link p {
		font-style: italic;
		font-size: 0.75rem;
		color: var(--hal-color-text-soft);
		text-align: left;
		padding-top: 0 !important;
	}
	.woocommerce-message .rugpad-link a {
		color: var(--hal-color-brand-dark);
		font-weight: bold;
		text-decoration: underline;
	}
	.woocommerce-message .rugpad-link a:hover {color: #3b4418;}

	/* align cart and cart totals top bar */
	h2.bag-totals {font-size: 1.25rem; line-height: 1.2;}

	.woocommerce .continue-shopping {
		text-decoration: none;
		margin: 0 auto;
		font-size: 0.875rem;
	}

	/* continue shopping in right hand cart column */
	.woocommerce .span3 .continue-shopping {display: table; margin: 0 auto; margin-top: 32px;}

	.woocommerce .cart_totals table th {vertical-align: top;}
	.woocommerce .cart_totals table tr.shipping th,
	.woocommerce .cart_totals table tr.shipping td {
		padding-bottom: 0;
	}
	.woocommerce .cart_totals table tr.shipping p {margin: 0;}

	.woocommerce table.shop_table_responsive tr td.product-thumbnail::before {content: none;} /* remove colon before image */

	/* hide promo box unless admin */
	table.cart td.actions {display: none;} /* hide whole row since update button is removed */
	.woocommerce-cart .coupon {display: none;}
	.woocommerce-cart.shopman .coupon {display: block;}
	.woocommerce-cart.shopman .cart input[name="update_cart"] {float: right !important;}
	.woocommerce-cart.shopman .actions {display: table-cell;}

	.woocommerce table.shop_table tr td,
	.woocommerce-page table.shop_table tr td,
	.woocommerce table.shop_table tr td.product-price,
	.woocommerce table.shop_table tr td.product-subtotal {
		padding: 10px 0;
		vertical-align: middle;
	}

	 .woocommerce table.shop_table tr td.product-subtotal {
		font-weight: bold;
	}

	.woocommerce .cart input[name="update_cart"] {
		display: none !important;
		float: left !important;
	}

	/* We are using the woo template, which has the remove button first.
		To prevent FOUC, we hide the table...
		then show it in JS after moving the remove button to the end of each row.
		@see theme/js/cart.js
	*/
	body.woocommerce-cart table.shop_table {
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
	}

	body.woocommerce-cart table.shop_table th {
		font-family: "Open Sans", ui-sans-serif;
		text-transform: uppercase;
		color: var(--hal-color-text-muted-strong);
		letter-spacing: 1px;
	}

	/* fix vertical alignment on subtotal etc boxes */
	.shop_table p {
		margin: 0;
		padding: 0;
	}

	/* coupon remove styling (for gift coupons) */
		tr.cart-discount[class^="coupon-"] {
			display: flex;
			justify-content: space-between; /* Adjusted for better spacing */
			align-items: center; /* This will vertically align flex items */
		}

		tr.cart-discount .remove {
			display: inline-table; /* Changed to inline-flex for better alignment */
			align-items: center; /* Align the '×' vertically */
			margin-right: 5px; /* Optional: Adds some space between the '×' and the price */
		}

		.woocommerce-Price-amount {
			display: inline-flex; /* Changed to inline-flex for better alignment */
			align-items: center; /* Align the price vertically */
		}

		.cart-discount td span.woocommerce-Price-amount {
			color: var(--hal-color-danger);
			font-style: italic;
			transform: translateY(-1px);
		}

		.cart-discount .hal-coupon {
			display: inline-block; /* Changed to inline-flex for better alignment */
			vertical-align: bottom; /* Align the 'Gift' text vertically */
		}

		.cart-discount .hal-coupon span {
			font-size: 0.6875rem;
		}

		.hal-coupon {
			 display: inline-block;
			 vertical-align: bottom; /* Adjust as needed */
		}

	/* qty box */
		.woocommerce .quantity input.qty {
			padding: 4px;
			font-size: 0.75rem;
		}

		.qty-adjust a:hover {
			/*color: #7e9720;*/
			background-color: var(--hal-color-surface-alt);
			font-size: 125% !important;
		}

		/* smooth font size increase transition on hover */
		.qty-adjust a {
			 transition: font-size ease-in-out .1s;
			 transform: translateZ(0);
			 will-change: transform;
			 border-left: 1px solid #e3e3e3;
		 }

		/* Quantity steppers: 24x24 minimum touch target (WCAG 2.5.8 / t-009).
		   The parent theme sets these to 30x20 at `.woocommerce .quantity .qty-plus` (0,3,0), so the
		   override has to carry at least that specificity — a plain `.qty-adjust a` (0,1,1) loses and the
		   buttons stay 20px tall. Width already passed at 30px; only the height failed.
		   Flex centering replaces the parent's line-height nudges (26px on plus, 14px on minus) and the
		   ones that were here — all of them were faking vertical centering against a box too short to
		   centre in, and had to be re-derived per breakpoint. The hover font-size growth now stays inside
		   a fixed box. */
		.woocommerce .quantity .qty-adjust a,
		.woocommerce .quantity .qty-plus,
		.woocommerce .quantity .qty-minus {
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			width: 30px;
			height: 24px;
			line-height: normal;
		}

		.woocommerce .quantity .qty-minus {
			border-top: 1px solid #e3e3e3;
		}

		/* Keep the 24px cart targets while making their two-row stack match the quantity input. */
		.woocommerce table.shop_table .product-quantity .quantity {
			display: flex;
			height: 48px;
		}

		.woocommerce table.shop_table .product-quantity .quantity input.qty {
			box-sizing: border-box;
			width: 36px;
			height: 48px;
		}

		.woocommerce table.shop_table .product-quantity .qty-adjust {
			display: flex;
			flex-direction: column;
			float: none;
			margin-left: 0;
		}

/* Invalid cart quantity (t-034). Written into the quantity CELL by js/cart.js and tied to the input
   with aria-describedby; hidden until there is something to say. --hal-color-danger is 5.56:1 on
   white. In-flow by default, which is what the stacked mobile cart wants. */
.hal-qty-error {
	color: var(--hal-color-danger);
	background-color: var(--hal-color-white);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 6px 0 0;
	padding: 6px 8px;
	border: 1px solid var(--hal-color-danger);
	border-radius: 3px;
	text-align: left;
	clear: both;
}

/* On the wide table layout the quantity column is only ~100px, far too narrow to read a sentence in,
   so the message becomes a callout anchored under the field. Absolute, so it does not stretch the
   column and shove the whole table around every time it appears; right-aligned to the cell so it
   cannot run off the edge of the table. It is transient and only overlaps the row below while an
   entry is actually invalid. */
@media (min-width: 768px) {
	.woocommerce table.shop_table td.product-quantity {
		position: relative;
	}

	.woocommerce table.shop_table td.product-quantity .hal-qty-error {
		position: absolute;
		z-index: 3;
		top: 100%;
		right: 0;
		width: 210px;
		margin-top: 2px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	}
}

.confidence-logos {
	width: 350px;
	height: 72px;
	margin: 0 auto;
}

.woocommerce-checkout .confidence-logos {
	margin-top: 20px;
}

.confidence-logos > div {
	margin-left: 40px;
}

.confidence-logos > div:first-child {
	margin-left: 0;
	float: left;
}

.confidence-logos > div:last-child {
	float: right;
}

.norton-logo, #geotrust-seal {
	float: left;
	width: auto;
}

/* trustguard logo -- it's 130 in footer/sidebar (aside), 180 when inline)' */
.tgbanner img {
	border: 0;
	width: 166px;
	height: 60px;
	margin-top: -6px;
	opacity: 0.9;
}

.confidence-logos #sa-merchant-seal,
.confidence-logos #greenpeople,
.confidence-logos .norton-logo {
	float: left;
	width: 130px;
	margin-top: 4px;
}

/* hide by default */
.apple-pay-logo {
	display: none;
	margin-top: 8px;
	font-size: 0.875rem;
	color: var(--hal-color-black);
	margin: 0 auto;
	text-align: center;
	font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.apple-pay-logo img {
	width: 40px;
	margin-top: 0;
	margin-left: 2px;
}

#logo .apple-pay-logo {
	display: none !important;
	float: right;
	margin-right: 30px;
}

.apple-pay-logo.display-always {display: block !important;}

#logo .apple-pay-logo img {
	width: 36px;
	margin: 0;
	margin-top: -2px;
}

#footer .confidence-logos .apple-pay-logo {
	float: left;
	width: 80px;
	padding-left: 25px;
}

#footer .apple-pay-logo span {display: none;}
#footer .apple-pay-logo img {width: 100%;}

/* sidebar styling */
aside .confidence-logos .norton-logo,
aside .confidence-logos #geotrust-seal,
aside .confidence-logos #sa-merchant-seal {
	float: none;
	margin: 36px auto;
}

#footer .confidence-logos {
	margin-top: -62px;
	height: auto;
	width: auto; /* prevent page scroll with footer */
}

#footer .confidence-logos > div {
	float: none !important;
	margin: 0;
	margin-top: 20px;
}

aside .confidence-logos {
	width: auto;
	height: auto;
}

#footer .norton-logo .tgbanner img {
	width: 130px;
	height: 47px;
	margin-top: 0;
}

/* login form styling */
	#customer_login h2 {
		text-align: center;
		 border-bottom: none;
		 padding-bottom: 0;
	}

	#customer_login form.woocommerce-form {
		margin-top: 0;
	}

	#customer_login button.woocommerce-button {
		float: right;
		margin-right: 0;
	}

	#customer_login button.woocommerce-button:hover {
		background: var(--hal-color-cta-bg-hover);
		 color: var(--hal-color-white);
	}

	.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme input {
		margin-right: 4px;
		vertical-align: text-bottom;
		margin-bottom: 1px;
	}

	p.woocommerce-LostPassword {
		margin-bottom: 0;
	}

	#customer_login .col-2 h2::after,
	#customer_login .col-1 h2::after {
		color: var(--hal-color-text-muted);
		font-size: 70%;
		vertical-align: middle;
	}

	#customer_login .col-2 h2::after {
		content: "\00a0\00a0\00a0(New Customer)";
	}

	#customer_login .col-1 h2::after {
		content: "\00a0\00a0\00a0(Existing Customer)";
	}

	.form-row button.woocommerce-form-register__submit {margin-top: 18px;}

	.hal-login-intro {
		font-size: 90%;
		margin-top: 19px;
		color: var(--hal-color-text-muted);
		text-align: center;
	}

/* last right nav menu don't overspace */
aside.sidebar section:last-of-type {
	padding-bottom: 0;
}

aside .norton-logo .tgbanner {text-align: center; margin: 0 auto;}
aside .norton-logo .tgbanner img {margin-top: 0;}

#footer .ep_social_widget a {
	margin: 0 10px 3px 0;
}

/* line up with confidence logos, and center logos */
#footer .ep_social_widget {
	display: flex;
	justify-content: center;
	width: 130px;
}

#footer .ep_social_widget h4 {display: none;}

/* reviews gallery */
#cart-after {
	margin-top: 32px;
}

.woocommerce-page .cart-collaterals {
	margin-top: -60px;
	margin-bottom: 0;
	border: none;
	padding: 0;
}

/* t-148 item 2: js/hal.js sets this when Shopper Approved never filled the box, so a blocked or
   failed vendor script leaves no blank gap and no broken-image wordmark behind it. */
#shopper-review-gallery.hal-sa-empty {display: none;}

#shopper-review-gallery {
	min-height: 100px;
	max-width: 300px;
	max-height: 400px;
	overflow: hidden;
	text-align: left;
}

#shopper-review-gallery .sa_comments {
	line-height: 1.3em;
	height: 14em;
}

.sidebar #shopper-review-gallery,
.sidebar .norton-logo {
	margin: 36px 0;
}

#shopper-review-gallery .sa_review {
	border: 1px solid #ebebeb;
	clear: both;
	padding: 8px !important;
	overflow: hidden;
	cursor: default;
	height: auto;

	-moz-border-radius: 10px !important;
	-webkit-border-radius: 10px !important;
	-khtml-border-radius: 10px !important;
	border-radius: 10px !important;
}

.sa_comments:before {
	content: '' !important;
	display: none;
}

#shopper-review-gallery .sa_name {
	font-size: 0.75rem;
}

#shopper-review-gallery .sa_date {
	font-size: 0.6875rem;
	font-style: italic;
}

#shopper-review-gallery .sa_footer_container {
	text-align: center;
}

/* Rotation controls (t-098, 2.2.2). 28px squares clear 2.5.8 without an ::after; no border or fill
   at rest, so the glyph alone identifies the control and nothing boxy lands in the sidebar. */
#shopper-review-gallery .hal-sa-controls {
	display: flex;
	justify-content: center;
	gap: 2px;
	margin-top: 2px;
}

#shopper-review-gallery .hal-sa-btn {
	/* Same iOS reset as .hal-rs-btn: without it Safari keeps push-button styling and paints the
	   glyph in the system blue. `border: 0` plus a transparent background does not turn it off. */
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-variant-emoji: text; /* see the U+FE0E note in js/hal.js */
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--hal-color-text-muted-strong);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

#shopper-review-gallery .hal-sa-btn:focus-visible {
	background: var(--hal-color-action-bg);
	color: var(--hal-color-text);
}

/* Gated: iOS latches :hover until the next tap elsewhere, so a pressed button stayed lit. */
@media (hover: hover) {
	#shopper-review-gallery .hal-sa-btn:hover {
		background: var(--hal-color-action-bg);
		color: var(--hal-color-text);
	}
}

#shopper-review-gallery .sa_star {
	margin: 0;
	padding: 0;
	width: 20px;
	height: 19px;
	cursor: default;
	background: url('images/star-full-sm.png');
}


/* checkout page */

/* hide stripe checkout */
li.wc_payment_method.payment_method_stripe {display: none;}
/* Border-bottom dropped and the hover `text-decoration: none` with it (t-042): the dotted border
   paired with the sitewide underline to draw two lines, and the hover rule then removed the underline
   — the one cue that survives a reader mode — leaving only the border. */
.woocommerce .help-bar a:hover {text-decoration-line: underline;}

/* Hide Google Pay when Apple Pay is available */
body.hal-apple-pay-enabled #wc-stripe-express-checkout-element-googlePay {display: none !important;}

/* t-136: Stripe floors each express button at `min-width: 260px`, but the totals panel is 220px
   between 980 and 1199, so the flex row centres a 260 and it hangs 20px off each edge. `min()` caps
   the floor at the panel; a flat 0 would let `flex: 1 1 0%` sit two buttons side by side at 105px.
   `body` prefix because express-checkout.css uses the identical selector and loads after us. */
body #wc-stripe-express-checkout-element > div {min-width: min(260px, 100%);}

/* Above the checkout form the wrapper spans the whole 1200px row and the button's `flex: 1 1 0%`
   fills it — a full-bleed Apple Pay bar. Cap it to the Place Order button's 376px and centre it
   over the "— OR —" that follows. */
body.woocommerce-checkout #wc-stripe-express-checkout-element {
	max-width: 380px;
	margin-left: auto;
	margin-right: auto;
}

/* checkout error msg alignment, adjusts in responsive */
form.woocommerce-checkout > ul {margin-left: 20px;}

/* turn into pseudo popup */
body.woocommerce-checkout form.woocommerce-form-login {
	display: none;
	position: absolute;
	visibility: hidden;
	opacity: 0;
	margin: 0;
}

/* align with top menu bar. */
body.woocommerce-checkout div.woocommerce-form-login-toggle,
#payhal-finish-checkout {
	margin-top: -13px;
	height: 34px; /* prevent page jog */
}

body.payhal-checkout div.woocommerce-form-login-toggle {display: none;}

.woocommerce-form-login-toggle .woocommerce-info::before {
	font-family: "Font Awesome 5 Free";
	content: "\f4fc";
	color: var(--hal-color-text-muted);
	font-weight: 600;
 }

div.woocommerce-form-login-toggle div.woocommerce-info {
	margin-bottom: 0 !important;
	padding: 2px 50px;
	height: 30px;
}

body.payhal-checkout #payhal-finish-checkout {display: block !important;}

#payhal-finish-checkout div.woocommerce-info {
	background: #e7efa5;
	margin-bottom: 0 !important;
	padding: 2px 30px;
	height: 30px;
	text-align: center;
}

#payhal-finish-checkout div.woocommerce-info::before,
#payhal-finish-checkout div.woocommerce-info::after {
	position: absolute;
	display: inline;
	font-family: "Font Awesome 5 Free";
	content: "\f0a7";
	color: var(--hal-color-status-accent);
	font-weight: 600;
	font-size: 1.25rem;
	top: 3px !important;
}

#payhal-finish-checkout div.woocommerce-info::before {
	transform: scaleX(-1);
	filter: FlipH; /* IE 6-7-8 */
	left: 1.5em;
}

#payhal-finish-checkout div.woocommerce-info::after {
	right: 1.5em;
}

#hal_paypal_checkout {
	width: 100%;
	max-width: 400px;
	margin: 14px auto;
	padding-left: -15px;
	font-size: 1rem;
	color: var(--hal-color-text-muted-strong);;
	text-align: center;
	clear: both;
	padding: 7px 0;
	display: block;
	box-sizing: border-box;
	border-radius: 4px;
	background-color: #ffc439;
	background-image: none;
	height: 38px;
	cursor: pointer;
}

#hal_paypal_checkout span {
	display: inline-block;
	padding-left: 12px;
	vertical-align: top;
	line-height: 26px;
}

#hal_paypal_checkout img {display: inline-block;vertical-align: inherit; height: 26px;}

/* paypal checkout page styling */

	/* checkbox into faux button */
	#payhal-create-account {
		text-align: center;
		float: right;
		width: 75%;
		box-sizing: border-box;
		margin-top: 3px;
	}

	/* shipping details floated to allow create account adjacent */
	body.payhal-checkout #customer_details div:nth-child(2) {float: left;}

	#payhal-create-account > div.create-account {margin-bottom: 0;}

	#payhal-create-account > p.create-account > label.checkbox[for="createaccount"] {
		background-image: linear-gradient(to right, var(--hal-color-surface-cool) 0%, var(--hal-color-surface-alt) 100%);
		background-color: var(--hal-color-surface-cool);
		color: var(--hal-color-text-muted-strong);
		border-radius: 4px;
		display: inline-block;
		transition: all .3s ease-out;
		padding: 0 14px;
	}
	/* can't show text, no more login button */
	#payhal-create-account > div.create-account p:first-child {display: none;}

	/* #888 was 3.54:1 on white — t-043 */
	span.optional {font-style: italic; color: var(--hal-color-text-muted);}

	body.payhal-checkout form.woocommerce-checkout,
	body.payhal-checkout #customer_details {margin-top: 14px;}

	/* stuff to hide under paypal checkout */
	body.payhal-checkout #hal-checkout-sep,
	body.payhal-checkout p.create-account,
	body.payhal-checkout div.create-account {display: none;visibility:hidden;opacity: 0;position: absolute;}

	#payhal-create-account label:hover {
		background-image: none;
	}

	body.payhal-checkout #createaccount,
	body.payhal-checkout p.create-account {display:none;}

	body.payhal-checkout #customer_details h3 {
		margin-bottom: 6px;
		padding-bottom: 2px;
		border-bottom: 1px solid var(--hal-color-border-light);
	}

	body.payhal-checkout #payment li.payment_method_ppec_paypal {text-align: center;}
	body.payhal-checkout a.wc-gateway-ppec-cancel {
		background-color: var(--hal-color-surface-alt);
		margin-top: 14px;
		font-size: 120%;
		border: 1px solid var(--hal-color-surface-cool);
		border-radius: 8px;
	}

	body.woocommerce #payment ul.payment_methods li img, .woocommerce-page #payment ul.payment_methods li img {
		margin: 0;
	}

	#ppcp-cancel {
		text-align: center;
		margin-top: 30px;
		margin-bottom: -10px;
	}

	/* hide minicart paypal button, which ignores active payment gateways. */
	body.paypal_private #ppc-button-minicart .paypal-buttons {display: none !important;}

/* apple pay */
	body.woocommerce-checkout #wc-stripe-payment-request-wrapper {
		max-width: 400px;
		margin: 0 auto;
		margin-bottom: 14px;
	}

	/* since we'll always have at least paypal, add our own separator between quick buttons and manual checkout */
	body.woocommerce-checkout #wc-stripe-payment-request-button-separator {display: none !important;}
	#hal-checkout-sep {
		text-align: center;
		min-height: 12px;
	}

	#customer_details > div > ul {margin-left: 0;}

.help-bar a.mini-call {
	float: right;
	margin-left: 4px;
	line-height: 12px;
	border: none;
	padding: 3px 5px;
	/* t-079: #6d6d6d was 4.43:1 on this gradient; #666 clears both ends (4.92 / 5.00). */
	color: var(--hal-color-action-text);
	background-image: linear-gradient(to bottom, #e9f5c0 0%, #ebf3b0 100%) !important;
	background-color: #ebf3b0;
	margin-bottom: 0;
	margin-right: 0;
}

/* t-079: hover went white on pale green (1.17:1). Beats a.sf-button:hover in the parent's Theme
   Options inline style, which needs !important at greater specificity (css/AGENTS.md). */
.help-bar a.mini-call:hover,
.help-bar a.mini-call:focus,
.help-bar a.mini-call:focus-visible {
	color: var(--hal-color-action-text) !important;
}

.woocommerce .help-bar {
	padding: 0;
	padding-top: 10px;
	margin: 0;
	margin-right: 2px;
	border-top: none;
}

.woocommerce .help-bar ul {float: left;margin-left: 0;}
.woocommerce .help-bar ul li {margin-left: 30px;}
.woocommerce .help-bar ul {margin-right: 2px;}
.woocommerce .help-bar span {float: right;}

/* Drop the parent's dotted underline (neighborhood/style.css:8583). These links already carry
   t-042's real underline from `body a`, so the dotted border was a second one at rest and on hover.
   Removing the border, never the underline. */
.woocommerce .help-bar ul li a,
.woocommerce .help-bar ul li a:hover,
.woocommerce .help-bar ul li a:focus,
.woocommerce .help-bar ul li a:focus-visible
{border-bottom: none;}
.woocommerce-checkout form.checkout {margin-top: 0;}

/* align billing and review fieldset borders. 9px offset (half of 18px line-height of billing h4) */
#review-order {margin-top: 5px;}
#customer_details {margin-top: -4px;}
h4.spb_heading:before, h4.lined-heading:before {border-color: #e3e3e3;}

.woocommerce form #billing #shiptobilling {
	float: left !important;
}

.woocommerce form #billing #shiptobilling .checkbox {
	font-size: 1rem !important;
}

/* U.S. only for now, so hide country. */
.woocommerce form #customer_details #billing_country_field,
.woocommerce form #customer_details #shipping_country_field {display: none !important;}

.woocommerce td.product-name dl.variation dd p {margin-top: 0;}

/* select state dropdown */
	/* data-selected means nothing here, just makes selector more specific to override default colors */
	body.woocommerce-checkout li.select2-results__option--highlighted[data-selected] {background-color: var(--hal-color-accent);color: var(--hal-color-text-soft);}

	/* currently selected state styling */
	body.woocommerce-checkout li.select2-results__option[data-selected=true] {
		background-color: #afc45c;
	}

	body.woocommerce-checkout li.select2-results__option[data-selected=true]::before {
		content: "\f0da";
		font-family: "Font Awesome 5 Free";
		font-weight: 600;
		font-style: normal;
		display: inline-block;
		width: 16px;
		text-align: center;
	}

	body.woocommerce-checkout ul.select2-results__options,
	body.woocommerce-checkout span.select2-selection,
	body.woocommerce-checkout span.select2-dropdown {background-color: var(--hal-color-surface);letter-spacing: 0.6px;}

	body.woocommerce-checkout input.select2-search__field {padding: 3px; height: auto; background-color: var(--hal-color-surface-raised); border-color: var(--hal-color-border-subtle);}
	.woocommerce form.checkout .form-row .select2-container--default span.select2-selection__rendered {
		line-height: inherit;
		font-weight: bold;
		padding: 7px 10px;
	}

	/* fix dropdown arrow for state */
	.woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__arrow b {
		background-size: 22px;
		height: 22px;
		width: 22px;
		margin-top: -14px;
		margin-left: -10px;
	}

/* Hide top "Your Order" since it repeats as h4 within order section */
.woocommerce-checkout h3#order_review_heading {display: none;}

#order_review_heading,
#payment_heading {text-align: center; font-weight: bold;}
#order_review_heading span,
#payment_heading span {border-bottom: 1px solid var(--hal-color-border-subtle); padding-bottom: 3px;}

/* t-078: the payment box had no heading of its own, so the order table's "Your Order" was the only
   thing naming either half of this column. Same markup and styling, Eric's call 2026-08-04.
   The border reset is not cosmetic tidying: `#payment_heading` is WooCommerce's own id and the
   PARENT theme already styles it with a full-width `border-bottom`, which clashes with the short
   underline the span carries. "Your Order" has no such line, and these two must match. */
#payment_heading {
	margin-top: 28px;
	border-bottom: 0;
}
/* Review table grid, Eric's call 2026-08-04: no vertical rules, and every horizontal rule the same
   colour. It had been drawn by three different sources — our --hal-color-checkout-divider on the
   item rows, WooCommerce's `color-mix(currentcolor 20%)` on tfoot th, and the parent's
   `2px solid #222` on tr.cart-subtotal th. */
#order_review table.woocommerce-checkout-review-order-table tr.cart_item td,
#order_review table.woocommerce-checkout-review-order-table thead th {
	border-bottom: 1px solid var(--hal-color-checkout-divider);
}

/* !important is required, not decorative: the parent theme carries
   `table.shop_table tr.cart-subtotal th {border-top: 2px solid #222 !important}`, which no
   specificity on our side can beat. That black 2px rule was the odd line out. */
#order_review table.woocommerce-checkout-review-order-table tfoot th,
#order_review table.woocommerce-checkout-review-order-table tfoot td,
#order_review table.woocommerce-checkout-review-order-table tr.cart_item td {
	border-top: 1px solid var(--hal-color-checkout-divider) !important;
}

#order_review table.woocommerce-checkout-review-order-table td,
#order_review table.woocommerce-checkout-review-order-table th {
	border-left: 0;
	border-right: 0;
}

#order_review table.woocommerce-checkout-review-order-table thead th {
	letter-spacing: 1px;
	padding-bottom: 2px;
	color: var(--hal-color-black);
}

/* The quantity sits on its own line under the product name — it had been inline and only LOOKED
   separate because the name happened to fill the row. "x 3 @ $165" made that visible (t-077). */
#order_review table.woocommerce-checkout-review-order-table td.product-name .product-quantity {
	display: block;
	/* the parent centres .product-quantity for the cart's own column; as a block here that would
	   float the line away from the product name it belongs to */
	text-align: left;
}


/* make terms checkbox appear above order button */
#payment p.form-row.terms {
	position: relative;
	text-align: left;
	padding: 0;
	width: 330px;
	margin-top: 16px;
}

#payment p.form-row.terms label {
	font-size: 85%;
	padding: 0;
}

/* checkout checkbox styling: vert center for "Securely save" and "agree to terms" checkboxes */
#wc-authorize-net-cim-credit-card-credit-card-form p:last-of-type,
.woocommerce-terms-and-conditions-wrapper > p.form-row {
	align-items: center;
}

#payment #wc-authorize-net-cim-credit-card-tokenize-payment-method,
#payment #terms {
	margin-top: 0;
	width: 16px !important;
	height: 16px;
	float: none;
}

#payment label.checkbox {padding-left: 0;}

#order_review #payment #place_order {
	margin-top: 20px;
	font-size: 140%;
	float: none;
	border-radius: 8px;
	display: inline-block;
	transition: all .3s ease-out;
}

#order_review td[data-title=Shipping] {min-width:120px;}

/* item metadata styling (cartitems size/ships on, checkout, etc) */
.woocommerce td.product-name dl.variation {
	margin-bottom: 0;
}

.woocommerce td.product-name dl.variation:after {
	display: table;
	line-height: 0;
	content: "";
	clear: both;
}

 .woocommerce td.product-name dl.variation dt,
 .woocommerce td.product-name dl.variation dd {
	line-height: 150%;
	display: block;
	float: left;
 }

.product-image {
	box-shadow: 0 0 5px 0 rgba(102, 102, 102, 1);
}

body.archive #main-container #page-wrap ul.products li.product span.price {
	display: none;
}

.woocommerce-checkout .form-row div.chosen-container {width: 75% !important;}

.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce input.button,
.woocommerce-page input.button,
.woocommerce #respond input#submit,
.woocommerce-page #respond input#submit,
.woocommerce #content input.button,
.woocommerce-page #content input.button {
	border: 1px solid var(--hal-color-border-light) !important;
	box-shadow: 0 0px 0 rgba(0, 0, 0, 0.075) inset, 0 0px 0 rgba(255, 255, 255, 0.3) inset, 0 0px 0px rgba(0, 0, 0, 0.1) !important;
	text-shadow: 0 0px 0 rgba(255, 255, 255, 0.8) !important;
}

.woocommerce a.button.alt,
.woocommerce-page a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page #respond input#submit.alt,
.woocommerce #content input.button.alt,
.woocommerce-page #content input.button.alt {
	text-shadow: 0 0px 0 rgba(0, 0, 0, 0.6) !important;
	/* t-054: the soft-green action pair. This block is the WooCommerce "alt" family — Proceed to
	   Checkout, Place order, Update cart — and it is more specific than the sitewide action rule near
	   the top of this file, so it has to carry the pair itself rather than inherit it. Leaving only
	   the surface here is what produced #666 on #677C22 (1.63:1) on the cart button mid-change: the
	   colour moved sitewide and this background did not. Surface and label travel together. */
	background: var(--hal-color-action-bg) !important;
	background-image: none !important;
	color: var(--hal-color-action-text) !important;
	font-weight: var(--hal-action-font-weight);
}

/* t-054: was a --hal-color-cta-gradient-start → -end green gradient with #2e2e36 on it. The gradient
   is gone rather than re-tinted — it ran #b4d445 to #a2c233, and a gradient is the one surface axe
   reports as "incomplete" instead of judging, which is how the store-notice links went unmeasured for
   weeks. A flat surface is checkable. */
.widget_shopping_cart_content .button.checkout,
.wc-proceed-to-checkout .button.checkout-button,
.shopping-bag .bag-buttons a.checkout-button
{
	background: var(--hal-color-action-bg) !important;
	color: var(--hal-color-action-text) !important;
	letter-spacing: 1px;
	text-align: center;
	background-image: none !important;
}

/* The small mini-cart Checkout label needs more visual authority than the larger action controls. */
.widget_shopping_cart_content .button.checkout,
.shopping-bag .bag-buttons a.checkout-button {
	color: var(--hal-color-ink) !important;
}

/* t-054: the WooCommerce "alt" buttons are the primary action on their pages — Place order, Update
   cart, add-to-cart. Same pair; they were white on #677C22 (4.68:1, passing) before this. */
.bag-buttons a.create-account-button,
.woocommerce input.button.alt,
.woocommerce .alt-button,
.woocommerce button.button.alt {
	background: var(--hal-color-action-bg) !important;
	background-image: none !important;
	color: var(--hal-color-action-text) !important;
	font-weight: var(--hal-action-font-weight);
}

/* Eric 2026-08-06: every action control carries the face and weight, not just the ones in the
   sitewide block near the top. Collected here because the "alt" family, the mini-cart Checkout and
   the bag buttons each out-specify that block and would otherwise keep the inherited Tahoma. */
body .wpcf7 input.wpcf7-submit[type="submit"],
.woocommerce a.button.alt,
.woocommerce-page a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page #respond input#submit.alt,
.woocommerce #content input.button.alt,
.woocommerce-page #content input.button.alt,
.woocommerce .alt-button,
.widget_shopping_cart_content .button,
.wc-proceed-to-checkout .button.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.shopping-bag .bag-buttons a.checkout-button,
.bag-buttons a.create-account-button,
.woocommerce div.summary table.variations-order-table button.single_add_to_cart_button:not(.swatch),
.woocommerce form.cart button.single_add_to_cart_button:not(.swatch),
body a.sf-button.hal-contact-phone,
body a.sf-button.hal-contact-sms,
body a.sf-button.hal-contact-lc,
.searchform button {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-weight: var(--hal-action-font-weight) !important;
}

/* The SIDEBAR mini-cart is a second, distinct pair — .woocommerce-mini-cart__buttons, not
   .shopping-bag .bag-buttons — and its border comes from the .woocommerce a.button rule that
   carries !important, so a plain border-color lost to it and it kept the old flat #eaeaea. */
.woocommerce.widget_shopping_cart .woocommerce-mini-cart__buttons a.checkout,
.widget_shopping_cart_content .button.checkout {
	border-color: var(--hal-color-action-border) !important;
}

.woocommerce.widget_shopping_cart .woocommerce-mini-cart__buttons a:not(.checkout),
.widget_shopping_cart_content .button:not(.checkout) {
	background-color: var(--hal-color-action-secondary-bg) !important;
	border-color: var(--hal-color-action-secondary-border) !important;
}

/* The SECONDARY partners that sit in the same row as an action button — View Cart beside Checkout,
   Update cart beside Apply coupon. Face only: matching the weight too would flatten the hierarchy. */
.shopping-bag .bag-buttons a.bag-button,
.widget_shopping_cart_content .button:not(.checkout),
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"],
.woocommerce button[name="apply_coupon"],
.woocommerce input[name="apply_coupon"] {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

/* Keep action feedback directional: the surface darkens without fading or changing label weight. */
.widget_shopping_cart_content .button.checkout:hover,
.bag-buttons a.checkout-button:hover,
.woocommerce input.button.alt:hover,
.woocommerce .alt-button:hover,
.woocommerce button.button.alt:hover {
	background: var(--hal-color-action-bg-hover) !important;
	background-image: none !important;
	color: var(--hal-color-text) !important;
	font-weight: var(--hal-action-font-weight);
	opacity: 1 !important;
	filter: none !important;
}

#intl-button {margin-top: -111px;}

#intl-button div {
	width: auto;
}

#intl-button a
, #intl-notice a {
	background: var(--hal-color-surface);
	padding: 8px 20px;
	height: 40px;
	text-align: center;
	margin: 0;
	border: 1px solid var(--hal-color-border-light) !important;
	color: var(--hal-color-ink);
}

#intl-button {float: left; margin-left: 48%}

#intl-button a:hover,
#intl-notice a:hover {
	color: var(--hal-color-black) !important;
	background: #eeddf9;
	border-color: #edd4f5 !important;
	text-decoration: none;
}

#intl-button p {
	clear: both;
	width:225px;
	float:right;
	position:relative;
	bottom:45px;
}

#intl-notice {
	text-align: center;
	font-size: 0.75rem;
	margin: 0;
	margin-bottom: 12px;
}
#intl-notice a {
	font-size: inherit;
	padding: 2px;
}

/* terms and conditions popup styling */
#TB_window h1 {display: none;}
#TB_window p {
	font-size: 0.8125rem;
	line-height: 1.4;
}
#payment .woocommerce-terms-and-conditions-checkbox-text {
	font-size: 0.8125rem;
	line-height: 1.35;
}
#payment div.woocommerce-terms-and-conditions-wrapper {text-align: center;}
/* end checkout page */

/* order confirmation */
.woocommerce .order_details li {font-size: 1em;}

.woocommerce-order-details h2 {text-align:center; text-decoration: underline;}

.woocommerce-order-details .shipdate {text-align: center;}

.woocommerce-order-received #intl-notice {display: none;}

/* The page title is hidden BY DESIGN on these layouts, but `display: none` removes it from the
   accessibility tree outright — so the page genuinely had no top-level heading and no statement of what
   it is (t-055). Clipping keeps it in the tree and in the heading list while rendering nothing, which is
   the same trick a.hal-skip-link already relies on. Do NOT swap in visibility:hidden: that drops the
   element from the tree too. Nothing about this is visible, so the layouts are unchanged. */
/* The listing selector is here for SPECIFICITY, not because it is a different element (t-114).
   `.product-list .header-copy h1 {width: 80%}` further up (0,2,1) out-ranked the `width: 1px` below
   (0,1,1), so this h1 stayed absolutely positioned at 80% of the container — an invisible 1280px box
   that pushed the document 26px wider than the viewport at 1600. Clipped, so nothing rendered and
   nobody saw it until Eric found the page scrolling sideways above ~1516px. */
header.woocommerce-products-header h1,
.product-list .header-copy h1,
.page-content > h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

a.bag-button, #product-pint a, .sf-roll-button span {
	transition: none;
	-webkit-transition: none;
}

.checkout-confirmation {
	margin-top: 40px;
}

#product-pint {
	width: 40px;
	position: relative;
	left: 180px;
	top: -38px;
	margin-bottom: -38px;
}

#product-pint a {
	opacity: 0.65;
}
/* fix one pixel jog on pin it button */
#product-pint a {
	/*background-position-y: -29px;*/
}

#product-pint a:hover {
	opacity: 1;
	cursor: pointer;
}

/* button styling: do these need to be important? assume parent theme BS? */
a.bag-button:hover {color: var(--hal-color-white) !important;}
/* t-054: these two moved to the soft-green action surface, so white on hover would be 1.27:1 —
   the exact failure this task removes. The others keep white; their surfaces are still dark. */
a.checkout-button:hover {color: var(--hal-color-text) !important;}
a.button:hover {color: var(--hal-color-white) !important;}
a.guest-button:hover {color: var(--hal-color-white) !important;}
a.create-account-button:hover  {color: var(--hal-color-text) !important;}
a.continue-button:hover {color: var(--hal-color-white) !important;}

/* right arrow icons to view cart and checkout buttons */
/* The second `content` gives the glyph empty ALT TEXT so it stays out of the computed accessible
   name — a pseudo-element's content is part of the name, and this is a private-use codepoint that
   assistive tech reads unpredictably (t-031). The plain declaration stays first as the fallback:
   a browser that does not understand the `/ "alt"` form drops that line and still draws the icon. */
.buttons .wc-forward:before,
.shopping-bag .sf-roll-button:before {
	content: "\f30b";
	content: "\f30b" / "";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	font-style: normal;
	display: block;
	float: right;
	text-decoration: inherit;
}

/* message bars */
.woocommerce-info, .woocommerce-message, .woocommerce-error, .hal-teaser {
	z-index: 1;
	clear: left;
}

#container .woocommerce-message,
#container .woocommerce-info,
#container .woocommerce-error {
	--hal-info-pad-left: 2.5rem;
	padding-left: var(--hal-info-pad-left);
}

/* larger icon size and positioning */
#container .woocommerce-message:before,
#container .woocommerce-info:before,
#container .woocommerce-error:before {
	font-size: 2em;
	left: calc(var(--hal-info-pad-left) / 2);
	top: 50%;
	transform: translate(-50%, -50%);
}

#container .woocommerce-message .button.wc-forward,
#container .woocommerce-info .button.wc-forward,
#container .woocommerce-error .button.wc-forward {
	background-color: var(--hal-color-brand-bright) !important;
	color: var(--hal-color-ink) !important;
	border: 1px solid var(--hal-color-brand-light) !important;
	border-radius: 4px;
}

#container .woocommerce-message .button.wc-forward:hover,
#container .woocommerce-info .button.wc-forward:hover,
#container .woocommerce-error .button.wc-forward:hover {
	background-color: var(--hal-color-cta-bg-hover) !important;
	color: var(--hal-color-white) !important;
}

#container .woocommerce-message {
	background-color: var(--hal-color-action-bg);
	border-color: var(--hal-color-action-bg);
}

/* Catalog notices sit between the filter header and product grid. The parent theme reserves 40px
	below every message; move that separation above the message on shop, category, and tag archives. */
#container .woocommerce-shop-page .woocommerce-notices-wrapper > .woocommerce-message {
	margin-top: 2em;
	margin-bottom: 0 !important;
}

/* Unlike the button-shaped notice actions, Undo is an inline text link. Restore the prose affordance
	and use the darker brand green: the default link green is only 3.81:1 on this notice surface. */
#container .woocommerce-message a.restore-item {
	color: var(--hal-color-brand-dark);
	text-decoration-line: underline;
	text-decoration-color: currentColor;
	text-underline-offset: var(--hal-link-underline-offset);
}

#container .woocommerce-message a.restore-item:hover,
#container .woocommerce-message a.restore-item:focus {
	color: var(--hal-color-ink);
	text-decoration-color: currentColor;
	text-decoration-thickness: var(--hal-link-underline-thickness);
}

/* The check/info/error glyph on a WooCommerce notice is DECORATIVE (t-033): every one of these boxes
	states its outcome in words ("… removed. Undo?"), and the box itself is role="alert", so the icon
	repeats what is already announced. That is why its lower contrast on the notice surface is not a
	1.4.11 failure — 1.4.11 applies to graphics that CARRY meaning — and why the colour is left alone.
	What the icon must not do is speak: it is a Font Awesome private-use codepoint, and a pseudo-element's
	content is part of the alert's accessible name. Empty alt text is the pseudo-element equivalent of
	aria-hidden; plain declaration first as the fallback, as in t-031. */
#container .woocommerce-message:before {
	color: var(--hal-color-success-icon);
	content: "\f00c";
	content: "\f00c" / "";
}

#container .woocommerce-info {
	background: var(--hal-color-info-bg);
}

#container .woocommerce-error {
	background-color: var(--hal-color-error-bg);
	color: var(--hal-color-text);
}

/* Classic Ed, crappy parent CSS fix */
#container .checkout .woocommerce-error,
#container .checkout .woocommerce-info,
#container .checkout .woocommerce-message {
	margin-bottom: 0 !important;
}

/* fix error link colors */
#container .woocommerce-error a {
	color: inherit;
}
/* end message bars */


.woocommerce form #billing .form-row input,
.woocommerce form #billing .form-row textarea {
	width: 60% !important;
}

.woocommerce form #billing .form-row label {
	width: 40% !important;
}
.woocommerce-checkout .form-row .chzn-container {
	width: 60% !important;
}

.form-row label.checkbox {width: 80% !important;}
/*
.product-share {
	display: none;
}
*/
.wc-new-badge {
	display: none;
}

.icon-resize-full {
	display: none !important;
}

/************************************************** FOOTER */


#footer h4:before {
	border: 0px solid gray;
	height: 0px;
	position: absolute;
	 top: 50%;
	width: 100%;
	z-index: 1;
}
#footer h4 {
	text-align: left;
}
#footer h4 span {
	padding-left: 0px;
	padding-right: 0px;
}

#footer .widget ul li {
	border-bottom: 0px;
	line-height: 1.3;
}
/* 2.5.8 Target Size (Minimum), t-047. The 1px padding here compressed every footer menu row to
   17.6px tall (12px text, 15.6px line-height) — 37 links under the 24px minimum, on every page.
   Neither 2.5.8 escape applied: the rows are list links, not inline text, and their centres sat
   18.6px apart so the spacing exception failed too; an equivalent >=24x24 control existed elsewhere
   on the page for only 4 of 37 at desktop and 1 of 37 at mobile.
   5px gives 25.6px. 4.2px computes to exactly 24.0 and still measures a hair BELOW it, so it fails.
   The parent theme's own 8px (N/style.css:3561, which this rule overrides) would give 31.6px and a
   much taller footer. */
#footer .widget ul li > a {
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 0px solid gray;
}

#footer .widget ul li,
#footer .widget_categories ul,
#footer .widget_archive ul,
#footer .widget_nav_menu ul,
#footer .widget_recent_comments ul,
#footer .widget_meta ul,
#footer .widget_recent_entries ul,
#footer .widget_product_categories ul {
	border-bottom-color: var(--hal-color-text) !important;
	border-left-color: var(--hal-color-text) !important;
	border-right-color: var(--hal-color-text) !important;
	border-top-color: var(--hal-color-text) !important;
}

#copyright {
	padding: 0;
	padding-top: 12px;
}

/* Copyright line contrast (t-043). The parent theme prints `#copyright p {color: #666666}` into an
   inline <style> from its Theme Options ($copyright_text_color, swift-framework/sf-custom-styles.php),
   and that block is emitted AFTER our stylesheets — so an equal-specificity override loses. Adding
   .twelve takes it to (0,2,1). The tidier fix is to change the option itself in wp-admin; this rule is
   harmless if that happens. #666 on the black footer is 3.66:1. */
#copyright p.twelve {
	color: var(--hal-color-text-on-dark);
}

/* hide adwords remarketing frame */
iframe[name="google_conversion_frame"] {
	height: 0;
	padding: 0;
	margin: 0;
	display: block;
}

#shopper-schema {
	background-color: var(--hal-color-black);
}

/* t-015: moving this block inside #copyright put it under the `#copyright a {text-decoration:none}`
   rule (see the footer/copyright group above), which silently removed the underline the rating link
   had always carried. That was a side-effect of a landmark fix, not a decision, so it is restored
   here — two ids beat the one-id rule. If the rating should instead match its now-neighbours in the
   copyright row, which are deliberately undecorated, that is a design call to make on purpose. */
#copyright #shopper-schema a {
	text-decoration: underline;
	text-decoration-color: var(--hal-color-link-underline);
	text-underline-offset: 4px;
}

/* t-015: the `position: relative; top: -16px; left: 280px` that used to live here is GONE, not
   re-tuned. It existed only to drag this block up into the copyright row from outside the footer,
   because halReviews::footer_rating() was hooked to wp_footer and rendered as a direct <body> child —
   in no landmark (axe `region`). It now renders inside the contentinfo via hal_copyright_columns, so
   it sits in the row by document flow and needs no offset at any width. */
#shopper-schema div.span6 {
	background-color: var(--hal-color-black);
	text-align: center;
	font-size: 0.625rem;
	margin-left: 0;
	/* t-015: drop the 6-column grid width and let this fill the gap BETWEEN the copyright row's two
	   floats (© left, Back to Top right). overflow creates a block formatting context, so the box
	   stops at the floats instead of sliding under them, and text-align does the centring — no
	   magic offset, and it re-centres itself at every width instead of needing a breakpoint. */
	float: none;
	width: auto;
	overflow: hidden;
}

/* shopperapproved */
/* survey */
#shopper_approved.sa_start_survey input[type="radio"] {
	margin: 0 !important;
}

#sa_tooptin.sa_bin label {
	margin-left: 0 !important;
}

#sa_optin input[type="text"] {
	margin-top: -5px !important;
}

/* reviews */
#review_header {
	padding: 0 !important;
	max-width: 256px !important;
	margin: 0 auto !important;
}

#review_header .overall {width: 80px;}
#review_header .overall .numbers {padding: 14px 0 !important;}
#review_header .block {
}

#review_header .overall.block, #review_header .graph.block {
	margin-top: 0 !important;
	height: 78px !important;
}

#review_header .percentage.block, #review_header .stars.block {
	margin-top: 10px !important;
	height: 50px !important;
	margin-bottom: 10px !important;
	height: inherit !important;
}

#review_header .graph.block, #review_header .percentage.block {
	float: right !important;
}

#review_header .overall .outof {
	background-color: var(--hal-color-border-strong) !important;
}

#review_header .graph {
	width: 140px !important;
	margin-top: 0 !important;
	clear: right;
	overflow: hidden;
}

#review_header .graph img {
	width: 178px !important;
	max-width: 178px !important;
	height: 78px !important;
}

#review_header .overall .color5 {background-color: var(--hal-color-review-rating-high) !important;}

#review_header .stars {
	width: 100px !important;
	clear: left;
}

#review_header .stars .desc {
	font-size: 0.75rem !important;
	border-bottom: 1px solid var(--hal-color-border-strong) !important;
	padding-bottom: 3px !important;
	margin-bottom: 3px !important;
}

#review_header .percentage.block {
	width: 136px !important;
	font-size: 0.6875rem !important;
	line-height: 14px;
	margin-top: 12px !important;
	margin-left: 0 !important;
}

#review_header .percentage .numbers {
	font-size: 0.75rem !important;
	padding-bottom: 0 !important;
	float: left;
}

#review_header .stars .on {
	margin: 0 !important;
	width: 20px !important;
	height: 19px !important;
	background: url('images/star-full-sm.png') !important;
}

#review_header .sa_response_header {
	font-size: 0.8125rem;
}

/* if the percentage section is missing, realign to look professional. */
#review_header.no_percentage {width: 140px;}
#review_header.no_percentage .overall.block {margin-left: 20px;}

/* clearfix for reviews above paging / logo */
#product_page:after {
	display: table;
	line-height: 0;
	content: "";
	clear: both;
}

#product_page .images {
	float: right;
	padding-bottom: 0;
	margin-bottom: 0;
	margin-right: 12px;
	width: inherit;
}

#product_page .paging {
	float: right;
	padding: 15px !important;
	padding-right: 0 !important;
	padding-bottom: 10px !important;
}

#product_page .paging .sa_page {
	width: 29px !important;
	height: 29px !important;
	margin-right: 6px !important;
	margin-top: -8px;
}

label[for="sa_sort"] { display: none; }

#sa_sort {
	width: 102px !important;
	font-size: 0.625rem;
	padding: 0;
	padding-top: 3px;
}

#product_page .comments {
	font-size: 0.8125rem;
	line-height: 1.15;
}

#product_page .info {
	font-size: 0.75rem;
	color: var(--hal-color-text-muted);
	font-style: italic;
}

#product_page .rheading {
	font-size: 0.875rem;
}

#product_page .verified,
#shopper-review-gallery .verified {
	padding-left: 16px;
	float: right;
	background: url('images/verifiedbuyer.png') no-repeat left center;
}

/* hide pagination arrows*/
input.sa_page.arrow {display: none;}

/* hide reviews tab button by default */
.woocommerce div.product .woocommerce-tabs ul.tabs li.reviews_tab {display: none;}

#review_image {
	margin-top: 10px;
}

/* t-110: SA injects `#review_image .sa_logo {float: right; display: block}`, which takes the seal
   out of the anchor's inline flow and collapses the anchor to a 0x0 box — a tab stop with nothing
   for the focus ring to draw around. inline-block makes the anchor contain its float. */
#review_image a {
	display: inline-block;
}

/* t-110: below 600px SA's inline style adds `margin-top: -60px !important` to the seal, and a
   negative margin escapes the inline-block's float containment — the anchor stays 0-high and the
   focus ring draws as a bar below the logo. Higher specificity + !important is what beats it. */
#review_image a img.sa_logo {
	margin-top: 0 !important;
}

/* Livechat */
#chat-widget-minimized {
	opacity: 0.5;
	visibility: hidden; /* wait until JS shows the button */
}

#chat-widget-minimized:hover {opacity: 1;}

/* google badge */
#google-merchantwidget-iframe-wrapper {
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
	/*opacity: 0.45;*/
}
#google-merchantwidget-iframe-wrapper:hover {opacity: 1 !important;}