/*
Theme Name: Divi Child Theme
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Version: 4.25.0  JEL 03/19/2026
Description: Divi Child Theme.
Author: John Langlois
Author URI: http://www.foggybottomwebdesign.com
*/

/*
 * VERSION POLICY: The Version line in the theme header above
 * must be updated every time this file is modified. Format:
 *   Major.Minor.Patch  INITIALS MM/DD/YYYY
 * Increment the patch number for fixes/tweaks.
 * Increment the minor number for new sections or features.
 *
 * ═══════════════════════════════════════════════════════
 * CHANGE LOG
 * ═══════════════════════════════════════════════════════
 * 4.25.0 JEL 03/19/2026: Consolidated appended menu_for_pages
 *   fixes into Sections 4 and 5 where they belong. Scoped
 *   the horizontal nav ul rule to :not(.menu_for_pages) so
 *   the sidebar widget is never forced into a row layout.
 *   Added full-width chain, flex-direction:column, and
 *   text-wrap rules directly into Section 5.
 *   Removed the three duplicate rule blocks that had been
 *   appended below Section 19.
 *
 * 4.24.1 JEL 03/11/2026: Reorganized and corrected via Claude.
 *   Fixed menu word-break (flex-wrap:nowrap + white-space:nowrap).
 *   Fixed dropdown clipping (:has() overflow:visible on menu rows).
 *   Fixed selectWoo state dropdown on checkout (overflow:visible
 *   on billing/shipping containers + z-index:99999 on panel).
 * ═══════════════════════════════════════════════════════
 *
 * SECTION INDEX
 *  1. Reset & Box Model
 *  2. Typography
 *  3. Layout & Containers
 *  4. Navigation & Menus
 *  5. Menu-for-Pages Widget
 *  6. Buttons & Forms
 *  7. WooCommerce: Checkout & Select Dropdowns
 *  8. WooCommerce: Product Grid & Images
 *  9. WooCommerce: Cart & Order Tables
 * 10. Images & Media Embeds
 * 11. Custom Site Components
 * 12. Footer
 * 13. Accessibility
 * 14. Responsive — Tablet (481px–1024px)
 * 15. Responsive — Mobile (≤768px)
 * 16. Responsive — Small Mobile (≤480px)
 * 17. Container Queries (modern browsers)
 * 18. Print
 * 19. Reduced Motion
 */


/* ═══════════════════════════════════════════════════════
   SECTION 1 — RESET & BOX MODEL
   PURPOSE: Establishes a consistent sizing baseline across
   all browsers. border-box ensures padding and borders are
   included in declared widths rather than added on top.
   overflow-x:hidden on html/body prevents horizontal page
   scroll from any slightly-oversized element.
   NOTE: max-width:100% is intentionally NOT applied to the
   wildcard (*) selector here because it breaks menu items —
   see Section 4. It is applied only to media elements.
   ═══════════════════════════════════════════════════════ */

html {
	box-sizing: border-box;
	font-size: calc(.55rem + 1vw);
	overflow-x: hidden;
	max-width: 100vw;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	max-width: 100vw;
	width: 100%;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	max-width: 100%;
}

body, div, dl, dt, dd,
h1, h2, h3, h4, h5, h6,
p, pre, code, blockquote {
	margin: 0;
	padding: 0;
	border-width: 0;
}

img, video, iframe, embed, object {
	max-width: 100%;
	height: auto;
}

pre, code {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}


/* ═══════════════════════════════════════════════════════
   SECTION 2 — TYPOGRAPHY
   PURPOSE: Responsive font sizing for body text and
   headings using clamp() so text scales between mobile
   and desktop without hard breakpoints. Sets ProVetLogic
   brand heading colors (green #4B7E42, teal #4D8481).
   Applies safe overflow handling for long words/URLs in
   content areas only — not on navigation elements.
   ═══════════════════════════════════════════════════════ */

p, li {
	font-size: clamp(14px, calc(.61em + .81vw), 24px);
	line-height: 1.5em;
	margin: .21em 0;
	padding: .51vh .51vw;
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
}

ul, ol {
	margin-bottom: .71em;
}

h1 {
	color: #4B7E42;
	font-size: clamp(18px, calc(1.1em + 1vw), 42px);
	font-style: normal;
	font-weight: normal;
	padding: .5em 0;
	line-height: 1.2em;
	overflow-wrap: break-word;
}

h2, h3 {
	color: #4D8481;
	font-size: clamp(16px, calc(.51em + 1vw), 32px);
	font-style: normal;
	font-weight: normal;
	padding: .5em 0;
	line-height: 1.2em;
	overflow-wrap: break-word;
}

h4 a { color: #2ea3f2; padding: .5em 0; }
h5, h6 { color: #231F20; padding-bottom: .5em; line-height: 1.2em; }

a:link    { font-weight: 600; }
a:visited { background-color: #eaeaea; font-weight: bold; text-decoration: none; }
a:hover,
a:active  { font-weight: bold; text-decoration: underline; cursor: pointer; }

.et_pb_text,
.entry-content,
.comment-content {
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
	max-width: 100%;
}


/* ═══════════════════════════════════════════════════════
   SECTION 3 — LAYOUT & CONTAINERS
   PURPOSE: Controls overall page structure and Divi
   row/column sizing.
   CRITICAL: .et_pb_row uses overflow:hidden for content
   containment. Rows containing a .et_pb_menu override
   this to overflow:visible (see Section 4) so dropdown
   sub-menus are not clipped. WooCommerce checkout
   containers are similarly overridden in Section 7.
   ═══════════════════════════════════════════════════════ */

.container {
	padding-left: min(3rem, 5vw) !important;
	max-width: 100vw;
	overflow-x: hidden;
	width: 100%;
}

.page.et_pb_pagebuilder_layout #main-content {
	background-color: #FFF;
	display: flex;
	flex-flow: row wrap;
	padding-left: min(3rem, 5vw) !important;
	max-width: 100%;
	overflow-x: hidden;
}

.et_pb_row {
	max-width: 100% !important;
	overflow: hidden;
}

.et_pb_column {
	max-width: 100%;
	min-width: 0;
}

.et_pb_row.et_pb_row_fullwidth,
.et_pb_specialty_fullwidth .et_pb_row {
	width: 100% !important;
	max-width: 100vw !important;
	overflow-x: hidden;
}

.woocommerce-page {
	overflow-x: hidden;
	max-width: 100vw;
}

body.category h1.page-title { font-size: 18px; }


/* ═══════════════════════════════════════════════════════
   SECTION 4 — NAVIGATION & MENUS
   PURPOSE: Styles the primary Divi header nav bar and all
   dropdown sub-menus.

   KEY DECISIONS:
   — flex-wrap:nowrap + white-space:nowrap on the top-level
     nav ul prevents menu item labels (Home, Shop, Videos)
     from breaking mid-word inside flex cells.
   — flex-shrink:0 + flex-grow:0 on <li> prevents items
     from compressing below their text width.
   — The :has() rule makes overflow:visible only on rows
     that contain a .et_pb_menu, leaving all other rows
     with overflow:hidden for content containment.
   — CHANGED 03/19/2026: Scoped the nav ul rule to
     :not(.menu_for_pages) so the sidebar color widget is
     never forced into a horizontal row layout. The
     menu_for_pages widget has its own rules in Section 5.
   ═══════════════════════════════════════════════════════ */

/* Only rows containing the Divi menu module get overflow:visible */
.et_pb_row:has(.et_pb_menu),
.et_pb_row:has(.et_pb_menu) .et_pb_column {
	overflow: visible !important;
}

.et_pb_menu .et_pb_menu__menu > nav {
	overflow: visible;
}

/* CHANGED 03/19/2026: Added :not(.menu_for_pages) so sidebar widget
   is never targeted by these horizontal-nav rules. */
.et_pb_menu:not(.menu_for_pages) .et_pb_menu__menu > nav > ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	overflow: visible;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.et_pb_menu:not(.menu_for_pages) .et_pb_menu__menu > nav > ul > li {
	position: relative;
	flex-shrink: 0;
	flex-grow: 0;
}

.et_pb_menu:not(.menu_for_pages) .et_pb_menu__menu > nav > ul > li > a {
	white-space: nowrap;
	display: block;
}

/* Allow wrapping only when viewport is too narrow for all items */
@media screen and (max-width: 1100px) {
	.et_pb_menu:not(.menu_for_pages) .et_pb_menu__menu > nav > ul {
		flex-wrap: wrap;
	}
	.et_pb_menu:not(.menu_for_pages) .et_pb_menu__menu > nav > ul > li > a {
		white-space: nowrap;
	}
}

/* Sub-menu dropdown panels */
.sub-menu {
	border: 2px solid white !important;
	position: absolute;
	z-index: 9999;
	max-width: 90vw;
}

.nav li ul        { width: min(340px, 90vw); }
.nav li li        { position: relative; line-height: 1em !important; }
#top-menu .sub-menu li { position: relative; }

.et-menu li li a {
	padding: 6px 20px;
	max-width: min(300px, 90vw);
	min-width: min(250px, 100%);
	overflow-wrap: break-word;
}

#top-menu li li a {
	width: min(450px, 90vw) !important;
	padding: 5px !important;
	color: #FFF !important;
	font-weight: bold;
	overflow-wrap: break-word;
	white-space: normal;
}

#top-menu-nav {
	margin-left: min(6em, 10vw);
	padding-top: 1em;
}

.fullwidth-menu li > a { padding-bottom: 9px; word-wrap: break-word; }

.et_pb_menu__icon.et_pb_menu__search-button,
.et_pb_menu__search-button:after,
.et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__cart-button {
	display: none;
}

#menu-sidebar-menu {
	display: flex;
	flex-flow: column;
	max-width: min(290px, 100%);
	align-content: center;
}

.archive #sidebar, #sidebar, #et_right_sidebar { display: none; }

.et_pb_menu--without-logo .et_pb_menu__menu > nav > ul > li {
	margin-top: 4px !important;
}

.et_pb_menu__search-container,
.et_pb_menu__search-input { max-width: 100%; }

.et_pb_search {
	border: 1px solid #000 !important;
	border-radius: 3px;
	overflow: hidden;
	max-width: 100%;
}


/* ═══════════════════════════════════════════════════════
   SECTION 5 — MENU-FOR-PAGES WIDGET
   PURPOSE: Styles the .menu_for_pages class used for
   color-coded sidebar navigation widgets. Each list item
   gets a distinct brand color so users can scan categories
   quickly. 22 colors defined; add :nth-child rules below
   if a list ever exceeds 22 items.

   ADDED 03/19/2026: Full flex chain width rules (.wrap,
   .menu, nav, ul all set to width:100%) ensure the widget
   fills its column on every page regardless of page
   template. Added flex-direction:column and text-wrap
   rules on li and a so labels never clip at the column
   edge. These rules consolidate three blocks that were
   previously appended below Section 19.
   ═══════════════════════════════════════════════════════ */

.menu_for_pages {
	margin-top: .51em;
	display: flex;
	flex-flow: column;
	max-width: 100%;
}

/* Width chain: every ancestor of ul must fill the column */
.menu_for_pages .et_pb_menu__wrap,
.menu_for_pages .et_pb_menu__menu,
.menu_for_pages .et_pb_menu__menu > nav,
.menu_for_pages .et_pb_menu__menu > nav > ul {
	width: 100%;
}

/* Vertical stacking for the sidebar list */
.menu_for_pages .et_pb_menu__menu > nav > ul {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: stretch;
}

/* Each item fills full width; text is allowed to wrap */
.menu_for_pages .et_pb_menu__menu > nav > ul > li {
	overflow: visible;
	width: 100%;
}

.menu_for_pages .et_pb_menu__menu > nav > ul > li > a {
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
	display: block;
	width: 100%;
}

/* List item base style */
.menu_for_pages li {
	color: #FFF;
	min-width: min(250px, 100%) !important;
	max-width: min(350px, 100%);
	flex-grow: 1;
	font-size: clamp(14px, 1.2em, 20px);
	box-shadow: inset -3px -3px 10px rgba(0,0,0,0.4), 0 0 10px black;
	padding: 3px;
	overflow-wrap: break-word;
}

/* Link states */
.menu_for_pages a:link, .menu_for_pages a:visited,
.flex_buttons a:link,   .flex_buttons a:visited,
.front_page_login a:link, #flex_container li a:visited {
	color: #FFF;
	text-decoration: none;
}

.menu_for_pages a:hover,  .menu_for_pages a:focus,  .menu_for_pages a:active,
.flex_buttons a:hover,    .flex_buttons a:focus,    .flex_buttons a:active,
.front_page_login a:hover,
#flex_container li a:hover, #flex_container li a:active {
	font-weight: bold;
	text-decoration: underline;
	cursor: pointer;
}

/* Brand colors — 22 entries; extend if list grows */
.menu_for_pages li:nth-child(1),  .product-categories li:nth-child(1),  .flex_buttons li:nth-child(1)  { background-color: #7A5000; }
.menu_for_pages li:nth-child(2),  .product-categories li:nth-child(2),  .flex_buttons li:nth-child(2)  { background-color: #B60202; }
.menu_for_pages li:nth-child(3),  .product-categories li:nth-child(3),  .flex_buttons li:nth-child(3)  { background-color: #2E2EFF; }
.menu_for_pages li:nth-child(4),  .product-categories li:nth-child(4),  .flex_buttons li:nth-child(4)  { background-color: #6636CE; }
.menu_for_pages li:nth-child(5),  .product-categories li:nth-child(5),  .flex_buttons li:nth-child(5)  { background-color: #b20406; }
.menu_for_pages li:nth-child(6),  .product-categories li:nth-child(6),  .flex_buttons li:nth-child(6)  { background-color: #1C5E3C; }
.menu_for_pages li:nth-child(7),  .product-categories li:nth-child(7),  .flex_buttons li:nth-child(7)  { background-color: #545454; }
.menu_for_pages li:nth-child(8),  .product-categories li:nth-child(8),  .flex_buttons li:nth-child(8)  { background-color: #8C3B3B; }
.menu_for_pages li:nth-child(9),  .product-categories li:nth-child(9),  .flex_buttons li:nth-child(9)  { background-color: #206541; }
.menu_for_pages li:nth-child(10), .product-categories li:nth-child(10), .flex_buttons li:nth-child(10) { background-color: #495465; }
.menu_for_pages li:nth-child(11), .product-categories li:nth-child(11), .flex_buttons li:nth-child(11) { background-color: #206541; }
.menu_for_pages li:nth-child(12), .product-categories li:nth-child(12), .flex_buttons li:nth-child(12) { background-color: #cc0506; }
.menu_for_pages li:nth-child(13), .product-categories li:nth-child(13), .flex_buttons li:nth-child(13) { background-color: #1f4e79; }
.menu_for_pages li:nth-child(14), .product-categories li:nth-child(14), .flex_buttons li:nth-child(14) { background-color: #4e6e18; }
.menu_for_pages li:nth-child(15), .product-categories li:nth-child(15), .flex_buttons li:nth-child(15) { background-color: #3A5F5F; }
.menu_for_pages li:nth-child(16), .product-categories li:nth-child(16), .flex_buttons li:nth-child(16) { background-color: #A32100; }
.menu_for_pages li:nth-child(17), .product-categories li:nth-child(17), .flex_buttons li:nth-child(17) { background-color: #005a6a; }
.menu_for_pages li:nth-child(18), .product-categories li:nth-child(18), .flex_buttons li:nth-child(18) { background-color: #a3850d; }
.menu_for_pages li:nth-child(19), .product-categories li:nth-child(19), .flex_buttons li:nth-child(19) { background-color: #A32100; }
.menu_for_pages li:nth-child(20), .product-categories li:nth-child(20), .flex_buttons li:nth-child(20) { background-color: #1600a3; }
.menu_for_pages li:nth-child(21), .product-categories li:nth-child(21), .flex_buttons li:nth-child(21) { background-color: #005a6a; }
.menu_for_pages li:nth-child(22), .product-categories li:nth-child(22), .flex_buttons li:nth-child(22) { background-color: #A32100; }


/* ═══════════════════════════════════════════════════════
   SECTION 6 — BUTTONS & FORMS
   PURPOSE: Applies ProVetLogic brand green (#4B7E42) to
   all standard WP/WooCommerce buttons and form inputs.
   Hover shifts to lighter green (#6E9A43) for visual
   feedback. Also styles Formidable Forms fields with
   rounded corners and brand border color.
   ═══════════════════════════════════════════════════════ */

.btn-success, button, input, select, textarea,
.woocommerce-cart table.cart input.button,
.woocommerce form.checkout_coupon input.button,
.woocommerce form.login input.button,
.woocommerce form.register input.button,
.woocommerce-page input.button,
.woocommerce-page input[type=submit],
.woocommerce input.button,
.woocommerce-page #respond input#submit,
#scroll_up {
	background: #4B7E42;
	color: #FFF;
	font-size: clamp(16px, 20px, 22px);
	padding: 5px 20px;
	font-weight: bold;
	text-align: left;
	border-radius: 15px;
	border: 2px solid #4B7E42;
	max-width: 100%;
}

button:hover, input:hover, select:hover, textarea:hover,
.woocommerce-cart table.cart input.button:hover,
.woocommerce form.checkout_coupon input.button:hover,
.woocommerce form.login input.button:hover,
.woocommerce form.register input.button:hover,
.woocommerce-page input.button:hover,
.woocommerce-page input[type=submit]:hover,
.woocommerce input.button:hover,
.woocommerce-page #respond input#submit:hover,
.btn-success:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button.alt:hover,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button.alt:hover,
#scroll_up:hover {
	background: #6E9A43;
	border-color: #62a82e !important;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button.alt,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button.alt,
input.frm_button_submit, #scroll_up {
	margin: .8em 0;
}

input.frm_button_submit {
	border: 2px solid #62a82e !important;
	background-color: #6E9A43 !important;
	color: #FFF !important;
	font-size: clamp(18px, 24px, 28px) !important;
	border-radius: 15px;
	max-width: 100%;
}

.frm_style_formidable-style input[type=text],
.frm_style_formidable-style input[type=email],
.frm_style_formidable-style input[type=password],
.frm_style_formidable-style input[type=tel],
.frm_style_formidable-style input[type=number],
.frm_style_formidable-style input[type=url],
.frm_style_formidable-style input[type=range],
.frm_style_formidable-style input[type=color],
.frm_style_formidable-style select,
.frm_style_formidable-style textarea {
	border: 2px solid #4B7E42;
	border-radius: 15px;
	padding: 5px 15px;
	margin: 10px 0;
	max-width: 100%;
}

.frm_style_formidable-style label { margin-top: 20px; padding-top: 20px; color: #4B7E42; }

.frm_style_formidable-style .frm_submit input[type=button],
.frm_style_formidable-style .frm_submit input[type=submit] {
	color: #FFF;
	background-color: #6E9A43;
	border-radius: 15px;
	max-width: 100%;
}

.frm_style_formidable-style .frm_submit input[type=button]:hover,
.frm_style_formidable-style .frm_submit input[type=submit]:hover {
	background: #6E9A43;
	border-color: #62a82e !important;
}

.login_box, .register_box { display: flex; flex-flow: column; align-content: center; max-width: 100%; }

#divi-login-form {
	margin-top: -20px;
	visibility: hidden;
	opacity: 1;
	color: orangered;
	transition: all 0.2s ease !important;
}

.show-login-form { visibility: visible !important; margin-top: 0 !important; opacity: .99 !important; }


/* ═══════════════════════════════════════════════════════
   SECTION 7 — WOOCOMMERCE: CHECKOUT & SELECT DROPDOWNS
   PURPOSE: Fixes the State/Province selectWoo dropdown on
   the checkout page. The dropdown list was invisible because
   ancestor elements with overflow:hidden clipped the
   absolutely-positioned dropdown panel.
   Fix: overflow:visible on checkout column containers +
   z-index:99999 on the open dropdown so it floats above
   all other page content.
   ═══════════════════════════════════════════════════════ */

.et_pb_wc_checkout_billing,
.et_pb_wc_checkout_shipping,
.woocommerce-checkout #customer_details {
	overflow: visible !important;
}

.select2-container { position: relative; }

.woocommerce-checkout .select2-container,
.et_pb_wc_checkout_billing .select2-container,
.et_pb_wc_checkout_shipping .select2-container {
	overflow: visible !important;
}

.select2-dropdown,
.select2-container--open .select2-dropdown,
.select2-container--open {
	z-index: 99999 !important;
	overflow: visible !important;
}

.et_pb_wc_cart_totals .select2-container--default .select2-selection--single,
.et_pb_wc_checkout_billing .select2-container--default .select2-selection--single,
.et_pb_wc_checkout_shipping .select2-container--default .select2-selection--single,
.woocommerce #content .quantity input.qty,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-page #content .quantity input.qty,
.woocommerce-page .quantity input.qty,
.woocommerce .quantity input.qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	-webkit-appearance: none;
	background-color: #eee;
	max-width: 100%;
	border-width: 0;
	border-radius: 0;
	color: #999;
	font-size: 14px;
	padding: 16px;
	line-height: 1.7em;
	border-style: solid;
}


/* ═══════════════════════════════════════════════════════
   SECTION 8 — WOOCOMMERCE: PRODUCT GRID & IMAGES
   PURPOSE: Flexbox product grid with 4 columns on desktop,
   2 on tablet, 1 on mobile. Add to Cart buttons pushed to
   card bottom with margin-top:auto so cards with varying
   content heights still align their buttons.
   ═══════════════════════════════════════════════════════ */

.woocommerce-Price-amount { font-size: 1rem; }

.woocommerce ul.products {
	display: flex;
	flex-flow: row wrap;
	padding: 1%;
	max-width: 100%;
}

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
}

.woocommerce ul.products li.product .button { margin-top: auto; display: table; }

.woocommerce ul.products li.product a img {
	width: auto;
	height: auto;
	display: block;
	margin: 0 0 1em;
	box-shadow: none;
	max-width: 100%;
}

.woocommerce div.product div.images img {
	display: block;
	width: auto;
	height: auto;
	box-shadow: none;
	max-width: 100%;
}

@media screen and (min-width: 1024px) {
	.woocommerce ul.products li.product {
		width: 21% !important;
		margin: 2% !important;
		clear: none !important;
	}
	.woocommerce ul.products li.product:nth-child(4n+1) { clear: both !important; }
}

.flex_description, .related.wt-related-products,
.related.products, .up-sells, .three_up_row {
	flex-wrap: wrap;
	padding: 1%;
	max-width: 100%;
	overflow-x: hidden;
}

.related.products > *, .up-sells > * { flex: 0 0 99%; max-width: 100%; }

.et-db #et-boc .et-l .et_pb_wc_add_to_cart .quantity input.qty {
	border: 0 solid #333 !important;
	width: auto;
	max-width: min(5.5rem, 100%) !important;
}

.woocommerce .quantity input.qty { width: min(5.0em, 100%) !important; }

.wfc-cart-table td.product-quantity input.qty {
	-webkit-appearance: auto;
	appearance: auto;
	background: #f6f6f6;
	border: none;
	border-radius: var(--wfc-btn-radius);
	box-shadow: none;
	color: #707070;
	font-size: 14px;
	height: 30px;
	margin: 0;
	padding: 0 0 0 5px;
	width: min(3.0rem, 100%);
}

.wt-wishlist-button { font-size: 14px; padding-left: 2px; }
.products .product .yith-wcwl-add-to-wishlist .delete_item:before { content: '\e889'; color: #ffa600; }

.wc-fast-cart .woocommerce-notices-wrapper .woocommerce-message {
	background: #4B7E42;
	border: none;
	color: inherit;
	font-size: 14px;
	line-height: 1;
	padding: 30px 2em;
	max-width: 100%;
}


/* ═══════════════════════════════════════════════════════
   SECTION 9 — WOOCOMMERCE: CART & ORDER TABLES
   PURPOSE: Makes WooCommerce order/cart tables scroll
   horizontally on small screens instead of breaking the
   layout.
   ═══════════════════════════════════════════════════════ */

.woocommerce table.shop_table { max-width: 100%; overflow-x: auto; display: block; }

.woocommerce table.shop_table tbody,
.woocommerce table.shop_table thead,
.woocommerce table.shop_table tr { display: table; width: 100%; table-layout: fixed; }


/* ═══════════════════════════════════════════════════════
   SECTION 10 — IMAGES & MEDIA EMBEDS
   PURPOSE: Blog post featured images float left with
   right/bottom spacing and a green groove border matching
   the brand palette. On mobile (Section 16) the float is
   removed so images stack above text.
   ═══════════════════════════════════════════════════════ */

.et_pb_post { margin-bottom: 80px; max-width: 100%; }

.et_pb_post .entry-featured-image-url img {
	height: auto;
	float: left;
	padding-right: 14px;
	margin-right: 1em;
	margin-bottom: 1em;
	max-width: min(250px, 45%);
	border: 5px groove #8cc68d;
	border-radius: 5px 20px 5px;
}

.et_pb_gallery_item, .et_pb_gallery_image { max-width: 100%; height: auto; }

.et_pb_video_box, .et_pb_video,
iframe[src*="youtube"], iframe[src*="vimeo"] { max-width: 100% !important; height: auto; }

.et_pb_modal, .et_pb_popup { max-width: 95vw !important; max-height: 95vh !important; overflow: auto; }


/* ═══════════════════════════════════════════════════════
   SECTION 11 — CUSTOM SITE COMPONENTS
   PURPOSE: ProVetLogic-specific classes — flex button rows,
   touchpoint product layout, turf product widget, online
   training area, color-banded data tables, social icons,
   IACP registration links, and utility classes.
   ═══════════════════════════════════════════════════════ */

.green_border { border: 5px solid; border-image-slice: 1; }

ul.sunshine li { list-style-image: url('/wp-content/uploads/2021/01/sunshine_small.png') !important; padding: 0; }

.online_training { width: 100%; max-width: 100%; }
.certificate_css { margin-top: 20rem; border: 2px solid blue; max-width: 100%; }

.flex_buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	font-size: clamp(16px, calc(1em + 1vw), 32px);
	gap: 0.5rem;
	max-width: 100%;
}

.flex_buttons li {
	box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
	color: #FFF;
	flex-grow: 0.1;
	list-style-type: none;
	padding: 0.21rem;
	font-size: clamp(12px, calc(.1em + 1vw), 24px);
	text-align: center;
	overflow-wrap: break-word;
	max-width: 100%;
}

.flex_buttons_title { color: #4d8481; font-size: clamp(18px, calc(1em + 1vw), 36px); text-align: center; margin-top: 1.2em; padding: 1em; }

.flex-grid th { color: white; font-weight: bold; }
.flex-grid tr:nth-of-type(odd) { background: #eee; }
.flex-grid { max-width: 100%; overflow-x: auto; }

.touchpoint_logo { max-width: min(40%, 300px); float: left; }
.touchpoint_heading { font-size: clamp(18px, 1.52em, 32px); color: green; }

.turf_background { background-size: contain; background-repeat: no-repeat; }
.turf_widget { display: flex; justify-content: center; max-width: 100%; }
.turf_widget img { max-width: min(200px, 100%); }

.simple-sitemap-page li { color: #000; }
.menu_for_links_widgettitle { font-size: 16px !important; }

#et-info-phone,
.front_page_login .frm_logout_link { color: #FFF; }

.IACP_registration, .IACP_registration a { color: #FFFF; }
.IACP_registration a { color: yellow; }

.et-social-icon a {
	display: inline-block;
	position: relative;
	color: #eaeaea !important;
	font-size: 24px;
	text-align: center;
	text-decoration: none;
	transition: color .3s ease;
}

.et-pb-slider-arrows .et-pb-arrow-next { color: #0c71c3; font-size: 2em; }
.wp-caption.alignleft { margin: 0 2px 20px 0 !important; max-width: 100%; }


/* ═══════════════════════════════════════════════════════
   SECTION 12 — FOOTER
   ═══════════════════════════════════════════════════════ */

#main-footer { overflow-x: hidden; max-width: 100vw; }
.footer-widget { max-width: 100%; overflow-wrap: break-word; }
#footer-info + #footer-info { display: none; }


/* ═══════════════════════════════════════════════════════
   SECTION 13 — ACCESSIBILITY
   PURPOSE: Visible focus ring for keyboard users.
   Required for WCAG 2.1 AA — do not remove.
   ═══════════════════════════════════════════════════════ */

*:focus { outline: 2px solid #4B7E42; outline-offset: 2px; }


/* ═══════════════════════════════════════════════════════
   SECTION 14 — RESPONSIVE: TABLET (481px–1024px)
   ═══════════════════════════════════════════════════════ */

@media screen and (min-width: 481px) and (max-width: 1024px) {
	.et_pb_row { padding: 2% !important; }
	.container { padding-left: 2rem !important; }
	#menu-sidebar-menu { max-width: 100%; }
}


/* ═══════════════════════════════════════════════════════
   SECTION 15 — RESPONSIVE: MOBILE (≤768px)
   ═══════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {
	table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
	.menu_for_pages li { min-width: 100% !important; }
	#top-menu li li a { width: 100% !important; }
	.nav li ul { width: 100%; }
	.page.et_pb_pagebuilder_layout #main-content { flex-flow: column; padding-left: 1rem !important; }
	.touchpoint_logo { max-width: 100%; float: none; margin-bottom: 1rem; }
	#top-menu-nav { margin-left: 0; }
}


/* ═══════════════════════════════════════════════════════
   SECTION 16 — RESPONSIVE: SMALL MOBILE (≤480px)
   ═══════════════════════════════════════════════════════ */

@media screen and (max-width: 480px) {
	.et_pb_post .entry-featured-image-url img { float: none; max-width: 100%; margin: 0 0 1em; padding-right: 0; }
	.flex_buttons li { font-size: 1rem; padding: 0.5rem; }
	h1 { font-size: clamp(20px, 5vw, 32px); }
	h2, h3 { font-size: clamp(18px, 4vw, 24px); }
	.menu_for_pages { margin-top: 0.25em; }
}


/* ═══════════════════════════════════════════════════════
   SECTION 17 — CONTAINER QUERIES (modern browsers only)
   ═══════════════════════════════════════════════════════ */

@supports (container-type: inline-size) {
	.container { container-type: inline-size; container-name: main-container; }

	@container main-container (max-width: 600px) {
		.menu_for_pages li { font-size: 1rem; min-width: 100% !important; }
		.flex_buttons { flex-direction: column; }
		.flex_buttons li { width: 100%; }
	}
}


/* ═══════════════════════════════════════════════════════
   SECTION 18 — PRINT
   ═══════════════════════════════════════════════════════ */

@media print {
	body { background: white; color: black; margin: 0; }
	#header, #comments, #sidebar { display: none; }
	#content, #footer { display: block; }
}


/* ═══════════════════════════════════════════════════════
   SECTION 19 — REDUCED MOTION
   PURPOSE: Respects OS "Reduce Motion" preference.
   Required for WCAG 2.1 AA compliance.
   ═══════════════════════════════════════════════════════ */

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