/*
Theme Name: 2C
Theme URI: https://www.2cdevgroup.com/
Author: 2C Dev Group
Author URI: https://www.2cdevgroup.com/
Description: 2C is a modern multipurpose WordPress theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 2c
*/

/* =========================================================
   ROOT TYPOGRAPHY SYSTEM
   Establishes rem baseline, vertical rhythm, and resets
   ========================================================= */

html {
    font-size: 16px; /* Root size for all rem units */
    line-height: 1.6; /* Global vertical rhythm */
    margin: 0;
    padding: 0;
}

/* =========================================================
   BODY TYPOGRAPHY DEFAULTS
   Applies core readable text styling across the site
   ========================================================= */

body {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: var(--site-text);
    letter-spacing: 0.01em;
    background-color: var(--site-bg);
	margin:0rem;
	width: 100%;
    overflow-x: hidden;
}

/* =========================================================
   LINK STYLES
   Core link styling with hover underline accent
   ========================================================= */

a {
    color: var(--brand-link);
    text-decoration: none;
}
a:hover {
    color: (--brand-link-hover);
    border-bottom: 3px double var(--brand-link-hover-border);
}

/* =========================================================
   LIST ELEMENTS
   Default typographic structure for ul, ol, dl
   ========================================================= */

ul, ol, dl {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--site-text);
}
ul, ol {
    margin-bottom: 1rem;
}
.wpb-plan-features ul {
    margin-bottom: 1rem;
}
li {
    font-size: 1rem;
    color: var(--site-text);
    line-height: 1.6;
}

/* =========================================================
   HEADINGS
   Global heading family, size scale, rhythm, and spacing
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    color: var(--brand-primary);
	margin-top: 0;
}
h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-top: 3.8125rem !Important;
}
h2 {
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 1.5625rem;
}
h3 {
    font-size: 2.24rem;
    line-height: 1.1;
    margin-bottom: 1.25rem;
}
h4 {
    font-size: 1.792rem;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}
h5 {
    font-size: 1.4336rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

/* =========================================================
   SPECIAL TYPOGRAPHY ELEMENTS
   Preheaders, hero text, intro lines, and numeric stats
   ========================================================= */

.pretext-home {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.01em;
    margin-bottom: 0.4375rem;
    padding-top: 2.6875rem;
}
.blog,
.home h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}
.home .intro-text-home {
    font-size: 1.5625rem;
    line-height: 1.6;
    color: #ffffff;
    margin-top: 0;
}
.headline-one-white {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 3.4375rem;
}
.intro-text,
.intro-text-underline,
.intro-text-white {
    font-size: 1.5625rem;
    line-height: 2.375rem;
}
.intro-text-white {
    color: #ffffff;
}
.intro-text-underline::after { /* Adds short underline below intro text headings when this class is used in p tags.*/
    content: "";
    display: block;
    width: 10%;
    height: 0.125rem;
    background-color: var(--site-text);
    margin: 0.125rem 0 0 0;
}
.number-stat {
    font-size: 6.25rem;
    font-weight: 800;
    position: relative;
}
.number-stat::after {
    content: "";
    display: block;
    width: 100%;
    height: 0.125rem;
    background-color: var(--site-text);
    margin: 0.125rem auto 0;
}

/* =========================================================
   SHARED TEMPLATE TYPOGRAPHY
   Typography styles for fullwidth WP template, search.php, category.php
   ========================================================= */
  
/* Fullwidth Template*/

.page-template-fullwidth .fullwidth-title {
    padding-left: 0.9375rem;
	transform: translateX(-0.25rem);
    padding-right: 0.9375rem;
    font-size: 3.5rem;
    line-height: 1.1;
    margin-top: 3.8125rem !important;
}

/* search.php & category.php*/
h1.php-template-headline {
    font-size: 3.5rem;
    line-height: 1.1;
    padding-top: 0;
	margin-top: 3.8125rem !important;
}

/* =========================================================
   BLOCKQUOTE STYLES
   Global styling for pull quotes and citations across all content areas
   ========================================================= */
   
html body .wpb_wrapper blockquote {
    margin-left: auto !important;
    margin-right: auto !important;
}
.wpb_wrapper blockquote {
    position: relative !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: var(--brand-box-background) !important;
    background: var(--brand-quote-text) !important;
    padding: 2.5rem 3.125rem !important;
    border-left: 5px solid #e8e8e9 !important;
    margin: 1.875rem auto !important;
    margin-left: 0 !important; /* Remove 15px indent on the left */
    line-height: 1.6 !important;
    max-width: 50rem !important;
}
.wpb_wrapper blockquote::before {
    font-family: "Font Awesome 5 Free" !important;
    content: "\f10d" !important;
    font-weight: 900 !important;
    font-size: 3.5rem !important;
    color: var(--brand-quote-mark) !important;
    position: absolute !important;
    top: -0.125rem !important;
    left: 1rem !important;
}
.wpb_wrapper blockquote p {
    display: inline-block !important; /* Ensure paragraph text is styled correctly */
    margin-top: -0.625rem !important; /* Overlaps the icon slightly */
    padding-left: 0.9375rem !important;
    z-index: 1 !important;
    position: relative !important;
}

/* =========================================================
   TESTIMONIAL COMPONENTS
   Styling for testimonial sliders and call-out boxes
   ========================================================= */

/* Testimonial Slider Raw HTML element from WPBakery - Borrows some styles from blockquote above: quote icon, left grey edge, etc */

.testimonial-slider {
    max-width: 50rem;
    margin: 0 auto;
}
.testimonial-slide {
    text-align: center;
    padding: 1.25rem;
}
.testimonial-title {
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: bold;
    color: var(--brand-primary);
    margin-bottom: 0.625rem;
}
.testimonial-quote {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}
html body .testimonial-slider .testimonial-quote {
    padding-left: 3.875rem !important;
}
.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
}
.testimonial-headshot {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    margin-right: 0.9375rem;
    object-fit: cover;
}
.author-info {
    text-align: left;
}
.author-name {
    font-weight: bold;
    margin: 0;
}
.author-title {
    margin: 0;
    font-size: 0.9rem;
    color: var(--slider-testimonial-author);
}

/* Testimonial Call-Out Box Styles for Raw HTML Element in WPBakery*/

.testimonial-box {
    background-color: var(--callout-testimonial-background);
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 31.25rem;
    margin: 0 auto; /* center horizontally */
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    position: relative; /* Required for the triangle */
}
.testimonial-box::after { /* Add a triangle at the bottom center */
    content: "";
    position: absolute;
    bottom: -0.5625rem;      /* Adjust to control vertical position */
    left: 50%;          /* Center horizontally */
    transform: translateX(-50%);
    border-width: 10px 10px 0 10px;  /* Triangle size (top, right, bottom, left) */
    border-style: solid;
    border-color: var(--callout-testimonial-background) transparent transparent transparent; /* White triangle */
}
.testimonial-title { /* Title */
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    position: relative;
    line-height: 1.2;
}
.testimonial-stars {
    color: var(--brand-stars); /* yellow */
    font-size: 1rem;
}
.testimonial-text {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--site-text);
    margin: 0;
}
.testimonial-author {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--brand-quote-text);
    margin: 0;
}

/* Raw HTML Element in WPBakery: Add Headshot, Name and Company below Blockquote */

.image-text-container {
    display: flex;
    align-items: center; /* Vertically center the image and text */
}

.image-text-container img {
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 50%;    /* Creates a circle */
    object-fit: cover;     /* Covers container without distortion */
    margin-right: 0.9375rem;
}
body .vc_column_container.vertical-center > .vc_column-inner { /* Vertically center content in WPB column. Add vertical-center as col CSS Style. */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;  /* Optional: centers horizontally too */
    min-height: 21.875rem !important;      /* Set an appropriate min-height */
    box-sizing: border-box !important;
}

/* =========================================================
   GLOBAL IMAGE ALIGNMENT
   Alignment utilities for images across all theme elements
   ========================================================= */
   
img.alignright      { float:right; margin:0 0 1em 1em; }
img.alignleft       { float:left;  margin:0 1em 1em 0; }
img.aligncenter     { display:block; margin-left:auto; margin-right:auto; }
a img.alignright    { float:right; margin:0 0 1em 1em; }
a img.alignleft     { float:left;  margin:0 1em 1em 0; }
a img.aligncenter   { display:block; margin-left:auto; margin-right:auto; }

/* =========================================================
   WORDPRESS IMAGE CAPTIONS
   Default styling and spacing for native WordPress caption elements
   ========================================================= */
   
.wp-caption {
    display: inline-block; 
    max-width: 100%; 
}
.wp-caption.alignright {
    float: right;
    margin: 0.5em 0 1em 1.5em; /* Standard right float margin */
}
.wp-caption.alignleft {
    float: left;
    margin: 0.5em 1.5em 1em 0; /* Standard left float margin */
}
.vc_column-text .wpb_wrapper {
    display: flow-root; 
}

/* =========================================================
   Z-INDEX CONTRACTS
   Reserved layering to prevent overlap conflicts
   ========================================================= */

/* Base content: 1–99 */
/* Sticky utilities / banners: 100–499 */
/* Header chrome (desktop & mobile): 1000–1099 */
/* Off-canvas panels / menus: 1100–1199 */
/* Modals / dialogs (site-level): 1300–1399 */
/* WP admin bar: 9999 (WordPress controlled) */

:root {
    --z-header: 1000;
    --z-offcanvas: 1100;
    --z-modal: 1300;
}

/* =========================================================
   LAYOUT: CONTAINERS & MORE
   Global container structure and layout utilities for core theme elements
   ========================================================= */
   
.centered {
	max-width: 81.25rem;
	position: relative;
	margin: 0 auto;
}
.container {
	width: 80%;
	margin: 0 auto;
	padding: 1.25rem;
}
.vbottom {
	vertical-align:bottom;
}
.bottomspace {
	height:3.75rem;
}

/* =========================================================
   LAYOUT: UTILITY BAR (GLOBAL WRAPPER)
   Structural styling for top bar area above main navigation
   ========================================================= */

/* Internal flex container */
.utilitybar .container-topbar {
    display: flex;
    align-items: center; /* Vertical centering */
    justify-content: space-between;
    height: 2.8rem;
    max-height: 2.8rem;
    padding: 0 1rem;
    box-sizing: border-box;
}
/* Remove default widget spacing */
.utilitybar .container-topbar > * {
    margin-top: 0;
    margin-bottom: 0;
}
/* Right section (icons, links) */
.utilitybar .right {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    white-space: nowrap !important;
    gap: 0.75rem; /* 12px */
}

/* =========================================================
   LAYOUT: HEADER & RIGHT MENU
   Shared structural rules for all header layouts
   ========================================================= */

.menucontainer {
    display: flex;
    position: relative;
    padding: 0.4375rem 0.9375rem;
    align-items: center;
}
.custom-logo {
    display: inline-block;
    max-width: 15.625rem;
    padding-right: 0.625rem;
}
.custom-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.custom-logo-link:hover {
    border-bottom: none;
}
.topmenu {
    display: flex;
    flex-grow: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}
.topmenu li {
    position: relative;
    display: inline-block;
    padding-right: 1.25rem;
}
.topmenu > li > a {
    font-size: 0.8rem;
    text-decoration: none;
    position: relative;
}
.topmenu li:has(ul) > a::after {
    content: ' ▼';
    font-size: 0.5625rem;
}
.topmenu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    margin: 0;
    z-index: 1000;
    width: max-content;
}
.topmenu li:hover ul {
    display: block;
}
.topmenu li ul li {
    display: block;
}
.topmenu li ul li a {
    display: block;
    padding: 0.65rem 0.9375rem;
    font-size: 0.8rem;
    text-decoration: none;
}
.topmenu li ul li ul {
    position: static;
    margin-left: 0.9375rem;
    display: block;
    padding: 0;
}
.topmenu li ul li ul li a {
    display: block;
    padding: 0.65rem 0.9375rem;
    font-size: 0.8rem;
    text-decoration: none;
}
.rightmenu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
}
.search-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-size: 1.625rem;
    padding-left: 1.25rem;
    transition: color 0.3s ease, opacity 0.3s ease;
}
.search-toggle:hover {
    opacity: 0.8;
}

/* =========================================================
   HEADER SEARCH PANEL
   Height-animated dropdown with centered form content
   ========================================================= */

#header-search-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: 20vw;
    max-width: 18.75rem;
    background-color: none;
    padding: 0.9375rem;
    box-sizing: border-box;
    z-index: 999;
    overflow: hidden;
    height: 0;
    opacity: 0;
    pointer-events: none;
    transition: height 460ms ease, opacity 200ms ease; /* Increase ms for a slower, calmer dropdown */
}
#header-search-panel.active {
    opacity: 1;
    pointer-events: auto;
}
#header-search-panel form {
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header-search-panel form > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header-search-panel input[type="text"] {
    width: 100%;
    margin: 0;
    padding: 0.625rem;
    font-size: 1rem;
    border-radius: 4px;
    box-sizing: border-box;
}
#header-search-panel input[type="submit"] {
    display: none;
}

/* =========================================================
   LAYOUT: HEADER 01 (OPAQUE)
   Scoped styles for solid color header.
   ========================================================= */

/* Header 01 container stacking */
body.header01 .utilitybar {
    position: relative;
    z-index: 30;
}
body.header01 .menucontainer {
    background: var(--header01-menucontainer-background);
    position: relative;
    z-index: 20;
}
body.header01 .secondarymenucontainer {
    position: relative;
    z-index: 10;
}
body.header01 .topmenu,
body.header01 .topmenu li ul,
body.header01 .topmenu li ul li ul {
    background: var(--header01-topmenu-background);
}
body.header01 .topmenu > li > a,
body.header01 .topmenu li ul li a,
body.header01 .topmenu li ul li ul li a,
body.header01 .search-toggle {
    color: var(--header01-topmenu-links);
}
body.header01 .topmenu li ul li:nth-child(n+3) a {
    border-top: 1px solid var(--header01-topmenu-links);
}
body.header01 .search-toggle:hover {
    color: var(--header01-search-toggle-hover);
}

/* =========================================================
   LAYOUT: HEADER 02
   Transparent header for light hero backgrounds
   ========================================================= */

/* Base transparency and stacking */
body.header02 .menucontainer {
    background: transparent !important;
    position: relative;
    z-index: 10;
}

/* Keep the main menu container above the secondary menu container */
body.header02 .menucontainer.menucontainer {
    z-index: 20;
}
body.header02 .secondarymenucontainer {
    position: relative;
    z-index: 10;
}

/* Dropdown transparency */
body.header02 .topmenu,
body.header02 .topmenu li ul,
body.header02 .topmenu li ul li ul {
    background: transparent;
}

/* Default text color for light surfaces */
body.header02 .topmenu > li > a,
body.header02 .topmenu li ul li a,
body.header02 .topmenu li ul li ul li a,
body.header02 .search-toggle {
    color: var(--header02-topmenu-links) !important;
}
body.header02 .search-toggle:hover {
    color: var(--header02-search-toggle-hover) !important;
}

/* Dark-surface variant for dark image or solid-colored hero backgrounds in first WPBakery row. */
body.header02.dark-surface .topmenu > li > a,
body.header02.dark-surface .topmenu li ul li a,
body.header02.dark-surface .topmenu li ul li ul li a,
body.header02.dark-surface .search-toggle {
    color: var(--header02-dark-search-toggle) !important;
}
body.header02.dark-surface .search-toggle:hover {
    color: var(--header02-dark-search-toggle-hover) !important;
}

/* Submenu divider lines */
body.header02 .topmenu li ul li:nth-child(n+3) a {
    border-top: 1px solid rgba(0, 0, 0, 0.3);
}
body.header02.dark-surface .topmenu li ul li:nth-child(n+3) a {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* =========================================================
   HEADER 02 HERO OVERLAY
   Optional slide-under behavior for tall initial WPBakery hero rows
   ========================================================= */

/* Hero rows explicitly marked in WPB with .hero-row slide under menucontainer + secondarymenucontainer,
   but remain below the utility bar. No spacing is added or removed. */
body.header02 .hero-row {
    position: relative;
    margin-top: -6.1rem !important;
    z-index: 1;
}

/* Ensure the visual overlap looks intentional by placing the header layers above the hero */
body.header02 .menucontainer,
body.header02 .secondarymenucontainer {
    position: relative;
    z-index: 10;
}

/* Utility bar stays fully above everything and never overlapped */
body.header02 .utilitybar {
    position: relative;
    z-index: 20;
}

/* =========================================================
   LAYOUT: HEADER 03
   Dark translucent "smoked glass" overlay header with white text for clean, modern, even cinimatic look.
   ========================================================= */

/* Base glass surface and stacking */
body.header03 .menucontainer,
body.header03 .secondarymenucontainer {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    position: relative;
    z-index: 10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Keep the main menu container above the secondary menu container */
body.header03 .menucontainer.menucontainer {
    z-index: 20;
}

/* Dropdown surface */
body.header03 .topmenu li ul,
body.header03 .topmenu li ul li ul {
    background: rgba(0, 0, 0, 0.80);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
}

/* White nav and icon color */
body.header03 .topmenu > li > a,
body.header03 .topmenu li ul li a,
body.header03 .topmenu li ul li ul li a,
body.header03 .search-toggle {
    color: var(--header03-topmenu-links) !important;
}
body.header03 .search-toggle:hover {
    color: var(--header03-search-toggle-hover) !important;
}

/* Submenu divider lines */
body.header03 .topmenu li ul li:nth-child(n+3) a {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

/* Inherit text color inside menu container content */
body.header03 .menucontainer ul,
body.header03 .menucontainer ol,
body.header03 .menucontainer dl,
body.header03 .secondarymenucontainer ul,
body.header03 .secondarymenucontainer ol,
body.header03 .secondarymenucontainer dl {
    color: inherit;
}

/* =========================================================
   HEADER 03 HERO OVERLAY
   Optional slide-under behavior for tall initial WPBakery hero rows
   ========================================================= */

/* Hero rows explicitly marked in WPB with .hero-row slide under menucontainer + secondarymenucontainer,
   but remain below the utility bar. No spacing is added or removed. */
body.header03 .hero-row {
    position: relative;
    margin-top: -6.1rem !important;
    z-index: 1;
}

/* Ensure the visual overlap looks intentional by placing the header layers above the hero */
body.header03 .menucontainer,
body.header03 .secondarymenucontainer {
    position: relative;
    z-index: 10;
}

/* Utility bar stays fully above everything and never overlapped */
body.header03 .utilitybar {
    position: relative;
    z-index: 20;
}

/* =========================================================
   SECONDARY MENU CONTAINER
   Full-width wrapper for left and right secondary menus positioned beneath the main header
   ========================================================= */
.secondarymenucontainer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background-color: var(--secondary-menucontainer-background);
	padding: 0 0.9375rem;
	box-sizing: border-box;
}

/* =========================================================
   SECONDARY MENUS (LEFT AND RIGHT) BELOW MENU CONTAINER
   Structural and styling rules for secondary navigation areas positioned beneath the main menu on desktop
   ========================================================= */

/* Left and right containers */
.secondarymenuleft {
	display: inline-block;
	text-align: left;
}
.secondarymenuright {
	display: inline-block;
	float: right;
	text-align: right;
}

/* General Menu Styling - Left and Right Menus */
#menu-left-secondary-menu,
#menu-right-secondary-menu {
	list-style: none;   /* Remove default list styling */
	padding: 0;
	margin: 0;
	display: flex;      /* Horizontal layout */
	color: var(--secondary-menu-text);
}

/* Menu items - Left and Right Menus */
#menu-left-secondary-menu li,
#menu-right-secondary-menu li {
	display: inline-block;
}

/* Menu links - Left and Right Menus */
#menu-left-secondary-menu a,
#menu-right-secondary-menu a {
    display: block;                               /* Make full block clickable */
    padding: 0.625rem 0.9375rem;                  /* Adjust spacing as needed */
    text-decoration: none !important;
    color: var(--secondary-menu-text);                              /* White text for normal state */
    transition: background-color 0.3s, color 0.3s; /* Smooth hover effect */
    font-size: 0.8rem;
}

/* Hover / Focus / Active States - Left and Right Menus */
#menu-left-secondary-menu a:hover,
#menu-left-secondary-menu a:focus,
#menu-left-secondary-menu a:active,
#menu-right-secondary-menu a:hover,
#menu-right-secondary-menu a:focus,
#menu-right-secondary-menu a:active {
	background-color: var(--secondary-menu-links-hover-background);       /* Gray background on hover */
	color: var(--secondary-menu-links-hover) !important;       /* White text on hover */
	border-bottom: none !important;  /* Remove underline or border */
}

/* Righthand Secondary Menu */
#menu-right-secondary-menu {
	margin-left: auto;  /* Push to the right inside flex container */
}

/* =========================================================
   BACK LINK (REFERRER-BASED NAVIGATION)
   Styling for the “← Return to Previous Page” link under H1 on author.php, search.php, tag.php, taxonomy.php
   ========================================================= */

.back-link {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-link);
    text-decoration: none;
    margin: 0 0 1.25rem 0; /* bottom spacing below the link */
    padding-bottom: 0.25rem; /* slight visual anchor */
}
.back-link:hover {
    color: var(--brand-link-hover);
    text-decoration: none;
	border-bottom: none !important;
}

/* =========================================================
   BUTTON: SITE-WIDE WP
   Global button styling aligned with brand orange palette
   ========================================================= */
.wp-element-button {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background-color: var(--brand-btn-primary);
    color: var(--brand-btn-on-primary);
    border: none;
    border-radius: 4px;
    padding: 0.625rem 0.9375rem;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}
.wp-element-button:hover {
    background-color: var(--brand-btn-primary-hover);
    color: var(--brand-btn-on-primary);
	border-bottom: none !important;
}
.wp-element-button:active,
.wp-element-button:focus {
    background-color: var(--brand-btn-primary-active);
    color: var(--brand-btn-on-primary);
    outline: none;
	border-bottom: none !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important;
}

/* =========================================================
   SOCIAL PROFILE ICON ROW
   Base layout, default tone, alignment variants, and brand-hover colors for [profile_social]
   ========================================================= */

.profile-social {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 15px;
    color: var(--brand-social-icons); /* Default icon tone */
}

.profile-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    border: none !important;
    line-height: 0;
    color: inherit;
    width: 30px !important;
    height: 30px !important;
}

/* Icon sizing + inherited tone via currentColor */
.profile-social__link svg {
    width: 30px !important;
    height: 30px !important;
    display: block;
    max-width: none;
    max-height: none;
    transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
}

/* ==== ALIGNMENT VARIANTS ==== */

.profile-social--center {
    justify-content: center;
}

.profile-social--right {
    justify-content: flex-end;
}

/* ==== HOVER COLOR CONTROL ==== */
/* Stop theme-wide a:hover brand color from bleeding into icons.
   Email + Website are intentionally excluded so they use theme hover color. */
.profile-social__link:hover,
.profile-social__link:focus {
    color: inherit !important;
}

.profile-social__link--email:hover,
.profile-social__link--email:focus,
.profile-social__link--website:hover,
.profile-social__link--website:focus {
    color: unset !important; /* Allow theme link hover to apply */
}

/* ==== BRAND HOVER COLORS ==== */
/* Use higher specificity so these beat the generic hover lock above. */

.profile-social__link.profile-social__link--behance:hover { color: #0057FF !important; }
.profile-social__link.profile-social__link--discord:hover { color: #5865F2 !important; }
.profile-social__link.profile-social__link--dribbble:hover { color: #EA4C89 !important; }
.profile-social__link.profile-social__link--facebook:hover { color: #1877F2 !important; }
.profile-social__link.profile-social__link--github:hover { color: #181616 !important; }
.profile-social__link.profile-social__link--instagram:hover { color: #E1306C !important; }
.profile-social__link.profile-social__link--linkedin:hover { color: #0077B5 !important; }
.profile-social__link.profile-social__link--medium:hover { color: #1A8917 !important; }
.profile-social__link.profile-social__link--patreon:hover { color: #FF424D !important; }
.profile-social__link.profile-social__link--pinterest:hover { color: #BD081C !important; }
.profile-social__link.profile-social__link--slack:hover { color: #4A154B !important; }
.profile-social__link.profile-social__link--threads:hover { color: #000000 !important; }
.profile-social__link.profile-social__link--tiktok:hover { color: #EE1D52 !important; }
.profile-social__link.profile-social__link--vimeo:hover { color: #1AB7EA !important; }
.profile-social__link.profile-social__link--x:hover { color: #000000 !important; }
.profile-social__link.profile-social__link--youtube:hover { color: #FF0000 !important; }
.profile-social__link.profile-social__link--email:hover { color: var(--twoc-brand, var(--brand-btn-primary)) !important; }
.profile-social__link.profile-social__link--website:hover { color: var(--twoc-brand, var(--brand-btn-primary)) !important; }

/* =========================================================
   WPBAKERY COLUMN CARD
   Column-as-card shell with hover lift for WPBakery layouts
   ========================================================= */

.column-card { /* Apply to columns in the row in WPBakery*/                                    /* Include padding in overall size */
    border: 1px solid var(--brand-outline);                        /* Single outline around the whole card */
    background-color: var(--brand-card-bg);                        /* Card surface */
    padding: 0.625rem;                                             /* Inner padding */
    border-radius: 4px;                                            /* Card corner radius */
    overflow: hidden;                                              /* Prevent content spill during hover */
    margin-left: 0.9375rem !important;
    margin-right: 0.9375rem !important;
    max-width: 25.1875rem;                                        /* Constrain to fit all on one row, incl margins */
    transition: transform var(--brand-card-transition-duration) var(--brand-card-transition-ease), box-shadow var(--brand-card-transition-duration) var(--brand-card-transition-ease);
    transform: translateZ(0);                                      /* Prevent subpixel jitter on transform */
}
.column-card.vc_column_container {
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important;
}
.column-card:hover {
    transform: translateY(var(--brand-card-lift-y));
    box-shadow: var(--brand-card-shadow-hover);
}

/* =========================================================
   GLOBAL INPUT BASELINE
   Universal input appearance across forms, search, and widgets
   ========================================================= */
   
input:not([type="submit"]), textarea {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: #414546;
    background-color: #fff;
    border: 1px solid var(--brand-outline) !important;
    border-radius: 4px;
    padding: 0 0.75rem !important;
    height: 2.8125rem;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    margin-bottom: 1.25rem;
}

/* Removes bottom margin from inputs inside filter/search rows */
.catfilters-row input:not([type="submit"]),
.search-form-category input:not([type="submit"]),
.authorfilters-row input:not([type="submit"]) {
    margin-bottom: 0 !important;
}
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand-outline) !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow);
}
textarea {
   resize: vertical; /* Allow vertical resize only */
   transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* =========================================================
   WP SEARCH BLOCK
   Gutenberg search block input, button, and wrapper styling
   ========================================================= */

.wp-block-search__inside-wrapper {
    display: flex;
    align-items: center;
    align-items: stretch;
    margin-bottom: 1.25rem;
}
.wp-block-search__input {
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--brand-outline);
    height: 2.8125rem;
    line-height: 2.8125rem;
}
.wp-block-search__input:focus {
    outline: none;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow);
    border-color: var(--brand-outline);
}
.wp-block-search__button {
    background-color: var(--brand-btn-primary);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    height: 2.8125rem;
    padding: 0 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wp-block-search__button:hover {
    background-color: var(--brand-btn-primary-hover);
    color: #fff;
}
.wp-block-search__button:active,
.wp-block-search__button:focus {
    background-color: var(--brand-btn-primary-active);
    color: #fff;
    outline: none;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow);
}

/* =========================================================
   DROPDOWN + SEARCH CONTAINERS (CATEGORY.PHP, TAG.PHP, SEARCH.PHP)
   Styling for filter dropdowns and search containers across archive templates
   ========================================================= */

/* Base layout — used by normal archive views (dropdown + search) */
.catfilters-row {
    display: flex;
    justify-content: flex-end;    /* positions dropdown + search to the right */
    align-items: flex-end;        /* aligns baseline of dropdown and search */
    gap: 1.875rem;
    margin-bottom: 1.5625rem;
    flex-wrap: wrap;
}

/* Variant — used by search results within any archive type */
.category.search-results .catfilters-row,
.tag.search-results .catfilters-row,
.author.search-results .catfilters-row {
    justify-content: space-between;  /* back-link left, search right */
    align-items: flex-start;         /* aligns top edge of search form */
}

/* Variant - left-align with page content on search.php */
.search.search-results .catfilters-row {
    display: flex;
    justify-content: flex-start;  /* override default right-align */
    align-items: flex-start;
}

/* Disable flex alignment when no-results on search.php */
body.search.search-no-results .catfilters-row {
  display: block !important;
}

/* Column container for each filter element */
.catdropdowncontainer {
    width: 39.625rem;
    display: block;
}

body.search .catdropdowncontainer {
    width: auto; /* remove fixed width so form fits natural flow on search.php */
}

/* Form control height alignment */
.catdropdowncontainer > select,
.catdropdowncontainer input {
    height: 2.8125rem;
}

/* Base widths for dropdown and search box */
.categoryselect,
#search-box {
    width: 18.75rem;
    max-width: 100%;
}

/* Dropdown label */
.choosecat {
    font-weight: bold;
    font-size: 0.875rem;
    color: #333;
    margin-bottom: 0.3125rem;
}

/* Dropdown appearance */
.categoryselect {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #414546;
    font-size: 0.875rem;
}
.categoryselect:focus {
    outline: none !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow);
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    color: #414546;
}

/* Shared search form layout (category.php, tag.php) */
.search-form-category {
    display: flex;
    justify-content: flex-end; /* aligns search to right */
    align-items: flex-end; /* aligns baseline with dropdown */
    gap: 0.5rem;
    margin: 0;
    position: relative;
    top: 0.1875rem; /* nudges input + button slightly down for perfect alignment */
}

/* SEARCH.PHP SPECIFIC — keep search box left-aligned always */

/* Overide search form layout (search.php) */ 
body.search .search-form-category { 
   justify-content: flex-start; /* align input + button left */ 
   align-items: flex-end; /* keep input and button perfectly level */ 
}

/* Shared search input appearance */
#search-box {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #414546;
    font-size: 0.875rem;
    flex: 0 0 18.75rem;
    min-width: 0;
    padding: 0 0.75rem;
    box-sizing: border-box;
}
#search-box:focus {
    outline: none !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow);
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    color: #414546;
}

/* Shared search submit width */
.search-submit {
    width: 6.375rem;
    text-align: center;
}

/* Mobile adjustments */
@media (max-width: 768px) {

    .catfilters-row {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5625rem;
        margin-bottom: 2.1875rem;
    }
    .catdropdowncontainer,
    .catdropdowncontainer .search-form-category {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    .categoryselect,
    #search-box {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }
    .categoryselect {
        margin-bottom: 0.625rem;
    }
    .catdropdowncontainer .search-form-category {
        margin-top: 0;
    }
    #search-box {
        margin: 0;
        padding-left: 0.75rem;
    }
    .search-form-category {
        display: flex;
        align-items: stretch;
        gap: 0;
        justify-content: stretch;
    }
    button.search-submit.wp-element-button {
        margin-left: 0.3125rem;
        padding: 0 1.125rem;
        font-size: 0.9rem;
        white-space: nowrap;
        height: 2.8125rem;
    }
    body.search .search-form-main-wrapper {
        display: block;
    }
    form.wp-block-search.wp-block-search__button-outside .wp-block-search__inside-wrapper {
        display: flex !important;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        flex-wrap: nowrap;
        box-sizing: border-box;
    }
    form.wp-block-search.wp-block-search__button-outside .wp-block-search__input {
        flex: 1 1 auto;
        min-width: 0;
        height: 2.8125rem;
        background: #fff;
        color: #414546;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 0.875rem;
        padding: 0 0.75rem;
        box-sizing: border-box;
        -webkit-appearance: none;
    }
    form.wp-block-search.wp-block-search__button-outside .wp-block-search__button {
        flex: 0 0 auto;
        height: 2.8125rem;
        background: #e1e1e1;
        color: #333;
        border: 1px solid #cbcbcb;
        border-radius: 4px;
        font-size: 0.875rem;
        padding: 0 1.125rem;
        cursor: pointer;
        margin-left: 0.3125rem;
        white-space: nowrap;
    }
}

/* =========================================================
   SEARCH FORM SUBMIT BUTTONS (SEARCH.PHP & ARCHIVE LAYOUTS)
   Matches .wp-element-button colors and radius for consistency
   ========================================================= */

.search-form input[type="submit"],
.search-submit {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
	background-color: var(--brand-btn-primary);
    color: var(--brand-btn-on-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    border: none;
    height: 2.8125rem;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.search-form input[type="submit"]:hover,
.search-submit:hover {
    background-color: var(--brand-btn-primary-hover) !important;
	color: var(--brand-btn-on-primary);
}
.search-form input[type="submit"]:active,
.search-form input[type="submit"]:focus,
.search-submit:active,
.search-submit:focus {
    background-color: var(--brand-btn-primary-active) !important;
	color: var(--brand-btn-on-primary);
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important;
    outline: none !important;
}

/* =========================================================
   UNIFIED FILTER ROWS (AUTHOR, CATEGORY, TAG)
   Shared layout for archive on-page search results
   ========================================================= */

body.author .filters-row,
body.category .filters-row,
body.tag .filters-row, {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 81.25rem;
    margin: 0 auto 1.5rem auto;
    padding-top: 0.75rem;
}
.filter-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
}

/* =========================================================
   SEARCH RESULTS (AUTHOR, CATEGORY, TAG) 
   Shared message, and retry form
   ========================================================= */

.no-results-message {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}
.noresults-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
    margin-top: 0.5rem;
}
.author .noresults-form #search-box,
.category .noresults-form #search-box,
.tag .noresults-form #search-box, {
    width: 20rem !important;
    max-width: 100%;
    flex: 0 0 auto !important;
}
body.author.search .search-form-category #search-box,
body.category.search .search-form-category #search-box,
body.tag.search .search-form-category #search-box,{
    height: 2.8125rem !important; /* match global filter form control height */
    line-height: 2.8125rem !important;
}
.author .search-submit,
.category .search-submit,
.tag .search-submit,{
    height: 2.8125rem !important; /* match global form control height */
    line-height: 2.8125rem !important;
}

/* =========================================================
   SEARCH RESULTS LAYOUT (SEARCH.PHP)
   Layout and visual styling for search results listings and containers
   ========================================================= */

/* Search form layout */
.search-results .searchform > div {
    display: flex;
    align-items: center;
    gap: 0.625rem;
	margin-bottom: 2rem;
}
.search-results .searchform #s {
    margin-bottom: 0;
}
.search-results .searchform #searchsubmit {
    margin-top: 0;
}
/* Result link wrapper */
.searchlink {
    text-decoration: none;
}
/* Search results card layout */
.search-result {
    display: flex;
    border: 1px solid var(--brand-outline);       /* Box outline */
    background-color: var(--brand-card-bg);                   /* Background color */
    margin-bottom: 1.25rem;                       /* Spacing between results */
    padding: 0.625rem;                            /* Internal padding */
    border-radius: 4px;
	transition: transform var(--brand-card-transition-duration) var(--brand-card-transition-ease), box-shadow var(--brand-card-transition-duration) var(--brand-card-transition-ease);
    transform: translateZ(0);                     /* Prevent subpixel jitter on transform */
}
.search-result:hover {
    transform: translateY(var(--brand-card-lift-y));
    box-shadow: var(--brand-card-shadow-hover);
}
.search-result .post-thumbnail,
.search-result .post-details {
    background-color: #ffffff;                    /* White inner panel content */
}
.search-result .post-thumbnail {
    width: 20%;                                   /* 20% width for the thumbnail */
    display: flex;
    align-items: center;                          /* Center vertically */
    justify-content: center;                      /* Center horizontally */
    margin-right: 0.625rem;                      /* Space between image and content */
}
.search-result .post-details {
    width: 80%;                                   /* 80% width for post details */
	padding: 0.625rem;
}
.search-result img {
    max-width: 100%;                              /* Fit within container */
    height: auto;                                 /* Maintain aspect ratio */
}
.searchlink .entry-title {
    color: var(--brand-primary);
	margin-bottom: 0.3125rem;
}
.searchlink .entry-content,
.searchlink:hover .entry-content {
    color: var(--site-text);
}

/* =========================================================
   CATEGORY/ARCHIVE 4-ACROSS POST GRID
   Flexible 4-column layout aligned to 1300px main container
   ========================================================= */

.category-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.875rem;
    max-width: 81.25rem; /* 1300px */
    margin: 0 auto 1.875rem auto;
}

/* Override global a:hover underline/border for category grid cards only */
a.categorylink:hover {
    border-bottom: none;
}
.categorylink {
    flex: 0 0 calc(25% - 1.40625rem); /* four columns */
    text-decoration: none;
}
.category-result {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
    border: 1px solid var(--brand-outline);
    background-color: var(--brand-card-bg);
    padding: 0.625rem;
    border-radius: 4px;
    overflow: hidden;
    height: 20rem;
    transition: var(--brand-card-transition-duration) var(--brand-card-transition-ease), box-shadow var(--brand-card-transition-duration) var(--brand-card-transition-ease);
    transform: translateZ(0); /* prevents subpixel jitter on transform */
}
.category-result:hover {
    transform: translateY(var(--brand-card-lift-y));
    box-shadow: var(--brand-card-shadow-hover);
}

/* Ensures image never resizes or nudges on hover */
.category-result img {
    display: block;
    width: 100%;
    height: 15.625rem;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0.625rem;
    transition: none;
    backface-visibility: hidden; /* fixes subpixel rounding on transform */
}

.post-thumbnail > img {
    height: 12.5rem;
}

.entry-title {
    font-size: 1rem;
    line-height: 1.2;
    color: var(--brand-primary);
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    text-align: left;
    flex-shrink: 0;
}

/* =========================================================
   BLOG POST TEMPLATE (SINGLE.PHP)
   Styling for individual blog post layout and content elements
   ========================================================= */

h1.singleheader {
    text-align: center;
    font-size: 3.5rem;
    line-height: 1.1;
    margin-top: 1.625rem;
}
.preheaderholder {
    margin: auto;
    width: 81.25rem;
}
.preheader {
    background: var(--brand-box-background);
    padding: 3.125rem 0;
}
.preheader > h2 {
    text-align: center;
}
.preheader > h2 > a {
    text-decoration: none;
    color: var(--site-text);
}
.categories {
    text-align: center;
}
.categories > a {
    font-size: 1.6875rem;
}
.categories .blog-breadcrumb {
    color: var(--blog-breadcrumb);  /* Controls Color of Blog & Right Triangle in Breadcrumbs */
    font-weight: 700; 
}
.categories .blog-breadcrumb:hover {
    color: var(--blog-breadcrumb-hover);
    transition: color 0.3s ease;
    text-decoration: none;
    border-bottom: none;
}
.categories a:not(.blog-breadcrumb) {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: none;
}
.categories a:not(.blog-breadcrumb):hover {
    color: var(--brand-primary-hover);
    text-decoration: none;
    border-bottom: none;
}

/* Blog Footer Columns Styles */
.blogfooter {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 81.25rem;
    margin: auto;
}
.blogfooter-column {
    box-sizing: border-box;
    width: 25.8125rem;
    background-color: var(--brand-box-background);
    display: inline-block;
    border-radius: 4px;
    padding: 1.875rem;
}
.blogfooter-column .blog-footer-column h3 {
    font-size: 1.625rem;
    margin-bottom: 0.625rem;
    color: var(--site-text);
    font-weight: 700;
}

/* 1 Column */
.column-count-1 > div {
    width: 100%;
}

/* 2 Columns */
.column-count-2 > div {
    width: 50%;
}

/* 3 Columns */
.column-count-3 > div {
    width: 33.33%;
}

/* 4 Columns */
.column-count-4 > div {
    width: 25%;
}

/* =========================================================
   404.PHP
   Headline and Search Form Styles
   ========================================================= */

h5.try-again {
    font-size: 1.125rem;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-top: 1.25rem;
    padding: 0.625rem;
}
.error404 h1.php-template-headline {
    text-align: center;
    font-size: 2.25rem;
    line-height: 1.1;
    marging-top: 2rem;
	margin-bottom: 1rem;
}
.error404 .search-form {
    padding-bottom: 1.5625rem;
}
.error404 .special-search {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2.5rem auto 4rem;
}
.error404 .searchform > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
}
.error404 .search-form input[type="text"] {
    display: inline-block;
    width: 20rem;
    max-width: 80%;
    text-align: center;
    margin-bottom: 0;
}
.error404 .search-form input[type="submit"] {
    display: inline-block;
    margin-top: 0;
}

/* =========================================================
   FOOTER
   Styling for footer layout, typography, and link appearance across all pages
   ========================================================= */
   
.footer-row {
    margin-bottom: 0.9375rem;
}
footer {
    background: #000;
    padding: 0 0.9375rem;
}
.footerwidgetcontainer {
    max-width: 81.25rem;
    margin: 0 auto;
    background: black;
    padding: 0 0.9375rem;
}
.footer-widgets {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 3.75rem 0 1.25rem;
    box-sizing: border-box;
}
.footer-widgets > div {
    flex: 1 1 calc(25% - 1.875rem); /* four columns with breathing room */
    box-sizing: border-box;
    min-width: 15.625rem;
}
.footer-row p {
    color: var(--footer-text);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    padding-bottom: 0.9375rem;
    text-transform: uppercase;
}
.footer-row a {
    color: var(--footer-text);
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
}
.footer-row a:hover {
    color: var(--brand-link);
    text-decoration: none;
    transition: color 0.3s ease;
}

/* =========================================================
   COPYRIGHT CONTAINER
   ========================================================= */

.copyrightcontainer {
    background: #000;
}
.copyright-statement {
    padding-top: 1.25rem;
    padding-bottom: 3.75rem;
    max-width: 81.25rem;
    margin: auto;
}
.copyright-statement p {
    color: var(--copyright-text);
    margin: 0;
}

/* =========================================================
   ACCESSIBILITY: REDUCED MOTION 
   Respect user preference for reduced motion 
========================================================= */
   
@media (prefers-reduced-motion: reduce) {

    .mobile-menu-panel {
        transition: none;
    }
    .mobile-menu__toggle-button .mobile-menu__bar {
        transition: none;
    }
}

/* =========================================================
   ****** WPBAKERY BUTTON, ELEMENT, COLUMN & 2C SEPARATOR STYLES START HERE ******
   These styles exist to make a cohesive look and feel if demo data is imported.
   ========================================================= */   

/* ==== WPBAKERY FLAT ROUNDED BUTTON STYLES + "Classic Orange" OVERIDE TO BRAND COLORS ==== */

/* In on-page button settings, WPBakery’s COLOR dropdown uses fixed preset names/colors and does not support custom brand palettes.
   Out of the box, this theme maps the preset labeled "Classic Grey" (Default) to the theme’s current primary brand button colors
   (including hover + active/focus states) in the child theme, so selecting "Classic Grey" outputs the correct branded CTA button style that matches all of the other button types in the theme. Set the var colors in the Child Theme. */

/* Shared VC Flat Rounded Button Baseline (typography + shape) */
.vc_general.vc_btn3,
.vc_btn3.vc_btn3-color-default.vc_btn3-style-flat,
.vc_btn3.vc_btn3-color-default.vc_btn3-style-flat:hover,
.vc_btn3.vc_btn3-color-default.vc_btn3-style-flat:focus,
.vc_btn3.vc_btn3-color-default.vc_btn3-style-flat:active {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
    letter-spacing: 0.04em !important;
    font-weight: 500;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	border: none;
}
.vc_btn3.vc_btn3-shape-rounded {
    border-radius: 4px;
}

/* Brand color (normal) */
.vc_btn3.vc_btn3-color-default.vc_btn3-style-flat {
    background-color: var(--brand-btn-primary) !important;
    color: var(--brand-btn-on-primary) !important;
}

/* Brand color (hover) */
.vc_btn3.vc_btn3-color-default.vc_btn3-style-flat:hover {
    background-color: var(--brand-btn-primary-hover) !important;
    color: var(--brand-btn-on-primary) !important;
}

/* Brand color (active + focus) */
.vc_btn3.vc_btn3-color-default.vc_btn3-style-flat:active,
.vc_btn3.vc_btn3-color-default.vc_btn3-style-flat:focus,
.vc_btn3.vc_btn3-color-default.vc_btn3-style-flat:focus-visible {
    background-color: var(--brand-btn-primary-active) !important;
    color: var(--brand-btn-on-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important; /* Grey box-shadow */
}

/* High Converting Left-Aligned WPBakery CTA Button. */

.btn-with-headshot-left-2c { 
    position: relative;  /* Establishes a positioning context */
    overflow: visible;   /* Allows the pseudo-element to extend beyond the button */
    padding-left: 4.375rem;  /* Adjust as needed for the headshot width plus some spacing */
}

/* Pseudo-element that displays the headshot image */
.btn-with-headshot-left-2c::before {
    content: "";
    position: absolute;
    margin-left: 2.5625rem;
    top: 50%;                   /* Vertically center the headshot */
    left: -2.5rem;              /* Shift left by half the width (5rem / 2) */
    width: 5rem;
    height: 5rem;
    border-radius: 50%;         /* Make it a circle */
    background-image: url("/wp-content/uploads/2026/04/cta-button-headshot.jpg");
    background-size: cover;
    background-position: center;
    transform: translateY(-50%);
    border: 2px solid #fff;     /* Optional: white border around the headshot */
    z-index: 999;               /* Bring the headshot in front */
}

/* ==== WPBAKERY POST GRID / GRID BUILDER — EXCERPT LINE CLAMP + ELLIPSIS ==== */

.blog-post-excerpt p {
    display: -webkit-box;         /* Enables the webkit box layout model */
    -webkit-box-orient: vertical; /* Specifies the box's orientation */
    overflow: hidden;             /* Hides content outside the defined area */
    -webkit-line-clamp: 5;        /* Limits to 5 lines */
    text-overflow: ellipsis;      /* Adds ellipsis (...) for overflow */
}
.blog-post-excerpt {  
    font-size: 0.8125rem; /* On Blog Roll Post Media Grid - Slide In from Left Edited Grid*/
}
.vc_gitem-post-data-source-post_excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Number of lines to show on Basic Post Grid: Text First */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vc_tta-title-text { /* Tab Text on Tour Element */
    font-weight: bold;
}
   
/* ==== WPBAKERY HOVERBOX H2 TITLES - FRONT AND BACK ==== */

.vc-hoverbox-wrapper .vc-hoverbox-front-inner h2 {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--wpb-hoverbox-title);
}
.vc-hoverbox-wrapper .vc-hoverbox-back-inner h2 {
    font-size: 2rem;
    color: var(--wpb-hoverbox-title);
}

/* ==== WPBAKERY FAQ SECTION TITLE ==== */

.vc_toggle.vc_toggle_default .vc_toggle_title h4 {
    font-size: 1.25rem;
    color: var(--wpb-toggle-title);
}

/* ==== WPBAKERY VIDEO PLAYER TITLE ==== */

.wpb_wrapper h2.wpb_heading.wpb_video_heading {
    font-size: 2rem;
    color: var(--wpb-video-title);
}

/* ==== WPBAKERY & 2C SEPARATORS ==== */

/* WBP: Separator with Text */

.vc_separator.vc_separator-has-text h4 {
    font-size: 1.75rem;
    color: var(--brand-separator-text);	
}

/* 2C: Separator with Icon Badge - HTML Placed in WPB: Raw HTML Element. Font Awesome Plugin Required! */
.separator-with-icon {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.25rem auto; /* center the separator */
    width: 50%;        /* takes up 50% of the container's width */
}
.separator-with-icon::before,
.separator-with-icon::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--separator-icon-line);
}
.separator-with-icon::before {
    margin-right: 0.625rem;
}
.separator-with-icon::after {
    margin-left: 0.625rem;
}
.separator-with-icon i {
    font-size: 1.25rem; /* adjust size as needed */
    color: var(--separator-icon-color);     /* adjust color as needed */
    line-height: 1;
}
.icon-bg-circle { /* A 40x40 circular background behind the icon */
    background-color: var(--separator-icon-bg);  /* Shape color */
    color: var(--separator-icon-color);             /* Icon color */
    border-radius: 50%;      /* Makes the background a perfect circle */
    width: 2.5rem;           /* Set fixed width/height for consistent shape */
    height: 2.5rem;          /* Match width */
    display: inline-flex;    /* Use flex to center icon inside the background */
    align-items: center;
    justify-content: center;
    text-align: center;      /* Ensures icon is centered horizontally */
}

/* ==== WPBAKERY CARD STYLE WITH HOVER LIFT FOR WPB COLUMNS ==== */

/* Matches Theme Blog Category and Search Results Cards */

.card-lift { /* Apply to columns in the row */
    box-sizing: border-box;           /* Include padding in overall size */
    transition: transform 0.3s ease;  /* Smooth vertical transition */
    border: 1px solid var(--brand-outline);           /* Single outline around the whole div */
    background-color: #f9f9f9;
    padding: 0.625rem;                /* 10px inner padding */
    border-radius: 0.25rem;
    overflow: hidden;                 /* Prevent content from spilling out during hover */
    margin-left: 0.9375rem !important;
    margin-right: 0.9375rem !important;
    max-width: 25.1875rem;            /* Constrain to fit all on one row, incl margins */
}
.card-lift:hover { 
    transform: translateY(-0.625rem); /* Hover effect: move vertically only */
}

/* =========================================================
   PLUGIN: GRAVITY FORMS STYLES
   Use Orbital Theme under Settings. Buttons are Flat Style to match WPB buttons. Change to other styles as needed.
   ========================================================= */
   
/* --- Gravity Forms: Form Styles --- */

.gfield select {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    border: 1px solid var(--brand-outline) !important;
}
.ginput_product_price {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    color: var(--brand-primary) !important;
}
.gform_wrapper.gravity-theme select {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    border-radius: 0;
    background: #f7f7f7;
    font-size: 0.875rem;
}
h3.gsection_title {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    color: #414546;
    font-size: 1.25rem;
}
.gfield_label.gform-field-label,
.gform-field-label--type-inline {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    color: #414546;
    font-size: 1rem;
}
.gfield_required,
.gfield_required_text {
    font-family: Ubuntu;
    color: var(--brand-primary) !important;
}
.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield textarea:focus,
.gform_wrapper .gfield select:focus {
    outline: none !important; /* Remove outline if using inset shadow */
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow); /* Grey box-shadow */
}
.gf_progressbar_percentage {
    background-color: var(--brand-primary) !important;
}

/* --- Gravity Forms: Button Typography (Shared) --- */

.gform_next_button,
#gform_submit_button_2,
.gform_button,
.gform_previous_button {
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.25rem !important;
}

/* --- Gravity Forms: Primary Buttons (Next + Submit) --- */

.gform_next_button,
#gform_submit_button_2,
.gform_button {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}
.gform_next_button:hover,
#gform_submit_button_2:hover,
.gform_button:hover {
    background-color: var(--brand-btn-primary-hover) !important;
    color: #fff !important;
}
.gform_next_button:active,
#gform_submit_button_2:active,
.gform_button:active,
.gform_next_button:focus,
.gform_next_button:focus-visible,
#gform_submit_button_2:focus,
#gform_submit_button_2:focus-visible,
.gform_button:focus,
.gform_button:focus-visible {
    background-color: var(--brand-btn-primary-active) !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important; /* Grey box-shadow */
}

/* --- Gravity Forms: Previous Button (Secondary) --- */

.gform_previous_button {
    background-color: #fff !important;
    color: #414546 !important;
    border: 1px solid var(--brand-outline) !important;
}
.gform_previous_button:hover {
    background-color: #f2f2f2 !important;
    color: #414546 !important;
    border-color: var(--brand-outline) !important;
}
.gform_previous_button:active,
.gform_previous_button:focus,
.gform_previous_button:focus-visible {
    background-color: var(--brand-btn-primary-active) !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important; /* Grey box-shadow */
}

/* =========================================================
   RESPONSIVE: ≤1300px
   Footer Columns
   ========================================================= */

@media only screen and (max-width: 1300px) {

    .column-count-4 > div {
        flex: 0 0 calc(50% - 0.625rem);
        max-width: calc(50% - 0.625rem);
        min-width: 0;
    }
}

/* =========================================================
   RESPONSIVE: ≤1200px
   Secondary Menus
   ========================================================= */

@media (max-width: 1200px) {
	.secondarymenuleft,
	.secondarymenuright {
		display: none !important;
	}
}

/* =========================================================
   RESPONSIVE: ≤1199px
   Mobile Menu System
   ========================================================= */

/* ==== DEFAULT / GLOBAL STATES ==== */

.mobile-menu-container,
.mobile-menu__toggle-button {
    display: none;
}

.mobile-menu li.menu-item-has-children.is-open > .sub-menu {
    display: block;
}

/* Prevent background scroll when off-canvas menu is open */
body.menu-open {
    overflow: hidden;
    touch-action: none;
}

/* ==== MOBILE ACTIVATION (≤1199px) ==== */

@media (max-width: 1199px) {

    input,
    textarea,
    select {
        font-size: 1rem !important;
    }
	.menucontainer,
    .secondarymenucontainer,
    .topmenu,
    .rightmenu {
        display: none !important;
    }

    /* ==== MOBILE HEADER LAYOUT & HAMBURGER MENU TOGGLE ANIMATION ==== */

    .mobile-menu-container {
        display: block;
        position: relative;
        left: 0;
        width: 100%;
        background-color: var(--mobile-menucontainer-background);
        z-index: var(--z-header);
	    overflow-x: hidden;
        overflow-y: visible;
    }

    /* Admin bar + safe-area stacking (iOS notches + dynamic island) */
    body.admin-bar .mobile-menu-container {
        padding-top: env(safe-area-inset-top, 0);
    }

    /* Header row (logo + toggle) */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--mobile-menucontainer-background);
        padding: 0.652rem 0.75rem;
        overflow: visible;
    }

    /* Hamburger / close toggle */
    .mobile-menu__toggle-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3rem;
        height: 3rem;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--mobile-menu-hamberger);
        position: relative;
        padding: 0;
        overflow: visible;
    }
	
     /* Hamburger Toggle Animation */
    .mobile-menu__toggle-button .mobile-menu__bar {
        position: absolute;
        width: 2rem;
        height: 4px;
        background-color: currentColor;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }
    .mobile-menu__toggle-button .mobile-menu__bar:nth-child(1) {
        transform: translateY(-0.625rem);
    }
    .mobile-menu__toggle-button .mobile-menu__bar:nth-child(2) {
        transform: translateY(0);
    }
    .mobile-menu__toggle-button .mobile-menu__bar:nth-child(3) {
        transform: translateY(0.625rem);
    }
    body.menu-open .mobile-menu__toggle-button .mobile-menu__bar:nth-child(1) {
        transform: rotate(45deg);
    }
    body.menu-open .mobile-menu__toggle-button .mobile-menu__bar:nth-child(2) {
        opacity: 0;
    }
    body.menu-open .mobile-menu__toggle-button .mobile-menu__bar:nth-child(3) {
        transform: rotate(-45deg);
    }
}

/* ==== OFF-CANVAS MENU PANEL ==== */
/* Panel opens directly beneath fixed header. */

.mobile-menu-panel {
    position: fixed;
    top: calc(
        var(--wp-admin--admin-bar--height, 0)
        + env(safe-area-inset-top, 0)
        + 7rem
    );
    right: 0;
    left: auto;
    width: 35%;
    min-width: 22rem;
    height: calc(100vh - (
        var(--wp-admin--admin-bar--height, 0)
        + env(safe-area-inset-top, 0)
        + 7rem
    ));
    background: #ffffff;
    z-index: var(--z-offcanvas);
    transform: translate3d(100%, 0, 0);
    transition: transform 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    visibility: hidden;
    pointer-events: none;
}
body.menu-open .mobile-menu-panel {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
}
body.woocommerce-demo-store .mobile-menu-panel {
    top: calc(
        var(--wp-admin--admin-bar--height, 0)
        + env(safe-area-inset-top, 0)
        + 7rem
        + var(--notice-h)
    );
    height: calc(100vh - (
        var(--wp-admin--admin-bar--height, 0)
        + env(safe-area-inset-top, 0)
        + 7rem
        + var(--notice-h)
    ));
}

/* ==== MENU LIST RESET & LAYOUT ==== */

.mobile-menu,
.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-menu {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    row-gap: 0.75rem;
}

/* ==== TOP-LEVEL MENU ITEMS ==== */

.mobile-menu li.menu-item-has-children {
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}
.mobile-menu li.menu-item-has-children::after { /* Vertical divider applies ONLY to parent row */
    content: "";
    position: absolute;
    right: 2.25rem;
    top: 0.75rem;
    height: 2rem; /* limits divider to parent row height */
    width: 1px;
    background-color: var(--mobile-menu-divider);
}
.mobile-menu li.menu-item-has-children > a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.mobile-menu > li.menu-item {
    border-bottom: 1px solid #e6e6e6;
}
.mobile-menu li.menu-item > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    padding-block: .5rem;
    padding-inline: 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mobile-menu-links);
    text-decoration: none;
}
.mobile-menu li.menu-item > a:hover,
.mobile-menu li.menu-item-has-children .sub-menu li a:hover {
    color: var(--mobile-menu-links-hover);
    border-bottom: none;
}
.mobile-menu li.menu-item > a::after {
    content: "›";
    font-size: 1rem;
    color: var(--brand-primary);
}

/* ==== SUBMENU TOGGLE CONTROLS ==== */

.submenu-toggle {
    width: 2.25rem;
    height: 2.25rem;
    margin-left: 0.75rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.mobile-menu li.menu-item-has-children.is-open > .submenu-toggle {
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

/* ==== SUBMENUS ==== */

.mobile-menu li.menu-item-has-children .sub-menu {
    display: none;
    padding-left: 1rem;
    width: 100%;
}
.mobile-menu li.menu-item-has-children .sub-menu li a {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-left: 0.875rem;
    padding-right: 1rem;
    padding-block: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--mobile-menu-children-background);
    border-bottom: none; /* Remove divider from all submenu links */
    gap: 0.35rem;
}
.mobile-menu li.menu-item-has-children .sub-menu li a::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-primary);
}

/* Add divider ONLY to last submenu item */
.mobile-menu li.menu-item-has-children .sub-menu li:last-child a {
    border-bottom: 1px solid #e6e6e6;
    width: 100%;
}

/* ==== UTILITY HELPERS ==== */

.u-color-white {
    color: #ffffff;
}
.u-flex {
    display: flex;
    align-items: center;
}

/* Hide ONLY the block output in the utility bar on blog index */
body.home.blog .utilitybar form.wp-block-search,
body.home.blog .utilitybar .wp-block-group {
    display: none !important;
}

/* =========================================================
   RESPONSIVE: ≤1105px
   ========================================================= */

@media only screen and (max-width: 1105px) {
    .footerwidgetcontainer {
        width: 100%;
    }
    .column-count-2 > div {
        width: 50%;
    }
    .column-count-3 > div {
        width: 50%;
    }
    .column-count-4 > div {
        flex: 0 0 calc(50% - 0.625rem);
        width: calc(50% - 0.625rem);
        max-width: calc(50% - 0.625rem);
        min-width: 0;
    }
}

/* =========================================================
   RESPONSIVE: ADMIN BAR OVERRIDE ≤782px
   Taller admin bar on smaller screens (for testing only if logged in). Log out for testing the breakpoints below.
   ========================================================= */

@media (max-width: 782px) {

    body.admin-bar .mobile-menu-container {
        top: 2.875rem;
    }
    body.woocommerce-demo-store {
        padding-top: 0;
    }	
}

/* =========================================================
   RESPONSIVE: ≤767px
   WPBakery Mobile Styles 
   ========================================================= */

@media (max-width: 767px) {

	/* Add mobile gutters to main page content */
	main.centered > article,
	main.centered > .post-meta,
	body.archive main.centered,
	body.error404 main.centered,
	body.search main.centered,
	body.search-results main.centered {
		padding-left: 0.9375rem;
		padding-right: 0.9375rem;
	}

	/* Center single post title area on mobile */
	.preheaderholder {
		width: auto;
		max-width: 81.25rem;
		padding-left: 0.9375rem;
		padding-right: 0.9375rem;
		text-align: center;
	}

	/* Reverse stacking order for specific rows. Add this to any WPBakery row to reverse stacking on mobile. */
	.reverse-mobile-row {
		display: flex;
		flex-direction: column-reverse;
	}

	/* Adjust empty space height for WPBakery Empty Space Element */
	.vc_empty_space_32 {
		height: 2rem !important;
	}
}

/* =========================================================
   RESPONSIVE: UTILITY BAR ≤677px
   Centered stacked layout for narrow screens.
   ========================================================= */

@media only screen and (max-width: 677px) {

    .utilitybar {
        min-height: 4.375rem;
        overflow: hidden;
    }
    .utilitybar .container-topbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 0.75rem;
        height: 4.375rem;
        row-gap: 0.5rem;
        text-align: center;
        box-sizing: border-box;
    }
    .utilitybar .left,
    .utilitybar .right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .utilitybar .right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
        white-space: normal;
    }

}

/* =========================================================
   RESPONSIVE: ≤430px
   Scale Headlines, Stack Search Layout, Stack Search Results
   ========================================================= */

@media (max-width: 430px) {

	/* Scale main headings for narrow mobile screens */
	h1,
	h1.singleheader,
	.error404 .php-template-headline {
		font-size: 3rem;
		line-height: 1.05;
	}

	h2 {
		font-size: 2.5rem;
		line-height: 1.05;
	}

	/* Scale single post meta line on narrow mobile screens */
	.post-meta--below {
		font-size: 0.9rem;
		line-height: 1.4;
	}

	/* Center wrapped WPBakery separator heading text on narrow mobile screens */
	.vc_separator.vc_separator_align_center h4 {
		text-align: center;
	}

	/* Stack category results one per row on narrow mobile screens */
	.categorylink {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.category-result,
	.category-result img {
		width: 100%;
		max-width: 100%;
	}

	.category-result img {
		height: 15rem;
	}

	/* Stack search result cards vertically on narrow mobile screens */
	.search-result {
		flex-direction: column;
	}

	.search-result .post-thumbnail {
		width: 100%;
		margin-right: 0;
		margin-bottom: 0.625rem;
	}

	.search-result .post-details {
		width: 100%;
		box-sizing: border-box;
	}

	.search-result img {
		height: auto;
		max-width: 100%;
	}

	/* Stack category search form vertically on narrow mobile screens */
	.search-form-category {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
		width: 100%;
	}

	.search-form-category #search-box {
		width: 100%;
		max-width: 100%;
		margin: 0;
		flex: none;
		box-sizing: border-box;
	}

	/* Override inherited 768px button spacing on narrow mobile screens */
	.search-form-category .search-submit.wp-element-button {
		width: 100%;
		margin-left: 0;
		box-sizing: border-box;
	}

	/* Stack 404 search field and button on narrow mobile screens */
	.error404 .searchform > div {
		flex-direction: column;
		gap: 0.75rem;
	}

	.error404 .search-form input[type="text"],
	.error404 .search-form input[type="submit"] {
		width: 20rem;
		max-width: calc(100vw - 1.875rem);
		margin-top: 0;
	}
}

/* =========================================================
   WOOCOMMERCE ACCOUNT LINK AND MINI-CART IN UTILITY BAR
   Conditional from coding in header01.php, header02.php, header03.php.
   ========================================================= */
   
/* ==== STOP MINI-CART IN UTILITY BAR FROM REMOVING SCROLLBAR GUTTER WHEN CLICKED. ==== */

html {
    scrollbar-gutter: stable;
}

/* ==== UTILITY BAR ACCOUNT ICONS ==== */

.utilitybar .account-icon,
.utilitybar .login-icon,
.utilitybar .logout-icon {
    font-size: 0.875rem;
    padding-right: 0.125rem;
    padding-bottom: 0.3125rem !important;
    color: var(--utility-bar-woo-icons);
}

.utilitybar .right {
    display: flex;
    align-items: flex-end;
}

.utilitybar .wc-block-mini-cart__button {
    padding-top: 0;
    padding-bottom: 0;
}

/* =========================================================
   WOOCOMMERCE ELEMENTS & BUTTONS
   Buttons are styled to match WPB Flat buttons. If you use another style in WPB, change through the child theme.
   ========================================================= */

/* ==== WOOCOMMERCE > Account Details Page Button ==== */

.woocommerce-account main.centered > article > h1 {
	text-transform: capitalize;
}
.woocommerce-account button.woocommerce-Button.button,
.woocommerce-account .woocommerce-Button.button {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 4px !important;
    background-image: none !important;
}
.woocommerce-account button.woocommerce-Button.button:hover,
.woocommerce-account .woocommerce-Button.button:hover {
    background-color: var(--brand-btn-primary-hover) !important;
    color: #fff !important;
}
.woocommerce-account button.woocommerce-Button.button:active,
.woocommerce-account button.woocommerce-Button.button:focus,
.woocommerce-account button.woocommerce-Button.button:focus-visible,
.woocommerce-account .woocommerce-Button.button:active,
.woocommerce-account .woocommerce-Button.button:focus,
.woocommerce-account .woocommerce-Button.button:focus-visible {
    background-color: var(--brand-btn-primary-active) !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important;
}

/* ==== WOOCOMMERCE > Account > Order Details ==== */

.woocommerce-MyAccount-content h2 {    
    text-transform: capitalize;
}

/* ==== WOOCOMMERCE > Shop, Category, Cart Pages ==== */

/* ---- Cat Display Sorting Dropdown ---- */

.woocommerce-ordering select {
    border-radius: 4px !important;
    border: 1px solid var(--brand-outline);
    padding: .5rem 1rem;
    width: 100%;
    height: 100%;
    max-width: 24.5625rem;
    max-height: 3rem;
}

/* ---- Sale Badge Styling on Category Pages ---- */

.wc-block-cart .wc-block-components-product-sale-badge,
.wc-block-cart .wc-block-cart-items__product-onsale,
.wc-block-grid .wc-block-grid__product-onsale,
.onsale {
    background: var(--woo-sale-badge-bg) !important; 
    border: 3px solid var(--woo-sale-badge-border)!important;
    border-radius: 4px !important;
    color: var(--woo-sale-badge-text) !important;
    display: inline-block !important;
    font-size: 0.875em !important;
    font-weight: 600 !important;
    padding: .25em .75em;
    position: absolute;
    right: 0.25rem;
    text-align: center;
    text-transform: uppercase;
    top: 0.25rem;
    width: auto;
    z-index: 9;
}
.woocommerce span.onsale {
    min-height: unset; /* On Shop Page */
    min-width: unset;
    padding: .25em .75em;
    position: absolute;
    right: 0.25rem;
    font-size: 0.875em !important;
    font-weight: 600 !important;
    line-height: unset;
}

/* ---- Product Block Styles ---- */

.woocommerce ul.products li.product a:hover {
    border-bottom: none; /* Remove a (link) double underline on prod display box on Shop or Cats */
}
.wc-block-grid__product .wc-block-grid__product-link:hover {
    border-bottom: none; /* Remove a (link) double underline on prod display box on Empty Cart */
}
.wc-block-components-product-rating-stars__stars {
    color: var(--brand-stars);
}

/* ---- Product Box Buttons in WPBakery WooComm Product Display Elements (Best Sellers, etc) & on Empty Cart Prod Display ---- */

.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button {
    line-height: 0.75 !important; /* override inherited line-height */
}
.wp-block-button.wc-block-components-product-button .wp-block-button__link {
  font-size: 0.875rem !important;
}
a.button, a.wp-block-button__link, a.block-button__link {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    background-color: var(--brand-btn-primary) !important;
    color: var(--brand-btn-on-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border: none;
    border-radius: 4px !important;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
a.button:hover, a.wp-block-button__link:hover, a.block-button__link:hover {
    background-color: var(--brand-btn-primary-hover) !important;
    color: var(--brand-btn-on-primary) !important;
}
a.button:active, a.button:focus, a.wp-block-button__link:active, a.wp-block-button__link:focus, a.block-button__link:active, a.block-button__link:focus {
    background-color: var(--brand-btn-primary-active) !important;
    color: var(--brand-btn-on-primary) !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important;
}	

/* ---- Product Box Out of Stock Button  ---- */

li.product a.button.out-of-stock-button,
li.product a.button.product_type_simple.out-of-stock-button,
li.product a.wp-block-button__link.out-of-stock-button,
li.product .wp-element-button.out-of-stock-button {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    background-color: var(--brand-btn-gray) !important;
    color: var(--brand-btn-on-gray) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

li.product a.button.out-of-stock-button:hover,
li.product a.button.product_type_simple.out-of-stock-button:hover,
li.product a.wp-block-button__link.out-of-stock-button:hover,
li.product .wp-element-button.out-of-stock-button:hover {
    background-color: var(--brand-btn-gray-hover) !important;
    color: var(--brand-btn-on-gray) !important;
}

li.product a.button.out-of-stock-button:active,
li.product a.button.product_type_simple.out-of-stock-button:active,
li.product a.wp-block-button__link.out-of-stock-button:active,
li.product .wp-element-button.out-of-stock-button:active,
li.product a.button.out-of-stock-button:focus,
li.product a.button.product_type_simple.out-of-stock-button:focus,
li.product a.wp-block-button__link.out-of-stock-button:focus,
li.product .wp-element-button.out-of-stock-button:focus {
    background-color: var(--brand-btn-gray-active) !important;
    color: var(--brand-btn-on-gray) !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important;
}

/* ---- Cross Sells on Cart ---- */

.cross-sells-section {
    margin-top: 2.5rem;
    padding: 1.25rem;
    background: var(--woo-cross-sell-background);
    border: 1px solid var(--woo-cross-sell-border);
    border-radius: 8px;
    text-align: center;
}
.cross-sells-section h2 {
    font-size: 1.5rem;
    color: var(--woo-cross-sell-h2);
    margin-bottom: 1.25rem;
}
.woocommerce ul.products.cross-sells {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
}
a.wc-block-components-product-name:hover {
      border-bottom: none;
}

/* ---- Empty Cart Display on Cart Page ---- */

.wc-block-cart__empty-cart__title.with-empty-cart-icon::before { 
    visibility: hidden !important; /* Remove Font Awesome Sad Face */
    display: none !important;
}
.wp-block-separator.has-alpha-channel-opacity.is-style-dots {
    display: none !important; /* Remove dot dot dot */
    visibility: hidden !important;
}
h2.wp-block-heading { /* this conflicts with blog sidebar style. Fix this. */
    text-transform: capitalize;
}

/* ==== WOOCOMMERCE: Product Price Styles ==== */

.single-product .product-price p.price del,
.single-product .product-price p.price del .woocommerce-Price-amount,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price del,
.wc-block-grid__product-price del,
.wc-block-grid__product-price del .woocommerce-Price-amount {
    color: var(--woo-product-price-strikethrough) !important; /* Strike-through regular price on Shop, single-product.php, Empty Cart Display on Cart page. */
    font-weight: 500;
}
.single-product .product-price p.price ins,
.single-product .product-price p.price ins .woocommerce-Price-amount,
.woocommerce ul.products li.product .price ins,
.wc-block-grid__product-price ins,
.wc-block-grid__product-price ins .woocommerce-Price-amount,
.price > .woocommerce-Price-amount,
.price .woocommerce-Price-amount {
    color: var(--woo-product-price) !important; /* Sale price on Shop, single-product.php, Empty Cart Display on Cart page. */
    text-decoration: none !important;
    font-weight: 600;
}
.single-product .product-price { /* Prod Price on single-product.php */
    display: inline-flex;
    align-items: flex-end;
    gap: 0.75rem;
    font-size: 1.375rem;
    color: var(--brand-primary);
    font-weight: 700;
    margin-bottom: 0.9375rem;
}
.single-product .product-price .price {
    margin: 0;
}
.savings-badge { /* "You Save" Badge by Price on single-product.php */
    position: relative;
    top: -0.50rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    background-color: var(--woo-savings-badge-bg);
    color: var(--woo-savings-badge-text);
}
.wc-block-components-product-name {
    font-weight: 700!important; /* Prod Price on Cross-sells on Cart page. */
}

/* ==== WOOCOMMERCE > Single Product Pages: single-product.php ==== */

.single-product-container {
    max-width: 81.25rem;
    margin: auto;
    padding: 2.5rem 1.25rem;
}
.single-product-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: center;
}
.single-product-image {
    flex: 1;
    max-width: 31.25rem;
}
.single-product-details {
    flex: 1;
}
.payment-trust-row { /* Payment Trust Row under Add to Cart  */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.9375rem 0;
    font-size: 0.8125rem;
    color: #777777;
}
.payment-trust-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.payment-trust-icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.payment-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.payment-trust-icon svg,
.payment-trust-icon img {
    display: block;
    height: 1.25rem;
    width: auto;
    max-width: 3.25rem;
}
.payment-trust-icon svg path {
    fill: #777777 !important; 
    opacity: 0.85;
}
.product-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.625rem;
    margin-top: 2.6875rem !important;
}
.woocommerce .quantity .qty {
    width: 3.75rem;
    text-align: center;
}
.quantity input.qty:focus {
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important;
    border-color: #999 !important;
}
.quantity {
    padding-top: 1.875rem !important;
    padding-bottom: 1.875rem !important;
}
select[name="attribute_pa_size"] {
    border-radius: 4px !important; /* Attributes Drop-down */
    border: 1px solid var(--brand-outline) !important;
    padding: 0.5rem 0.625rem !important;
    margin: 0 0.625rem !important;
    font-size: 0.875rem !important;
    background-color: #fff !important;
    color: #333 !important;
    appearance: none !important; /* Removes default browser styling */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
}
select[name="attribute_pa_size"]:focus {
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important; /* Grey box-shadow */
    outline: none !important; /* Removes default outline */
}
.product-add-to-cart {
    margin-top: 1.25rem;
}
.alt {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    font-size: 0.875rem !important;
	font-weight: 500;
    background-color: var(--brand-btn-primary) !important; /* Add to Cart Button */
    color: var(--brand-btn-on-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em!important;
    border-radius: 4px !important;
	border: none !important;
	cursor: pointer !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.alt:hover {
    background-color: var(--brand-btn-primary-hover) !important;
    color: var(--brand-btn-on-primary) !important;
}
.alt:active, .alt:focus {
    background-color: var(--brand-btn-primary-active) !important;
    color: var(--brand-btn-on-primary) !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important; /* Grey box-shadow */
}
.stock {
    text-transform: uppercase; /* Stock Message */
    color: var(--brand-primary);
    font-weight: 500;
    font-size: 0.875rem;
    transition: color 0.4s ease; /* Smooth transition */
    border: 2px dotted transparent; /* Initially transparent */
    padding: 0.125rem 0.3125rem; /* Adds space between text and border */
}
.stock:hover {
    color: #666; /* Hover color */
    border: 2px dotted #666; /* Adds a dotted border on hover */
}
a.added_to_cart {
    margin-left: .5em; /* View Cart Text Link by Add to Cart Button */
    text-transform: capitalize;
}

/* ---- Product Image Gallery: Structured thumbs + fixed viewport + optional fade scroll ---- */

.single-product-wrapper .woocommerce-product-gallery.images .woocommerce-product-gallery__trigger {
    display: none !important;
}
.single-product-wrapper {
    align-items: flex-start;
    gap: 1.875rem !important;
}
:root{
    --wc-slide-w: 31.25rem;
    --wc-thumb-w: 6.25rem;
    --wc-thumb-gap: 0.9375rem;
    --wc-gallery-radius: 0.25rem;
    --wc-fade-h: 2rem;
}
.single-product-image {
    flex: 0 0 var(--wc-slide-w);
    max-width: var(--wc-slide-w);
}
.single-product-wrapper .woocommerce-product-gallery.images,
.single-product-wrapper .woocommerce-product-gallery.images * {
    box-sizing: border-box;
}
.single-product-wrapper .woocommerce-product-gallery.images {
    position: relative;
    display: block;
    margin-top: 2.875rem !important;
    width: var(--wc-slide-w);
    max-width: var(--wc-slide-w);
    height: var(--wc-slide-w);
    padding: 0 !important;
    margin-left: calc(var(--wc-thumb-w) + var(--wc-thumb-gap));
}

/* Main image finish (radius + remove bottom border) */
.single-product-wrapper .woocommerce-product-gallery.images .flex-viewport {
    border-bottom: 0 !important;
    border-radius: var(--wc-gallery-radius);
    overflow: hidden;
}
.single-product-wrapper .woocommerce-product-gallery.images .woocommerce-product-gallery__image,
.single-product-wrapper .woocommerce-product-gallery.images .woocommerce-product-gallery__image a,
.single-product-wrapper .woocommerce-product-gallery.images .woocommerce-product-gallery__image img {
    border-bottom: 0 !important;
    border-radius: var(--wc-gallery-radius);
}

/* Main image focus styling (prevents clipped default outline bar) */
.single-product-wrapper .woocommerce-product-gallery.images .woocommerce-product-gallery__image a:focus {
    outline: none;
}

.single-product-wrapper .woocommerce-product-gallery.images .woocommerce-product-gallery__image a:focus-visible {
    outline: 0.1875rem solid rgba(0, 95, 204, 0.9);
    outline-offset: 0.25rem;
}

/* Thumbnails column */
.single-product-wrapper .woocommerce-product-gallery.images .flex-control-thumbs {
    position: absolute;
    left: calc(-1 * (var(--wc-thumb-w) + var(--wc-thumb-gap)));
    top: 0;
    width: var(--wc-thumb-w);
    display: flex;
    flex-direction: column;
    gap: var(--wc-thumb-gap);
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    max-height: var(--wc-slide-w);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 10;
    -webkit-mask-image: none;
    mask-image: none;
}

.single-product-wrapper .woocommerce-product-gallery.images .flex-control-thumbs.has-overflow {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 var(--wc-fade-h),
        #000 calc(100% - var(--wc-fade-h)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 var(--wc-fade-h),
        #000 calc(100% - var(--wc-fade-h)),
        transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.single-product-wrapper .woocommerce-product-gallery.images .flex-control-thumbs::-webkit-scrollbar {
    display: none;
}

.single-product-wrapper .woocommerce-product-gallery.images .flex-control-thumbs li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Thumbnail base */
.single-product-wrapper .woocommerce-product-gallery.images .flex-control-thumbs img {
    display: block;
    width: 100% !important;
    height: auto !important;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: var(--wc-gallery-radius);
    width: var(--wc-thumb-w) !important;
    min-width: var(--wc-thumb-w) !important;
    max-width: var(--wc-thumb-w) !important;
    flex: 0 0 var(--wc-thumb-w) !important;
}

/* Keyboard focus ring for thumbnails (apply to LI so it is not clipped by masks/shadows) */
.single-product-wrapper .woocommerce-product-gallery.images .flex-control-thumbs li:focus {
    outline: none;
}
.single-product-wrapper .woocommerce-product-gallery.images .flex-control-thumbs li:focus-within {
    outline: 0.1875rem solid rgba(0, 95, 204, 0.9);
    outline-offset: 0.1875rem;
    border-radius: var(--wc-gallery-radius);
}

/* Remove inner focus styling from the IMG so the LI ring is the single source of truth */
.single-product-wrapper .woocommerce-product-gallery.images .flex-control-thumbs img[tabindex="0"]:focus,
.single-product-wrapper .woocommerce-product-gallery.images .flex-control-thumbs img[tabindex="0"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Mobile */
@media screen and (max-width: 48rem) {
    .single-product-wrapper .woocommerce-product-gallery.images {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        height: auto !important;
    }
    .single-product-wrapper .woocommerce-product-gallery.images .flex-control-thumbs {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        max-height: none;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .single-product-wrapper .woocommerce-product-gallery.images .flex-control-thumbs img {
        max-width: 5rem;
    }
    .single-product-wrapper .woocommerce-product-gallery.images .woocommerce-product-gallery__image {
        width: 100% !important;
        float: none !important;
    }
    .single-product-wrapper .woocommerce-product-gallery.images .flex-viewport {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ---- Product Tabs ---- */

.custom-product-tabs {
    margin-top: 2.5rem;
}
.custom-tab-buttons {
    display: flex;
    gap: 0.625rem;
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.625rem;
    margin-bottom: 1.25rem;
}
.custom-tab {
    background: #eee;
    border: none;
    padding: 0.75rem 1.125rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    transition: background 0.3s ease;
}
.custom-tab.active {
    background: var(--brand-primary);
    color: white;
}
.custom-tab-content {
    background: #fff;
    padding: 1.25rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.custom-tab-pane {
    display: none;
}
.custom-tab-pane.active {
    display: block;
}
.comment-form-comment {
    font-size: 1.25rem; /* Your Review Title on Reviews Tab */
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

/* ---- Reviews Tab > Reviews Form ---- */

.woocommerce #review_form #reply-title { /* LEAVE A REVIEW */
    display: block;
    text-transform: uppercase;
    font-size: 1.25rem;
	font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.875rem 0;
}
.woocommerce #review_form .comment-form-rating {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 0.625rem 0 1.125rem 0;
}
.woocommerce #review_form .comment-form-rating > label {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}
.woocommerce #review_form .comment-form-rating p.stars {
    margin: 0 !important;
    line-height: 1;
}
.woocommerce #review_form .comment-form-comment > label {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.6;
}
.comment-form-rating p.stars a { 
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 1.2em;         /* Star width */
    height: 1.2em;        /* Star height */
    line-height: 1.2em;
    font-size: 1.5625rem;      /* Star size */
    text-indent: -624.9375rem; /* Hide "1 of 5 stars" link text */
    white-space: nowrap;
    background: none !important;
    cursor: pointer;
    border-bottom: none !important;
    font-family: inherit !important; /* Prevent WooCommerce icon font from taking over */
    color: var(--brand-stars-empty) !important;  /* Empty star color */
}
.comment-form-rating p.stars a::before { /* Override default star pseudo-element sizing + font */
    content: "★" !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 1.2em !important;
    height: 1.2em !important;
    line-height: 1.2em !important;
    font-size: 1.5625rem !important;
    font-family: inherit !important; /* Prevent WooCommerce icon font */
    text-indent: 0 !important;
    color: inherit !important;
    display: inline-block !important;
}
.comment-form-rating p.stars a:hover,
.comment-form-rating p.stars a:focus,
.comment-form-rating p.stars a:active,
.comment-form-rating p.stars.selected a,
.comment-form-rating p.stars.selected a.active { /* Lock size so hover/active states cannot change dimensions */
    width: 1.2em !important;
    height: 1.2em !important;
    line-height: 1.2em !important;
    font-size: 1.5625rem !important;
}
.comment-form-rating p.stars a:hover,
.comment-form-rating p.stars a:focus {
    color: var(--brand-stars) !important;
}
.comment-form-rating p.stars.selected a,
.comment-form-rating p.stars.selected a.active {
    color: var(--brand-stars) !important;
}
.comment-form-rating p.stars.selected a.active ~ a {
    color: var(--brand-outline) !important; /* Keep later stars grey (fill only up to selection) */
}
textarea#comment {
    width: 100%;
    border-radius: 4px !important;
    border: 1px solid var(--brand-outline) !important;
    padding: 0.625rem;
    font-size: 1rem;
    resize: vertical;
    outline: none;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
textarea#comment:focus {
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important;
}
input[type="submit"].submit {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
	background-color: var(--brand-btn-primary) !important;
    color: var(--brand-btn-on-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    font-size: 0.875rem;
	font-weight: 500;
    border-radius: 4px !important;
	border: none !important;
    padding: 0.625rem 1.25rem !important;
    cursor: pointer !important;
	outline: none;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
input[type="submit"].submit:hover {
    background-color: var(--brand-btn-primary-hover) !important;
    color: var(--brand-btn-on-primary) !important;
}
input[type="submit"].submit:active,
input[type="submit"].submit:focus {
    background-color: var(--brand-btn-primary-active) !important;
    color: var(--brand-btn-on-primary) !important;
    outline: none;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important;
}
h2.woocommerce-Reviews-title { /* Reviews List */
    font-size: 1.25rem;
	font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}
.woocommerce #reviews #comments ol.commentlist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce #reviews #comments ol.commentlist li.review {
    margin: 0 0 1.125rem 0;
}
.woocommerce #reviews #comments ol.commentlist li.review.alt {
    background-color: transparent !important;
    color: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: inherit !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.woocommerce #reviews #comments ol.commentlist li.review .comment_container {
    position: relative;
    display: block;
    padding: 0;
}
.woocommerce #reviews #comments ol.commentlist li.review img.avatar {
    display: none !important;
}
.woocommerce #reviews #comments ol.commentlist li.review .comment-text {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0.625rem;
    align-items: start;
}
.woocommerce #reviews #comments ol.commentlist li.review .comment-text .star-rating {
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
    float: none !important;
    justify-self: start;
    align-self: start;
    color: var(--brand-stars) !important; /* filled stars */
}
.woocommerce #reviews #comments ol.commentlist li.review .comment-text .star-rating::before {
    color: var(--brand-stars-empty) !important; /* empty stars */
}
.woocommerce #reviews #comments ol.commentlist li.review .comment-text p.meta {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
}
.woocommerce #reviews #comments ol.commentlist li.review .comment-text .description {
    grid-column: 1 / -1;
    grid-row: 2;
}
.woocommerce #reviews #comments ol.commentlist li.review .comment-text .description p {
    margin: 0;
}

/* =========================================================
   STICKY ADD-TO-CART BAR
   Compact sticky bar for single product pages
   ========================================================= */

#twc-sticky-atc {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--twc-sticky-atc-bottom, env(safe-area-inset-bottom, 0));
    z-index: var(--twc-sticky-atc-z, 9999);
    background-color: #ffffff;
    color: #414546;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
#twc-sticky-atc.twc-sticky-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
#twc-sticky-atc .twc-sticky-inner {
    max-width: 81.25rem;           /* Match .centered */
    margin: 0 auto;
    padding: 0.25rem 1rem;         /* Slim vertical padding */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;       /* Center group on all viewports */
    gap: 0.75rem;                  /* Space between Qty, button, hint, arrow */
}

/* Quantity group: visually related, same height as Woo qty (2.8125rem ≈ 45px) */

#twc-sticky-atc .twc-qty-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
#twc-sticky-atc .twc-qty-decrease {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.8125rem; /* 45px */
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--brand-outline)
    background-color: #ffffff;
    color: #414546;
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1;
}
#twc-sticky-atc input[type="number"]#twc-sticky-qty {
    width: 3.75rem;
    height: 2.8125rem; /* match global input height */
    text-align: center;
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: #414546;
    background-color: #fff;
    border: 1px solid var(--brand-outline);
    border-radius: 4px;
    padding: 0 0.75rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 0 !important;
}
#twc-sticky-atc input[type="number"]#twc-sticky-qty:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 1px rgba(238, 77, 40, 0.3);
}

/* Add to Cart button: match brand "alt" style, scoped to sticky bar */

#twc-sticky-atc .button {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    height: 2.8125rem; /* 45px */
    line-height: 1;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    border: 0;
    background-color: var(--brand-primary);
    color: var(--brand-btn-on-primary);
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
    white-space: nowrap;
}
#twc-sticky-atc .button:hover,
#twc-sticky-atc .button:focus {
    background-color: var(--brand-btn-primary-hover);
    outline: none;
}
#twc-sticky-atc .button.processing {
    opacity: 0.6;
    pointer-events: none;
}

/* Hint + scroll-back pill */

#twc-sticky-atc .twc-sticky-hint {
    font-size: 0.75rem;
    color: var(--brand-primary);
    font-weight: 600;
    white-space: nowrap;
}
#twc-sticky-atc .twc-sticky-scroll {
    border-radius: 999px;
    border: 1px solid #000000;
    background-color: #ffffff;
    color: #000000;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    cursor: pointer;
}

/* Very small screens: tighten spacing so the group fits nicely */

@media (max-width: 480px) {
    #twc-sticky-atc .twc-sticky-inner {
        padding-inline: 0.5rem;
        gap: 0.5rem;
    }

    #twc-sticky-atc .twc-qty-decrease {
        min-width: 2.25rem;
    }

    #twc-sticky-atc input[type="number"]#twc-sticky-qty {
        width: 3.25rem;
    }

    #twc-sticky-atc .twc-sticky-hint {
        display: none; /* keep bar from feeling crowded on tiny screens */
    }
}

/* ==== WOOCOMMERCE > Account Login/Register Page ==== */

.woocommerce-account .woocommerce-form-login input:not([type="submit"]):not([type="checkbox"]),
.woocommerce-account .woocommerce-form-register input:not([type="submit"]):not([type="checkbox"]) {
    min-height: 2.8125rem;
    padding: 0 0.75rem !important;
    border: 1px solid var(--brand-outline) !important;
    border-radius: 4px;
}
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
    min-height: 2.8125rem;
    padding: 0 1.25rem !important;
}
.woocommerce-account .woocommerce-form__input-checkbox {
    accent-color: var(--brand-primary);
}
.woocommerce-account .woocommerce-form__input-checkbox:focus {
    outline: none !important;
    box-shadow: none !important;
}
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
}
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"] {
    margin: 0 !important;
    min-height: 0;
}
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme span {
    line-height: 1;
}

/* ==== WOOCOMMERCE > Cart & Checkout Pages ==== */

/* ---- CLASSIC CHECKOUT > Cart: Table Headings and Column Content ---- */

.woocommerce-cart .woocommerce-cart-form__contents .product-name,
.woocommerce-cart .woocommerce-cart-form__contents .product-price,
.woocommerce-cart .woocommerce-cart-form__contents .product-subtotal {
    font-size: 1rem;
    color: var(--site-text);
}
.woocommerce-cart .woocommerce-cart-form__contents td.product-price,
.woocommerce-cart .woocommerce-cart-form__contents td.product-subtotal {
    font-weight: 500;
}

/* ---- CLASSIC CHECKOUT > Cart: Add Coupon + Update Cart Row + Login + Update Address Buttons ---- */

.woocommerce-cart td.actions {
    padding: 1rem;
}
.woocommerce-cart td.actions .coupon {
    display: flex;
    align-items: stretch;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.woocommerce-cart td.actions .coupon .input-text {
    width: 16rem !important;
}
.woocommerce-cart td.actions .coupon .button,
.woocommerce-cart td.actions > .button[name="update_cart"],
.woocommerce-checkout .button:not(.alt),
.woocommerce-cart .woocommerce-shipping-calculator .button {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    background-color: var(--brand-btn-gray) !important;
    color: var(--brand-btn-on-gray) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer;
    min-height: 2.8125rem;
    padding: 0 1.25rem !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.woocommerce-cart td.actions .coupon .button:hover,
.woocommerce-cart td.actions > .button[name="update_cart"]:hover,
.woocommerce-checkout .button:not(.alt):hover,
.woocommerce-cart .woocommerce-shipping-calculator .button:hover {
    background-color: var(--brand-btn-gray-hover) !important;
    color: var(--brand-btn-on-gray) !important;
}
.woocommerce-cart td.actions .coupon .button:active,
.woocommerce-cart td.actions > .button[name="update_cart"]:active,
.woocommerce-checkout .button:not(.alt):active {
    background-color: var(--brand-btn-gray-active) !important;
    color: var(--brand-btn-on-gray) !important;
}
.woocommerce-cart td.actions .coupon .button:focus,
.woocommerce-cart td.actions > .button[name="update_cart"]:focus,
.woocommerce-checkout .button:not(.alt):focus,
.woocommerce-cart .woocommerce-shipping-calculator .button:focus {
    background-color: var(--brand-btn-gray-active) !important;
    color: var(--brand-btn-on-gray) !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important;
}
.woocommerce-cart td.actions > .button[name="update_cart"]:disabled,
.woocommerce-cart td.actions > .button[name="update_cart"][disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ---- CLASSIC CHECKOUT > Cart Table Headings and Column Content ---- */

.woocommerce-cart .woocommerce-cart-form__contents .product-name,
.woocommerce-cart .woocommerce-cart-form__contents .product-price,
.woocommerce-cart .woocommerce-cart-form__contents .product-subtotal {
    font-size: 1rem;
    color: var(--site-text);
}
.woocommerce-cart .woocommerce-cart-form__contents td.product-price,
.woocommerce-cart .woocommerce-cart-form__contents td.product-subtotal {
    font-weight: 500;
}

/* ---- CLASSIC CHECKOUT > Cart Totals ---- */

.woocommerce-cart .cart_totals h2 {
    text-transform: uppercase;
}

/* ---- CLASSIC CHECKOUT > Cart Checkout CTA ---- */

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 2.8125rem;
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    background-color: var(--brand-btn-primary) !important;
    color: var(--brand-btn-on-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0 1.25rem !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
    background-color: var(--brand-btn-primary-hover) !important;
    color: var(--brand-btn-on-primary) !important;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:active,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:focus {
    background-color: var(--brand-btn-primary-active) !important;
    color: var(--brand-btn-on-primary) !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important;
}

/* ---- CLASSIC CHECKOUT > Checkout H3 ---- */

.woocommerce .woocommerce-checkout h3 {
    text-transform: uppercase;
}

/* ---- CLASSIC CHECKOUT > Checkout Login Remember Me ---- */

.woocommerce-checkout .woocommerce-form-login .form-row .woocommerce-form__label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.woocommerce-checkout .woocommerce-form-login .form-row .woocommerce-form__label input[type="checkbox"] {
    margin: 0;
    position: relative;
    top: 1px;
}

/* ---- CLASSIC CHECKOUT > Checkout Form Fields ---- */

.woocommerce-checkout input:not([type="submit"]),
.woocommerce-checkout textarea,
.woocommerce-checkout select {
    border: 1px solid var(--brand-outline) !important;
    border-radius: 4px;
    min-height: 2.8125rem;
    padding: 0 0.75rem !important;
}
.woocommerce-checkout textarea {
    min-height: 8rem;
    padding: 0.75rem !important;
}
.select2-results__option--highlighted { /* State Dropdown*/
    background-color: #e0e0e6 !important;
    color: #000 !important;
}
.select2-container .select2-selection--single {
    height: 2.8125rem;
    border: 1px solid var(--brand-outline) !important;
    border-radius: 4px;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 2.8125rem;
    padding: 0 0.75rem !important;
} 
.select2-container .select2-selection--single .select2-selection__arrow {
    height: 2.8125rem;
}

/* ---- CLASSIC CHECKOUT > Shipping Methods ---- */

.woocommerce ul#shipping_method li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.woocommerce ul#shipping_method li input[type="radio"] {
    margin: 0;
	accent-color: var(--brand-primary);
}

/* ---- CLASSIC CART > Shipment Change Address ---- */

.woocommerce-cart .woocommerce-shipping-calculator input.input-text {
    min-height: 2.8125rem;
    padding: 0 0.75rem !important;
    border: 1px solid var(--brand-outline) !important;
    border-radius: 4px;
}

/* ---- CLASSIC CHECKOUT > Checkout Primary Action ---- */

.woocommerce-checkout #place_order,
.woocommerce-checkout .button.alt {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    background-color: var(--brand-btn-primary) !important;
    color: var(--brand-btn-on-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 4px !important;
    min-height: 2.8125rem;
    padding: 0.625rem 1.25rem !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout .button.alt:hover {
    background-color: var(--brand-btn-primary-hover) !important;
    color: var(--brand-btn-on-primary) !important;
}
.woocommerce-checkout #place_order:active,
.woocommerce-checkout #place_order:focus,
.woocommerce-checkout .button.alt:active,
.woocommerce-checkout .button.alt:focus {
    background-color: var(--brand-btn-primary-active) !important;
    color: var(--brand-btn-on-primary) !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important;
}

/* ---- CLASSIC CHECKOUT > Payment Method Background ---- */

.woocommerce-checkout #payment {
    background: #f2f2f4;
}
.woocommerce-checkout #payment div.payment_box::before {
    content: "";
    display: block;
    border: 1em solid #666666;
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
    position: absolute;
    top: -.75em;
    left: 0;
    margin: -1em 0 0 2em;
}
.woocommerce-checkout #payment div.payment_box {
    background-color: #666666;
    color: #ffffff;
}
.woocommerce-checkout #payment ul.payment_methods li {
    text-transform: capitalize;
	font-weight: 700;
}
.woocommerce-checkout #payment ul.payment_methods p {
    text-transform: none;
}

/* ---- BLOCK CART > Submit Button ---- */

body:not(.woocommerce-block-theme-has-button-styles) .wp-block-woocommerce-cart .wc-block-cart__submit-button:not(.is-link) {
    min-height: 3rem;
    padding: 0 1.25rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- BLOCK CHECKOUT > Login Link ---- */

.wp-block-woocommerce-checkout .wc-block-checkout__login-prompt {
    float: right;
    font-size: 1.50em !important;
    margin-top: -1.5rem;
    text-transform: capitalize;
}
.wc-block-checkout__login-prompt::after {
    content: "\00BB"; /* Unicode for arrow after Login Link*/
    font-size: 1.4375rem;
    color: var(--brand-primary);
    margin-left: 0.3125rem;
}

/* ---- BLOCK CHECKOUT > Section H2s ---- */

h2.wc-block-components-checkout-step__title {
    text-transform: capitalize;
}

/* ---- BLOCK CHECKOUT > Checkbox and Radio Labels & Order Summary Labels---- */

.wc-block-components-checkbox label,
.wc-block-components-radio-control__label,
.wc-block-components-address-card address .wc-block-components-address-card__address-section--primary {
    font-weight: 700 !important;
}

.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-text-input input[type="text"] {
	text-transform: capitalize;
}

/* ---- BLOCK CHECKOUT > Dropdown Borders ---- */

.wc-blocks-components-select .wc-blocks-components-select__select {
	border: 1px solid var(--brand-outline) !important;
}

/* ---- BLOCK CHECKOUT > Form Fields ---- */

.wp-block-woocommerce-checkout .wc-block-components-text-input input {
    min-height: 2.8125rem;
    padding: 1.25rem 0.75rem 0.25rem !important;
    border: 1px solid var(--brand-outline) !important;
    border-radius: 4px;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-blocks-components-select__label {
    font-size: 0.75rem;
	text-transform: capitalize;
    line-height: 1;
	overflow: visible;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input:not(.is-active) label {
    top: 56%;
    transform: translateY(-50%);
}
.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label,
.wp-block-woocommerce-checkout .wc-blocks-components-select__label {
    transform: none;
}
.wp-block-woocommerce-checkout .wc-blocks-components-select__select {
    padding-top: 1rem !important;
    padding-bottom: 0 !important;
}

/* ---- BLOCK CHECKOUT > Checkboxes & Radios ---- */

.wp-block-woocommerce-checkout .wc-block-components-checkbox__input,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__input {
    width: .6rem !important;
    height: 1.5rem !important;
    min-height: 1.5rem !important;
    margin: 0;
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox label,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==== WOOCOMMERCE: Notices ==== */
   
/* ---- CLASSIC CART & CHECKOUT ---- */

.woocommerce-message::before { /* Cart: Added to Cart Message, Cart Updated: Green*/
    color: var(--woo-notice-success) !important;
}
.woocommerce-message {  /* Cart: Added to Cart Message, Cart Updated */
    margin-top: 1.25rem !important;
    background-color: var(--woo-notice-bg);
    color: var(--woo-notice-text);
    border-top: none;
    outline: none !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important;
}
.woocommerce-info::before { /* Checkout: Info Notices Icon: Gray*/
    color: var(--woo-notice-info) !important;
}
.woocommerce-info { /* Checkout: Info Notices with Top Border: Gray */
    background-color: var(--woo-notice-bg) !important;
    border-color: var(--woo-notice-info);
    outline: none !important;
}
.woocommerce-error::before { /* Checkout: Error Notices Icon: Red*/
    color: var(--woo-notice-error) !important;
}
.woocommerce-error { /* Checkout: Error Notices with Top Border: Red*/
    background-color: var(--woo-notice-bg);
    color: var(--woo-notice-text);
    border-color: var(--woo-notice-error);
    outline: none !important;
}

/* ---- CLASSIC CHECKOUT > Checkbox & Radio Fix ---- */

/* Color */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
    accent-color: var(--brand-primary);
}

/* Remove input-style focus effects from checkboxes/radios */
.woocommerce-checkout input[type="checkbox"]:focus,
.woocommerce-checkout input[type="radio"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--brand-primary);
}

/* ---- BLOCK CHECKOUT > Returning Customer and Coupon Icons ---- */

.woocommerce-form-login-toggle .woocommerce-info::before { /* Icon: Returning Customer */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f007"; /* user */
    color: var(--brand-primary);
}
.woocommerce-form-coupon-toggle .woocommerce-info::before { /* Icon: Coupon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f02b"; /* tag / coupon */
    color: var(--brand-primary);
}

/* ---- BLOCK CHECKOUT > Banner Base ---- */

.wc-block-components-notice-banner {  /* --------------------------- */
    background-color: var(--woo-notice-bg) !important;
    color: var(--woo-notice-text) !important;
    outline: none !important;
}

/* ---- BLOCK CHECKOUT > Success Messages ---- */

.wc-block-components-notice-banner.is-success svg {
    fill: var(--woo-notice-success);
}
.wc-block-components-notice-banner.is-success { /* Successful Actions (e.g. coupon applied, login success, order updates in block flows) */
    background-color: var(--woo-notice-bg) !important;
    border-color: var(--woo-notice-success); /* Green */
    outline: none !important;
}

/* ---- BLOCK CHECKOUT > Informative Messages: Have Coupon, Returning Customer, etc ---- */

.wc-block-components-notice-banner.is-info svg {
    background-color: var(--woo-notice-info);
}
.wc-block-components-notice-banner.is-info, /* Block Checkout */
    background-color: var(--woo-notice-bg) !important;
    border-color: var(--woo-notice-info);
    outline: none !important;
}

/* ---- BLOCK CHECKOUT > Warning Messages ---- */

.wc-block-components-notice-banner.is-warning svg {
    background-color: var(--woo-notice-warning);
}
.wc-block-components-notice-banner.is-warning { /* Partial Issues, Constraints (e.g. limited shipping options, address, checkout conditions) */
    background-color: var(--woo-notice-bg) !important;
    border-color: var(--woo-notice-warning); /* Gold */
    outline: none !important;
}
.wc-block-components-shipping-rates-control__no-shipping-address-message::before { /* "No Shipping Address" message icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f06a";      /* exclamation-circle */
    font-size: 0.8125rem;       /* keep px for icons */
    color: var(--woo-notice-error); /* Red */
    margin-right: 0.3125rem;
}
.wc-block-components-shipping-rates-control__no-shipping-address-message {
    border-top: none;
    outline: none !important;
    box-shadow: 0 0 0.3125rem var(--brand-focus-shadow) !important;
    background-color: var(--woo-notice-bg) !important;
    color: var(--woo-notice-text) !important;
}

/* ---- BLOCK CHECKOUT > Error Messages ---- */

.wc-block-components-notice-banner.is-error svg {
    background-color: var(--woo-notice-error);
}
.wc-block-components-notice-banner.is-error { /* Form Validation Errors, Payment Errors */
    background-color: var(--woo-notice-bg) !important;
    border-color: var(--woo-notice-error); /* Red */
    outline: none !important;
}
.wc-block-components-validation-error {
  color: var(--woo-notice-error) !important; /* Red */
}