/* ------------------------------------------------------------ *\ 
	- Style Error Fix
\* ------------------------------------------------------------ */

html body { margin: 0 !important; padding: 0 !important; border: 0; max-width: 100%; width: 100%; height: auto; box-shadow: none; }
#error-page p, 
#error-page .wp-die-message { margin: 0; }

/* ------------------------------------------------------------ *\ 
	- Colors
\* ------------------------------------------------------------ */

:root {
	--c-header-main: #d91f1f;      /* Red  */
	--c-header-secondary: #f4f4f4; /* Gray White  */
	--c-header-tertiary: #4a4541;  /*  */
}

/* ------------------------------------------------------------ *\ 
	- Buttons
\* ------------------------------------------------------------ */

.btn-menu { width: 48px; height: 48px; border-radius: 2px; border: 1px solid #979797; position: relative; display: inline-block; vertical-align: top; text-decoration: none; cursor: pointer; }
.btn-menu > i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.btn-menu > * { pointer-events: none; }
.btn-menu > span { position: absolute; left: 14px; right: 14px; height: 2px; top: 50%; background-color: var(--c-header-main); margin-top: -1px; transition: background 0.4s; }
.btn-menu > span:before,
.btn-menu > span:after { content: ' '; position: absolute; left: 0; right: 0; top: 0; height: inherit; background-color: var(--c-header-main); transition: transform 0.4s, margin 0.4s; }
.btn-menu > span:before { margin-top: -6px; }
.btn-menu > span:after { margin-top: 6px; }

body.show-nav-main .btn-menu > span { background: transparent; }
body.show-nav-main .btn-menu > span:before,
body.show-nav-main .btn-menu > span:after { margin-top: 0; }
body.show-nav-main .btn-menu > span:before { transform: rotate(45deg); }
body.show-nav-main .btn-menu > span:after { transform: rotate(-45deg); }

/* ------------------------------------------------------------ *\ 
	- Icons
\* ------------------------------------------------------------ */

.ico-truck { display: inline-block; vertical-align: top; width: 24px; height: 18px; font-size: 0; line-height: 0; }
.ico-truck svg { width: inherit; height: inherit; display: block; }

.ico-access { display: inline-block; vertical-align: top; width: 18px; height: 18px; font-size: 0; line-height: 0; }
.ico-access svg { width: inherit; height: inherit; display: block; }

.ico-search { display: inline-block; vertical-align: top; width: 18px; height: 18px; font-size: 0; line-height: 0; }
.ico-search svg { width: inherit; height: inherit; display: block; }

.ico-utilities { display: inline-block; vertical-align: top; width: 13px; height: 12px; font-size: 0; line-height: 0; }
.ico-utilities svg { width: inherit; height: inherit; display: block; }

/* ------------------------------------------------------------ *\ 
	- Nav Utilities
\* ------------------------------------------------------------ */

.nav-utilities { margin-right: auto; }
.nav-utilities > ul { list-style: none; display: flex; flex-wrap: wrap; gap: 40px; }
.nav-utilities > ul > li { position: relative; font-size: 14px; line-height: 1.3846; font-weight: 600; }
.nav-utilities > ul > li:not(:last-child):before { content: ' '; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background-color: #857E78; }
.nav-utilities > ul > li:first-child > a { color: var(--c-header-main); }
.nav-utilities a { text-decoration: none; color: var(--c-header-tertiary); display: flex; align-items: center; gap: 7px; }

@media(hover) and (pointer: fine) {
	.nav-utilities a:hover { color: var(--c-header-main); }
}

/* ------------------------------------------------------------ *\ 
	- Nav Access V2
\* ------------------------------------------------------------ */

.nav-access-v2 > ul { list-style: none; display: flex; flex-wrap: wrap; gap: 24px; }
.nav-access-v2 > ul > li { position: relative; font-size: 14px; line-height: 1.3846; font-weight: 600; }
.nav-access-v2 a { text-decoration: none; color: var(--c-header-tertiary); display: flex; align-items: center; gap: 8px; white-space: nowrap; }

@media(hover) and (pointer: fine) {
	.nav-access-v2 a:hover { color: var(--c-header-main); }
}

/* ------------------------------------------------------------ *\ 
	- Nav V2
\* ------------------------------------------------------------ */

.nav-v2 > ul { list-style: none; display: flex; flex-wrap: wrap; gap: 45px; }
.nav-v2 > ul > li { font-family: "Nunito Sans", "Nunito", sans-serif; position: relative; }
.nav-v2 > ul > li > a { font-size: 15px; letter-spacing: 0.6px; line-height: 1.3571; text-transform: uppercase; text-decoration: none; display: flex; align-items: center; gap: 7px; color: #4A4541; transition: color 0.4s; }
.nav-v2 > ul > li.menu-item-has-children > a:before { content: ' '; position: absolute; left: 0; right: 0; top: 100%; height: 30px; display: none; }
.nav-v2 > ul > li.menu-item-has-children > a:after { content: ' '; width: 6px; height: 6px; border-left: 2px solid var(--c-header-main); border-top: 2px solid var(--c-header-main); transform: rotate(-135deg); margin-top: -2px; transition: margin 0.4s, transform 0.4s; }
.nav-v2 > ul > li > ul { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 23px); padding: 30px 32px; border: 1px solid #eeeeee; background: white; list-style: none; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; min-width: 250px; }
.nav-v2 > ul > li > ul:before { content: ' '; width: 10px; height: 10px; position: absolute; left: calc(50% - 5px); top: -5px; opacity: 1; background: white; border-left: 1px solid #eeeeee; border-top: 1px solid #eeeeee; z-index: 2; transform: rotate(45deg); }
.nav-v2 > ul > li > ul:after { content: ' '; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: #fff; z-index: 1; box-shadow: 0 2px 10px 0 rgba(0,0,0,0.09); }
.nav-v2 > ul > li > ul > * { position: relative; z-index: 3; }
.nav-v2 > ul > li > ul ul { list-style: none; }
.nav-v2 > ul > li > ul li { font-size: 15px; letter-spacing: -0.22px; font-family: "Nunito Sans", "Nunito", sans-serif; font-weight: 500; }
.nav-v2 > ul > li > ul li:not(:last-child) { margin-bottom: 8px; }
.nav-v2 > ul > li > ul a { color: #666; transition: color 0.4s; }

.nav-v2 > ul > li.nav__menu-type-one > ul { display: flex; padding: 14px; left: 0; transform: none; min-width: 942px; }
.nav-v2 > ul > li.nav__menu-type-one > ul:before { left: 20px; }
.nav-v2 > ul > li.nav__menu-type-one > ul > li { width: 25%; position: relative; box-sizing: border-box; }
.nav-v2 > ul > li.nav__menu-type-one > ul > li > a { font-weight: 700; margin-bottom: 12px; display: inline-block; vertical-align: top; font-size: 15px; }
.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(1),
.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(2) { padding: 18px 0; width: calc(50% - 98px); }
.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(2) { padding-left: 32px; }
.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(2):before { content: ' '; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background-color: #EFEFEF; }
.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(1) { padding-left: 18px; padding-right: 18px; }
.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(2) { padding-right: 18px; }
.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(4) { width: 196px; }
/*.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(3) a { display: block; font-size: 0; line-height: 0; text-decoration: none; position: relative; margin: 0; }*/
.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(3) img { display: block; width: 100%; height: auto; }
/*.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(3) span { position: absolute; left: 10px; right: 10px; bottom: 10px; background-color: var(--c-header-main); color: white; font-size: 13px; line-height: 1.6154; text-transform: uppercase; font-weight: 600; font-family: "Nunito Sans", "Nunito", sans-serif; border-radius: 4px; border: 2px solid var(--c-header-main); padding: 9px 10px; text-align: center; transition: background 0.4s, color 0.4s; }*/

.nav-v2 > ul > li.not_a_link > a { pointer-events: none; }

.nav-v2 h4 { padding: 0; text-transform: none; font-size: 15px; display: inline-block; vertical-align: top; font-weight: bold; margin-bottom: 12px; color: #4A4541; font-family: "Nunito Sans", "Nunito", sans-serif; letter-spacing: -0.22px; }
li:has(> ul.sub-menu) > span { padding: 0; text-transform: none; font-size: 15px; display: inline-block; vertical-align: top; font-weight: bold; margin-bottom: 12px; color: #4A4541; font-family: "Nunito Sans", "Nunito", sans-serif; letter-spacing: -0.22px; }
.nav-v2 > ul > li.nav__menu-type-two > ul { display: flex; min-width: 708px; }
.nav-v2 > ul > li.nav__menu-type-two > ul > li { width: calc(100% - 245px); box-sizing: border-box; margin: 0; }
.nav-v2 > ul > li.nav__menu-type-two > ul > li > a { font-weight: 700; font-size: 15px; line-height: 1.40; margin-bottom: 9px; display: block; }
.nav-v2 > ul > li.nav__menu-type-two > ul > li.menu-item-has-children > a:before { display: none; }
.nav-v2 > ul > li.nav__menu-type-two > ul > li:first-child { position: relative; padding-right: 33px; width: 245px; }
.nav-v2 > ul > li.nav__menu-type-two > ul > li:first-child:before { content: ' '; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background-color: #efefef; }
.nav-v2 > ul > li.nav__menu-type-two > ul > li:first-child ~ li { padding-left: 30px; display: none; }
.nav-v2 > ul > li.nav__menu-type-two > ul > li:first-child ~ li.active { display: block; }
.nav-v2 > ul > li.nav__menu-type-two > ul > li:first-child ~ li a { display: flex; align-items: center; gap: 16px; }
.nav-v2 > ul > li.nav__menu-type-two > ul > li:first-child ~ li img { width: 54px; height: auto; min-width: 54px; max-width: 54px; }
.nav-v2 > ul > li.nav__menu-type-two > ul > li:first-child ~ li li:not(:last-child) { margin-bottom: 20px; }
.nav-v2 > ul > li.nav__menu-type-two > ul li.menu-item-has-children > a { display: block; position: relative; }
.nav-v2 > ul > li.nav__menu-type-two > ul li.menu-item-has-children > a:before { content: ' '; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-left: 1px solid #666; border-top: 1px solid #666; margin-top: -4px; transform: rotate(135deg); }

.nav-v2 > ul > li.nav__menu-type-three > ul { display: flex; flex-wrap: wrap; padding: 14px; min-width: 481px; }
.nav-v2 > ul > li.nav__menu-type-three > ul > li { width: 50%; padding: 18px; position: relative; box-sizing: border-box; flex-grow: 1; }
.nav-v2 > ul > li.nav__menu-type-three > ul > li > a { display: block; font-weight: 700; font-size: 15px; line-height: 1.4; margin-bottom: 11px; }
.nav-v2 > ul > li.nav__menu-type-three > ul > li:not(:last-child):before { content: ' '; position: absolute; right: 0; top: 18px; bottom: 18px; width: 1px; background-color: #efefef; }

.nav-v2 button { position: absolute; left: -4000px; opacity: 0; visibility: hidden; }

@media(hover) and (pointer: fine) {
	.nav-v2 > ul > li:hover > a,
	.nav-v2 > ul > li > ul li:hover > a { text-decoration: none; color: var(--c-header-main); }
	.nav-v2 > ul > li.menu-item-has-children:hover > a:before { display: block; }
	.nav-v2 > ul > li.menu-item-has-children:hover > a:after { transform: rotate(45deg); margin-top: 3px; }
	.nav-v2 > ul > li.menu-item-has-children:hover > ul { opacity: 1; visibility: visible; }
	.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(3) a:hover span { background-color: #fff; color: var(--c-header-main); }
	.nav-v2 > ul > li.nav__menu-type-two > ul > li:first-child ~ li ul a:hover { text-decoration: underline; }
}

/* ------------------------------------------------------------ *\ 
	- Nav Mobile
\* ------------------------------------------------------------ */

.nav-mobile { width: auto; margin: 0 -26px; padding: 26px; box-sizing: border-box; background-color: #f4f4f4; }
.nav-mobile ul { list-style: none; }
.nav-mobile li { font-size: 14px; line-height: 1.1538; font-weight: 400; }
.nav-mobile li:not(:last-child) { margin-bottom: 17px; }
.nav-mobile a { text-decoration: none; color: #4A4541; }

/* ------------------------------------------------------------ *\ 
	- Form Search
\* ------------------------------------------------------------ */

.form-search { width: 255px; position: relative; margin-right: 48px; }
.form-search input { width: 100%; border: #ddd; border-radius: 23px; background-color: #fff; box-shadow: inset 0 0 6px 0 rgba(0,0,0,0.03); height: 40px; padding: 0 20px 0 42px; font-size: 14px; color: var(--c-header-tertiary); transition: border 0.4s, color 0.4s; }
.form-search input:focus { border-color: var(--c-header-main); }
.form-search button { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; z-index: 10; border: 0; background: none; }

@media(hover) and (pointer: fine) {
	.form-search button:hover { opacity: 0.75; }
}

/* ------------------------------------------------------------ *\ 
	- Header V2
\* ------------------------------------------------------------ */

.header-v2 { width: 100%; position: relative; z-index: 9999; font-family: 'Nunito', sans-serif; font-weight: 400; }
.header-v2 a,
.header-v2 button { transition: color 0.4s, background 0.4s, opacity 0.4s; }
.header-v2 .shell { max-width: 1440px; box-sizing: border-box; padding: 0 26px; min-width: 0; }

.header-v2 .header__bar { background-color: var(--c-header-main); color: #fff; width: 100%; padding: 10px 0; }
.header-v2 .header__bar p { font-size: 16px; line-height: 1.375; font-weight: 600; margin: 0; }
.header-v2 .header__bar .shell { font-size: 16px; line-height: 1.375; font-weight: 600; display: flex; align-items: center; justify-content: center; min-height: 25px; gap: 24px; }
.header-v2 .header__bar + .header__bar { border-top: 1px solid white; }

.header-v2 .header__bar--countdown .shell { font-weight: 400; }
.header-v2 .header__bar--countdown p { font-weight: 400; gap: 20px; }
.header-v2 .header__bar--countdown p + p { position: relative; padding-left: 20px; }
.header-v2 .header__bar--countdown p + p:before { content: ' '; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background-color: #fff; }

.header-v2 .header__utilities { max-width: 100%; background-color: var(--c-header-secondary); padding: 11px 0; }
.header-v2 .header__utilities .shell { display: flex; align-items: center; }

.header-v2 .header__main { background-color: #fff; padding: 24px 0; width: 100%; position: relative; border-bottom: 1px solid #E9E9E9; }
.header-v2 .header__main .shell { display: flex; align-items: center; }

.header-v2 .header__main__mobile { display: none; }

.header-v2 .header__main-logo { width: 100px; min-width: 100px; }
.header-v2 .header__main-logo a { font-size: 0; line-height: 0; display: block; text-decoration: none; }
.header-v2 .header__main-logo img { display: block; width: 100%; height: 57px; object-fit: contain; object-position: left center; }
.header-v2 .header__main-nav { width: calc(100% - 100px - 162px); padding: 0 20px 0 48px; }

.header-v2 .header__main-nav-mobile { display: none; }
.header-v2 .header__main-nav-mobile .menu { width: auto; margin: 0 -26px; padding: 26px; box-sizing: border-box; background-color: #f4f4f4; }
.header-v2 .header__main-nav-mobile .menu ul { list-style: none; display: block; }
.header-v2 .header__main-nav-mobile .menu li { font-size: 14px; line-height: 1.1538; font-weight: 400; }
.header-v2 .header__main-nav-mobile .menu li:not(:last-child) { margin-bottom: 17px; }
.header-v2 .header__main-nav-mobile .menu a { text-decoration: none; color: #4A4541; }

.header-v2 .header__main-action { width: 162px; min-width: 162px; }
.header-v2 .header__main-action a { display: block; font-size: 14px; line-height: 1.3571; padding: 12px 24px; border: 2px solid var(--c-header-main); border-radius: 4px; text-decoration: none; color: var(--c-header-main); transition: color 0.4s, background 0.4s; font-family: "Nunito Sans", "Nunito", sans-serif; font-weight: 700; white-space: nowrap; text-align: center; }
.header-v2 + .shell { padding: 0 26px; box-sizing: border-box; max-width: 1133px; min-width: 0; }
.header-v2 + .shell .shell { max-width: 100%; min-width: 0; }

body.fixed-header .header-v2 .header__main { position: fixed; left: 0; right: 0; top: 0; }
body.fixed-header .header-v2 + * { margin-top: 105px; }
body.fixed-header.admin-bar .header-v2 .header__main { top: 32px; }

@media(hover) and (pointer: fine) {
	.header-v2 .header__main-action a:hover { background-color: var(--c-header-main); color: #fff; }
	.header-v2 .header__main-logo a:hover { opacity: 0.75; }
}

/* ------------------------------------------------------------ *\ 
	- Footer V2
\* ------------------------------------------------------------ */

.footer-v2 { width: 100%; }
.footer-v2 .shell { padding-left: 26px; padding-right: 26px; max-width: 1440px; box-sizing: border-box; min-width: 0; }
.footer-v2 .footer__bar { width: 100%; background-color: var(--c-header-main); padding: 50px 0; color: white; }
.footer-v2 .footer__bar .shell { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 48px; }
.footer-v2 .footer__bar-title h6 { text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.10; }

.footer-v2 .footer__bar-socials ul { list-style: none; display: flex; align-items: center; gap: 16px; font-size: 0; line-height: 0; }
.footer-v2 .footer__bar-socials li { margin: 0;}
.footer-v2 .footer__bar-socials a { display: block; width: 60px; height: 60px; position: relative; transition: background 0.4s; text-decoration: none; }
.footer-v2 .footer__bar-socials a:before { content: ' '; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 1px solid white; opacity: 0.5; }
.footer-v2 .footer__bar-socials svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.footer-v2 .footer__bar-socials path { fill: white; transition: fill 0.4s; }

.footer-v2 .footer__bar-logos { font-size: 0; line-height: 0; }
.footer-v2 .footer__bar-logos:not(:first-child) { margin-left: 48px; position: relative; }
.footer-v2 .footer__bar-logos:not(:first-child):before { content: ' '; position: absolute; left: -48px; top: 0; bottom: 0; width: 1px; background-color: #eee; opacity: 0.5; }
.footer-v2 .footer__bar-logos ul { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; min-height: 60px; align-items: center; }
.footer-v2 .footer__bar-logos li { margin: 0; }
.footer-v2 .footer__bar-logos a { display: block; text-decoration: none; transition: opacity 0.4s; }
.footer-v2 .footer__bar-logos img { display: block; width: auto; height: 37px; }

.footer-v2 .footer__widgets { width: 100%; background-color: #efefef; padding: 70px 0; }
.footer-v2 .footer__widgets .shell { display: flex; flex-wrap: wrap; }
.footer-v2 .footer__widgets-logo { width: 224px; }
.footer-v2 .footer__widgets-logo > a { display: block; font-size: 0; line-height: 0; width: 100%; max-width: 100px; transition: opacity 0.4s; }
.footer-v2 .footer__widgets-logo > a img { display: block; width: 100%; height: auto; }
.footer-v2 .footer__widgets-logo blockquote { margin: 24px 0; font-family: 'Playfair Display', serif; font-size: 20px; line-height: 1.60; color: var(--c-header-main); font-style: italic; letter-spacing: 0.02em; }
.footer-v2 .footer__widgets-nav { width: calc(100% - 224px); padding-left: 86px; box-sizing: border-box; position: relative; overflow: hidden; }
.footer-v2 .footer__widgets-nav > ul { list-style: none; display: flex; flex-wrap: wrap; position: relative; margin: -48px -40px; }
.footer-v2 .footer__widgets-nav > ul > li { padding: 48px 40px; position: relative; min-height: 100%; box-sizing: border-box; flex-grow: 1; border-bottom: 1px solid #A3A3A3; }
.footer-v2 .footer__widgets-nav > ul > li:not(:last-child):before { content: ' '; position: absolute; right: 0; top: 48px; bottom: 38px; width: 1px; background-color: #A3A3A3; opacity: 0.5; }
.footer-v2 .footer__widgets-nav h6.widget__title { border: 0; padding: 0; margin: 0 0 20px 0; text-transform: uppercase; font-family: "Nunito Sans", "Nunito", sans-serif; font-weight: 700; color: #353535; letter-spacing: 1px; }
.footer-v2 .footer__widgets-nav h6.widget__title ~ h6.widget__title { margin-top: 49px; }
.footer-v2 .footer__widgets-nav li.widget--nav > div > ul { list-style: none; }
.footer-v2 .footer__widgets-nav li.widget--nav > div > ul > li { font-size: 14px; letter-spacing: -0.2px; line-height: 1.6923; font-family: "Nunito Sans", "Nunito", sans-serif; font-weight: 400; padding: 0; margin: 0; }
.footer-v2 .footer__widgets-nav li.widget--nav > div > ul > li:not(:last-child) { margin-bottom: 3px; }
.footer-v2 .footer__widgets-nav li.widget--nav > div > ul > li.widget__nav-strong { font-weight: 700; }
.footer-v2 .footer__widgets-nav li.widget--nav > div > ul > li.widget__nav-title > a { pointer-events: none; border: 0; padding: 0; margin: 0 0 20px 0; text-transform: uppercase; font-family: "Nunito Sans", "Nunito", sans-serif; font-weight: 700; color: #353535; letter-spacing: 1px; display: block; vertical-align: top; }
.footer-v2 .footer__widgets-nav li.widget--nav > div > ul > li.widget__nav-title > a { font-size: 16px; line-height: 1.25; }
.footer-v2 .footer__widgets-nav li.widget--nav > div > ul > li.widget__nav-title:not(:first-child) { margin-top: 49px; }
.footer-v2 .footer__widgets-nav li.widget--nav > div > ul > li:not(:first-child).widget__nav-strong { margin-top: 24px; }
.footer-v2 .footer__widgets-nav li.widget--nav > div > ul a { color: #353535; text-decoration: none; transition: color 0.4s; }
.footer-v2 .footer__widgets-nav li.widget--nav > div > ul a[href^="tel"] { font-weight: 700; }

.footer-v2 .footer__copyright { padding: 50px 0; background-color: #f6f6f6; }
.footer-v2 .footer__copyright .shell { display: flex; flex-wrap: wrap; align-items: center; } 
.footer-v2 .footer__copyright-logos { margin-right: auto; font-size: 0; line-height: 0}
.footer-v2 .footer__copyright-logos ul { list-style: none; display: flex; align-items: center; gap: 50px; }
.footer-v2 .footer__copyright-logos a { text-decoration: none; display: block; max-width: 136px; transition: opacity 0.4s; }
.footer-v2 .footer__copyright-logos img { display: block; width: auto; max-height: 40px; }

.footer-v2 .footer__copyright-content { text-align: right; font-size: 14px; line-height: 1.33; color: #7E7E7E; font-family: 'Nunito Sans', "Nunito", sans-serif; font-weight: 400; }

@media(hover) and (pointer: fine) {
	.footer-v2 .footer__bar-socials a:hover { background-color: white; }
	.footer-v2 .footer__bar-socials a:hover path { fill: var(--c-header-main); }
	.footer-v2 .footer__bar-logos a:hover,
	.footer-v2 .footer__copyright-logos a:hover,
	.footer-v2 .footer__widgets-logo > a:hover { opacity: 0.8; }
	.footer-v2 .footer__widgets-nav li.widget--nav > div > ul a:hover { color: var(--c-header-main); }
}

@media (max-width: 1100px) {
	.form-search { margin-right: 28px; }

	.nav-v2 > ul { gap: 18px; }
}

@media (max-width: 985px) {
	.ico-truck { width: 19px; height: 14px; }

	.form-search { width: calc(100% - 44px); box-sizing: border-box; margin: 0 22px; }

	.nav-v2 { padding: 0 22px; }
	.nav-v2 > ul { flex-direction: column; gap: 0; }
	.nav-v2 > ul > li { width: 100%; position: relative; transition: padding 0.4s; }
	.nav-v2 > ul > li:after { content: ' '; position: absolute; left: -48px; right: -48px; top: 0; bottom: 0; background-color: #F6F6F6; opacity: 0; transition: opacity 0.4s, visibility 0.4s; pointer-events: none; visibility: hidden; }
	.nav-v2 > ul > li > * { position: relative; z-index: 10; }
	.nav-v2 > ul > li > a { padding: 16px 0; font-size: 15px; }
	.nav-v2 > ul > li:not(:last-child):before { content: ' '; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background-color: #D8D8D8; }
	.nav-v2 > ul > li.menu-item-has-children > a:after { margin-left: auto; }
	.nav-v2 > ul > li > ul { position: relative; overflow: hidden; left: 0; top: 0; right: 0; transform: none; border: 0; padding: 0; max-height: 0; background: none; }
	.nav-v2 > ul > li > ul:before,
	.nav-v2 > ul > li > ul:after { display: none; }
	
	.nav-v2 > ul > li.nav__menu-type-one > ul { flex-direction: column; gap: 30px; min-width: 0; padding: 0; }
	.nav-v2 > ul > li.nav__menu-type-one > ul:before,
	.nav-v2 > ul > li.nav__menu-type-one > ul:after,
	.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(2):before { display: none; }
	.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(1), 
	.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(2) { width: 100%; padding: 0; }
	.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(3) { display: none; }

	.nav-v2 > ul > li.nav__menu-type-two > ul { flex-direction: column; min-width: 0; }
	.nav-v2 > ul > li.nav__menu-type-two > ul > li { width: 100%; }
	.nav-v2 > ul > li.nav__menu-type-two > ul > li:first-child { padding-right: 0; width: 100%; }
	.nav-v2 > ul > li.nav__menu-type-two > ul > li:first-child:before { display: none; }
	.nav-v2 > ul > li.nav__menu-type-two > ul > li:first-child ~ li { padding-left: 0; margin-top: 30px; }
	.nav-v2 > ul > li.nav__menu-type-two > ul > li:first-child ~ li img { display: none; }
	.nav-v2 > ul > li.nav__menu-type-two > ul > li:first-child ~ li li:not(:last-child) { margin-bottom: 6px; }
	.nav-v2 > ul > li.nav__menu-type-two > ul li.menu-item-has-children > a:before { display: none; }

	.nav-v2 > ul > li.nav__menu-type-three > ul { min-width: 0; padding: 0; flex-direction: column; }
	.nav-v2 > ul > li.nav__menu-type-three > ul > li { width: 100%; padding: 0; }
	.nav-v2 > ul > li.nav__menu-type-three > ul > li ~ li { margin-top: 30px; }
	.nav-v2 > ul > li.nav__menu-type-three > ul > li:not(:last-child):before { display: none; }

	.nav-v2 > ul > li.hover { padding: 17px 0 33px 0; }
	.nav-v2 > ul > li.hover > ul { opacity: 1; visibility: visible; max-height: 9999px; }
	.nav-v2 > ul > li.hover:after { opacity: 1;  visibility: visible; }
	.nav-v2 > ul > li.hover > a:after { transform: rotate(45deg); }

	.nav-v2 button { position: absolute !important; left: auto; right: -21px; top: 0; opacity: 1; visibility: visible; z-index: 20 !important; width: 50px; height: 50px; border: 0; background: none; cursor: pointer; }

	.nav-mobile > ul { padding: 0 22px; }

	.header-v2 .header__main-nav-mobile,
	.header-v2 .header__main__mobile { display: block; }
	.header-v2 .nav-utilities,
	.header-v2 .nav-access-v2 { display: none; }
	
	.header-v2 .header__main { position: fixed; left: 0; right: 0; top: var(--header-height); bottom: 0; background-color: white; padding: 26px; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
	.header-v2 .header__main { opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; }
	.header-v2 .header__main .shell { flex-direction: column; gap: 32px 0; padding: 0; width: 100%; }
	.header-v2 .header__main .shell > * { width: 100%; }
	.header-v2 .header__main-logo { display: none; }
	.header-v2 .header__main-nav { width: 100%; padding: 0; }
	.header-v2 .header__main-action { min-width: 0; padding: 0 22px; }
	.header-v2 .header__main-action a { margin: 0 22px; }

	.header-v2 .header__utilities { position: relative; z-index: 9; }

	.header-v2 .header__main__mobile { padding: 26px 0; width: 100%; position: relative; z-index: 10; background-color: white; }
	.header-v2 .header__main__mobile .shell { display: flex; align-items: center; }
	.header-v2 .header__main__mobile-logo { width: 121px; }
	.header-v2 .header__main__mobile-logo a { display: block; font-size: 0; line-height: 0; }
	.header-v2 .header__main__mobile-logo img { display: block; width: 100%; height: auto; }
	.header-v2 .header__main__mobile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; width: calc(100% - 121px); gap: 12px 16px; }
	.header-v2 .header__main__mobile-actions p { text-align: right; font-size: 13px; line-height: 1.2308; font-weight: 700; color: var(--c-header-main); width: 100%; }
	.header-v2 .header__main__mobile-actions p a { text-decoration: none; }

	.header-v2 .header__bar { padding: 8px 0; position: relative; z-index: 10; }
	.header-v2 .header__bar p { font-size: 14px; }
	.header-v2 .header__bar .shell { gap: 8px; min-height: 18px; font-size: 12px; }

	.header-v2 + .shell .content,
	.header-v2 + .shell .sidebar { float: none; width: 100%; box-sizing: border-box; max-width: 100%; }

	body.show-nav-main .header-v2 { position: fixed; left: 0; right: 0; top: 0; }
	body.show-nav-main .header-v2 .header__main { opacity: 1; visibility: visible; }

	body.fixed-header .header-v2 .header__main { bottom: 0; top: var(--header-height); }

	body:not(.show-nav-main).fixed-header .header-v2 + * { margin-top: 130px; }
	body:not(.show-nav-main).fixed-header .header-v2 .header__main__mobile { position: fixed; left: 0; right: 0; top: 0; z-index: 100; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
}

@media (max-width: 767px) {
	.header-v2 .header__bar .shell { flex-wrap: wrap; text-align: center; }
	.header-v2 .header__bar--countdown p { font-size: 14px; }
	.header-v2 .header__bar--countdown p:first-child { width: 100%; }
	.header-v2 .header__bar--countdown p + p { padding-left: 0; }
	.header-v2 .header__bar--countdown p + p:before { display: none; }

	.footer-v2 .shell { padding-left: 32px; padding-right: 32px; }
	.footer-v2 .footer__widgets { padding: 48px 0; }
	.footer-v2 .footer__widgets .shell { flex-direction: column; gap: 0; }
	
	.footer-v2 .footer__widgets-logo { width: 100%; text-align: center; margin-bottom: 50px; }
	.footer-v2 .footer__widgets-logo > a { margin-left: auto; margin-right: auto; }
	.footer-v2 .footer__widgets-logo blockquote { margin-bottom: 0; }

	.footer-v2 .footer__widgets-nav { width: 100%; padding-left: 0; }
	.footer-v2 .footer__widgets-nav > ul { flex-direction: column; padding: 0; margin: 0; }
	.footer-v2 .footer__widgets-nav > ul > li { padding: 0; }
	.footer-v2 .footer__widgets-nav > ul > li:not(:last-child):before { display: none; }
	.footer-v2 .footer__widgets-nav > ul > li:not(:last-child) > div { opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s, padding 0.4s, grid-template-rows 0.4s; display: grid;
    grid-template-rows: 0fr; }
    .footer-v2 .footer__widgets-nav > ul > li:not(:last-child) > div > * { width: 100%; position: relative; overflow: hidden; }
	.footer-v2 .footer__widgets-nav > ul > li:last-child { border: 0; }
	.footer-v2 .footer__widgets-nav > ul > li:last-child > div > ul > li { display: none; }
	.footer-v2 .footer__widgets-nav > ul > li:last-child > div > ul > li.widget__nav-title,
	.footer-v2 .footer__widgets-nav > ul > li:last-child > div > ul > li.widget__nav-title ~ li { display: block; }
	.footer-v2 .footer__widgets-nav > ul > li:last-child > div > ul > li.widget__nav-title:not(:first-child) { margin-top: 0; padding-top: 15px; border-top: 1px solid #A3A3A3; }
	.footer-v2 .footer__widgets-nav > ul > li.active:last-child > div > ul > li { display: block; }
	.footer-v2 .footer__widgets-nav > ul > li.active:last-child > div > ul > li.widget__nav-title:not(:first-child) { margin-top: 10px; }
	.footer-v2 .footer__widgets-nav > ul > li.active:not(:last-child) > div { opacity: 1; visibility: visible; padding-bottom: 20px; grid-template-rows: 1fr; }
	.footer-v2 .footer__widgets-nav > ul > li.active h6.widget__title:before { transform: rotate(45deg); }
	.footer-v2 .footer__widgets-nav h6.widget__title { margin: 0; padding: 15px 30px 15px 0; position: relative; cursor: pointer; font-size: 16px; line-height: 1.10; }
	.footer-v2 .footer__widgets-nav h6.widget__title:before { content: ' '; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; border-left: 1px solid #353535; border-top: 1px solid #353535; transform: rotate(-135deg); margin-top: -5px; transition: transform 0.4s, margin 0.4s; }

	.footer-v2 .footer__bar { padding: 40px 0; }
	.footer-v2 .footer__bar .shell { flex-direction: column; gap: 0; padding-left: 26px; padding-right: 26px; }
	.footer-v2 .footer__bar .shell > *:not(:last-child) { margin-bottom: 32px; }
	.footer-v2 .footer__bar-logos:not(:first-child) { margin-left: 0; }
	.footer-v2 .footer__bar-logos:not(:first-child):before { display: none; }
	.footer-v2 .footer__bar-socials a { width: 50px; height: 50px; }
	.footer-v2 .footer__bar-socials ul { flex-wrap: wrap; justify-content: center; }

	.footer-v2 .footer__copyright { padding: 26px 0; }
	.footer-v2 .footer__copyright .shell { flex-direction: column-reverse; }
	.footer-v2 .footer__copyright-logos ul { flex-wrap: wrap; gap: 19px 30px; justify-content: center; }
	.footer-v2 .footer__copyright-content { text-align: center; margin-bottom: 20px; }

	.article-main { flex-direction: column; }
	.article-main .article__body { width: 100%; padding-left: 0; padding-top: 20px; }
}

@media (max-width: 374px) {
	.form-search { width: 100%; }
	.form-search,
	.header-v2 .header__main-action a { margin: 0; }

	.nav-v2,
	.nav-mobile > ul { padding: 0; }

	.header-v2 .header__bar { font-size: 12px; }
}
.nav-v2>ul>li.nav__menu-type-one>ul>li:nth-child(1){
    padding: 18px 0;
    width: calc(30% - 59px)
}

.nav-v2>ul>li.nav__menu-type-one>ul>li:nth-child(2) {
    padding: 18px 0;
    width: 27%
}

.nav-v2>ul>li.nav__menu-type-one>ul>li:nth-child(2) {
    padding-left: 32px
}

.nav-v2>ul>li.nav__menu-type-one>ul>li:nth-child(2):before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background-color: #efefef
}

.nav-v2>ul>li.nav__menu-type-one>ul>li:nth-child(3):before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background-color: #efefef
}

.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(3) {
	padding: 18px 18px 32px 32px;
	
}
.nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(4) img {
	display: block;
  width: 100%;
  height: auto;
  border: #d91f1f 2px solid;
}

.nav-v2>ul>li.nav__menu-type-one>ul>li:nth-child(1) {
    padding-left: 18px;
    padding-right: 18px
}

.nav-v2>ul>li.nav__menu-type-one>ul>li:nth-child(2) {
    padding-right: 18px
}

.nav-v2>ul>li.nav__menu-type-one>ul>li:nth-child(4) {
    width: 196px
}

.nav-v2>ul>li.nav__menu-type-one>ul>li:nth-child(4) a {
    display: block;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    position: relative;
    margin: 0
}

.nav-v2>ul>li.nav__menu-type-one>ul>li:nth-child(4) img {
    display: block;
    width: 100%;
    height: auto;
	border: #d91f1f 2px solid;
}

.nav-v2>ul>li.nav__menu-type-one>ul>li:nth-child(4) span {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-color: var(--c-header-main);
    color: #fff;
    font-size: 13px;
    line-height: 1.6154;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
    border-radius: 4px;
    border: 2px solid var(--c-header-main);
    padding: 9px 10px;
    text-align: center;
    transition: background .4s,color .4s
}

/* ------------------------------------------------------------ *\ 
	- Andrew Headings
\* ------------------------------------------------------------ */

.post-blog .post__head h1 { font-weight: bold; }
.post-blog .post__entry h2 { font-size: 24px; line-height: 36px; color: #555; font-weight: bold; }
.post-blog .post__entry h3 { font-size: 20px; line-height: 30px; color: #C53731; font-weight: bold; text-transform:none; }
.post-blog .post__entry p+ul, .post-blog .post__entry p+ol { margin-top: 0px; }
.article-main .article__body-title h2 { font-size: 24px; line-height: 36px; font-weight: bold; }

/* ------------------------------------------------------------ *\ 
	- Andrew Fixes
\* ------------------------------------------------------------ */
.post-blog .post__entry li a { color: #d41c1d; }
.post-blog .post__entry p { font-size: 18px; line-height: 1.5; }
.post-blog .post__entry table { margin-bottom: 25px; }
.post-blog .post__entry li { font-size: 18px; line-height: 1.5; }

/* ============================================
   MOBILE NAV — UTILITY LINKS SECTION
   (Contractor Program, Cabinet Financing, Account)
   Appears at the bottom of mobile/tablet nav only
   ============================================ */

.header-mobile .nav-mobile {
  display: block !important;
}

.nav-mobile {
  width: auto;
  margin: 0px -26px 0;
  padding: 24px 26px 0;
  box-sizing: border-box;
  background-color: transparent;
  border-top: 1px solid #e8e5e2;
}

.nav-mobile__label {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #706b66;
  margin: 0 0 16px 0;
}

.header-v2 .header__main-nav-mobile .menu {
  width: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: transparent;
  list-style: none;
}

.nav-mobile ul {
  list-style: none;
}

.header-v2 .header__main-nav-mobile .menu li:not(:last-child) {
  margin-bottom: 10px;
}

.header-v2 .header__main-nav-mobile .menu li {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
}

.header-v2 .header__main-nav-mobile .menu a {
  text-decoration: none;
  color: #4a4541;
}

.header-v2 a,
.header-v2 button {
  transition: color 0.4s, background 0.4s, opacity 0.4s;
}

/* ===========================================
   KCK BLOG COMPONENTS
   Lead Time Cards + Callout Boxes
   Add to blog CSS file
   =========================================== */
 
 
/* ===== CALLOUT BOXES ===== */
 
.kck-tip {
  background-color: #fdf2f2;
  border: 1px solid #f0d4d4;
  border-left: 4px solid #d81f1f;
  border-radius: 0 8px 8px 0;
  padding: 22px 24px;
  margin: 28px 0;
}
 
.kck-tip p {
  font-family: 'Nunito', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #444444 !important;
  margin: 0 !important;
  padding: 0 !important;
}
 
.kck-tip p strong {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #d81f1f !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  display: inline;
}
 
/* Warning variant */
.kck-tip.kck-tip--warning {
  background-color: #fef8ee;
  border-color: #f0ddb8;
  border-left-color: #d89520;
}
 
.kck-tip.kck-tip--warning p strong {
  color: #b07a10 !important;
}
 
 
/* ===== LEAD TIME COMPARISON CARDS ===== */
 
.kck-lead-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin: 24px 0 28px !important;
  padding: 0 !important;
}
 
.kck-lead-card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 20px 24px;
  background: #ffffff;
}
 
.kck-lead-card--rta {
  border-left: 4px solid #2e8b57;
}
 
.kck-lead-card--assembled {
  border-left: 4px solid #4a7fbf;
}
 
.kck-lead-card--custom {
  border-left: 4px solid #9b6b9e;
}
 
.kck-lead-card--quick {
  border-left: 4px solid #d81f1f;
}
 
.kck-lead-card--standard {
  border-left: 4px solid #4a7fbf;
}

/* ===== GENERIC CARD VARIANTS ===== */
/* Use these for any article, any context */

/* Positive / Pros / Advantages / Good-for */
.kck-lead-card--pro {
  border-left: 4px solid #2e8b57;
}

/* Caution / Cons / Trade-offs / Watch-out */
.kck-lead-card--con {
  border-left: 4px solid #c4880d;
}

/* Neutral / Informational / Reference */
.kck-lead-card--info {
  border-left: 4px solid #544F4A;
}

/* Warning / Avoid / Danger */
.kck-lead-card--avoid {
  border-left: 4px solid #d81f1f;
}
 
/* Card heading */
.kck-lead-card h4 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #333333 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
 
/* Data rows */
.kck-lead-card-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 7px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #f0f0f0;
}
 
.kck-lead-card-row:last-of-type {
  border-bottom: none;
}
 
.kck-lead-card-label {
  font-family: 'Nunito', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #999999 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  flex-shrink: 0 !important;
  margin-right: 16px !important;
  line-height: 1.4 !important;
}
 
.kck-lead-card-value {
  font-family: 'Nunito', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #333333 !important;
  text-align: right !important;
  line-height: 1.4 !important;
}
 
/* Total row (highlighted) */
.kck-lead-card-total {
  background-color: #f8f8f8 !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
  margin-top: 10px !important;
  border-bottom: none !important;
}
 
.kck-lead-card-total .kck-lead-card-label {
  color: #333333 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}
 
.kck-lead-card-total .kck-lead-card-value {
  color: #d81f1f !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
 
/* Best for line */
.kck-lead-card-detail {
  font-family: 'Nunito', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #666666 !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
}
 
.kck-lead-card-detail strong {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #333333 !important;
}
 
/* Mobile */
@media (max-width: 600px) {
  .kck-lead-card {
    padding: 16px 18px;
  }
 
  .kck-lead-card h4 {
    font-size: 15px !important;
  }
 
  .kck-lead-card-label {
    font-size: 11px !important;
  }
 
  .kck-lead-card-value {
    font-size: 14px !important;
  }
 
  .kck-lead-card-total .kck-lead-card-value {
    font-size: 15px !important;
  }
 
  .kck-tip {
    padding: 18px 18px;
  }
 
  .kck-tip p {
    font-size: 14px !important;
  }
}

@media (max-width: 600px) {
  .kck-lead-card {
    padding: 16px 18px;
  }

  .kck-lead-card h4 {
    font-size: 16px;
  }

  .kck-lead-card-row {
    font-size: 14px;
  }

  .kck-lead-card-total .kck-lead-card-value {
    font-size: 15px;
  }
}

/* ============================================
   MOBILE NAV — EXPANDED SUBMENU HIERARCHY
   ============================================
   Aligns mobile submenu styling with desktop
   conventions (title case headings, consistent
   fonts) while fixing visual bugs introduced
   by inherited desktop styles.
   ============================================ */

@media (max-width: 985px) {

  /* Remove the gray background pseudo-element that stretches
     beyond the nav container edges on expanded items.
     The theme adds a -48px left/right inset #f6f6f6 overlay
     that creates an unwanted "card" effect on mobile. */
  .nav-v2 > ul > li.hover:after {
    display: none;
  }

  /* Collapsed submenu state
     Reset padding to 0 so collapsed items don't create phantom space */
  .nav-v2 > ul > li > ul {
    padding: 0;
    background-color: #ffffff;
  }

  /* Expanded submenu state
     When parent item has .hover class (added on tap),
     reveal the submenu with proper spacing and visibility */
  .nav-v2 > ul > li.hover > ul {
    max-height: none;
    opacity: 1;
    visibility: visible;
    padding: 16px 0 20px 16px;
    background-color: #ffffff;
    gap: 24px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  /* Remove the expanded state padding animation on parent items
     The theme adds 17px top / 33px bottom padding when expanded,
     creating phantom space above and below submenus */
  .nav-v2 > ul > li.menu-item-has-children.hover,
  .nav-v2 > ul > li.nav__menu-type-one.hover,
  .nav-v2 > ul > li.nav__menu-type-two.hover,
  .nav-v2 > ul > li.nav__menu-type-three.hover {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Submenu section headings
     e.g. "Kitchen Cabinets", "Bathroom Cabinets", "Popular Styles"
     Title case matches desktop convention; bold weight and
     color differentiate from individual links below */
  .nav-v2 li:has(> ul.sub-menu) > span {
    font-family: "Nunito", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.22px;
    text-transform: none;
    color: #4a4541;
    margin-bottom: 12px;
  }

  /* Individual submenu links
     e.g. "Assembled", "Ready to Assemble", "Frameless" */
  .nav-v2 > ul > li > ul ul li a,
  .nav-v2 > ul > li > ul > li > a {
    font-family: "Nunito", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #4a4541;
    text-decoration: none;
    text-transform: none;
  }

  /* Consistent vertical rhythm between submenu links */
  .nav-v2 > ul > li > ul ul li:not(:last-child),
  .nav-v2 > ul > li > ul > li:not(:last-child) {
    margin-bottom: 10px;
  }

  /* Hide promotional image tile in "Shop Cabinets" submenu on mobile
     The 252x253 image takes too much vertical space on small screens */
  .nav-v2 > ul > li.nav__menu-type-one > ul > li:last-child:has(img) {
    display: none;
  }
  
  /* Remove vertical column divider from Shop Cabinets submenu
     This line is designed for the desktop mega menu column layout
     and has no purpose in the stacked mobile view */
  .nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(3):before {
    display: none;
  } 

  /* Use gap instead of margin-bottom for sub-link spacing */
  .nav-v2 > ul > li > ul ul,
  .nav-v2 > ul > li > ul > li > ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Remove the old margin-based spacing */
  .nav-v2 > ul > li > ul ul li:not(:last-child),
  .nav-v2 > ul > li > ul > li:not(:last-child) {
    margin-bottom: 0;
  }

  /* Subtle horizontal dividers between grouped sections in
     multi-group expanded items (Resources, Company) */
  .nav-v2 > ul > li.nav__menu-type-two.hover > ul > li + li,
  .nav-v2 > ul > li.nav__menu-type-three.hover > ul > li + li {
    margin-top: 0;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
  }

  /* Tighten the gap between groups */
  .nav-v2 > ul > li.nav__menu-type-two.hover > ul,
  .nav-v2 > ul > li.nav__menu-type-three.hover > ul {
    gap: 14px;
  }

  /* Apply gap-based spacing to direct child links of Gallery
     (which has no nested groups) for consistent spacing */
  .nav-v2 > ul > li.menu-item-has-children:not(.nav__menu-type-one):not(.nav__menu-type-two):not(.nav__menu-type-three).hover > ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  /* Add bottom padding to mobile nav so users can scroll
     the Quick Links section above the GET 12% OFF teaser pill */
  .header-mobile .nav-mobile {
    padding-bottom: 100px;
  }

  /* Add bottom border to last menu item Sale */  
  .nav-v2 > ul > li:last-child:before {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: #d8d8d8;
  }

  /* Override theme rule that adds extra margin-bottom to items
     in non-first groups inside Resources mega menu, ensuring
     consistent spacing between all sub-links */
  .nav-v2 > ul > li.nav__menu-type-two > ul > li:first-child ~ li li:not(:last-child) {
    margin-bottom: 0;
  }
  
  /* Andrew Fix Width & Padding */
  .nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(2) {
    padding: 0px;
	width: 100%;
  }
  
  .nav-v2 > ul > li.nav__menu-type-one > ul > li:nth-child(1) {
    padding: 0px;
	width: 100%;
  }

}

/* =============================================================
   KCK SIDEBAR PROMO CARDS — kck-sidebar-promos.css
   =============================================================
   Portable, self-contained extraction of the /guides/ template's
   right-rail promo cards, for the WordPress BLOG and GLOSSARY
   sidebars. Pairs with kck-sidebar-promos.html.

   Source of truth note: these rules are extracted from
   kck-guide-2026.css (Magento guides template). If the card design
   changes there, re-extract or mirror the change here.

   Self-contained: every design token the cards consume is declared
   below, scoped to .kck-rail, so this file needs nothing else from
   the theme. Values match the KCK brand System Contract
   (https://kitchencabinetkings.com/brand/index.html).

   Requires Montserrat (700) and Nunito (400/600) — the blog theme
   already loads both; if the glossary doesn't, uncomment:
   ============================================================= */

/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Nunito:wght@400;600&display=swap'); */

/* -------------------------------------------------------------
   TOKENS (scoped to the rail so nothing leaks into the theme)
   ------------------------------------------------------------- */
.kck-rail {
    --doc-space-2: 8px;
    --doc-space-3: 12px;
    --doc-space-4: 16px;
    --doc-space-5: 20px;
    --doc-radius-md: 10px;

    --kck-color-red: #D9201E;
    --kck-color-red-hover: #B81A18;
    --kck-color-ink: #38342E;
    --kck-color-charcoal: #544F4A;
    --kck-color-line: #E0DBD6;
    --kck-color-gold-deep: #C0AD18;

    --doc-font-heading: 'Montserrat', Helvetica, Arial, sans-serif;
    --doc-font-body: 'Nunito', Helvetica, Arial, sans-serif;
    --kck-font-size-base: 16px;
    --kck-leading-snug: 1.4;
    --kck-leading-normal: 1.65;
    --kck-tracking-wide: 0.08em;
}

/* -------------------------------------------------------------
   RAIL CONTAINER
   In WordPress the theme's sidebar column controls the width;
   the rail just fills it. Cards keep their proportions at any
   width from ~260px up to the 480px mobile cap.
   ------------------------------------------------------------- */
.kck-rail {
    width: 100%;
    min-width: 0;
    font-family: var(--doc-font-body);
    box-sizing: border-box;
}
.kck-rail *,
.kck-rail *::before,
.kck-rail *::after {
    box-sizing: border-box;
}

/* Below the desktop layout the sidebar usually stacks under the
   content: center the cards and cap them so they keep card shape.
   Adjust 1023px if the blog theme stacks at a different width. */
@media (max-width: 1023px) {
    .kck-rail {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* -------------------------------------------------------------
   PROMO CARD
   All text and CTAs are live HTML (crisp at any width, editable
   without image tools); only the photo is an image. Photos export
   at 960x640 (3:2) — sharp up to 480px display on 2x screens.
   ------------------------------------------------------------- */
.kck-rail .kck-promo {
    display: block;
    margin: 0 0 var(--doc-space-5);
    background: #FFFFFF;
    border: 1px solid var(--kck-color-line);
    border-radius: var(--doc-radius-md);
    overflow: hidden;
    text-decoration: none !important;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.kck-rail .kck-promo:hover {
    border-color: var(--kck-color-red);
}

/* Title */
.kck-rail .kck-promo__title {
    display: block;
    padding: var(--doc-space-4) var(--doc-space-4) var(--doc-space-3);
    font-family: var(--doc-font-heading) !important;
    font-size: 17px;
    font-weight: 700;
    line-height: var(--kck-leading-snug);
    text-transform: uppercase;
    letter-spacing: var(--kck-tracking-wide);
    text-align: center;
    color: var(--kck-color-red);
}

/* Body copy */
.kck-rail .kck-promo__body {
    display: block;
    padding: 0 var(--doc-space-4) var(--doc-space-3);
    font-family: var(--doc-font-body) !important;
    font-size: var(--kck-font-size-base);
    line-height: 1.5;
    text-align: center;
    color: var(--kck-color-charcoal);
}

/* Photo band */
.kck-rail .kck-promo__media {
    display: block;
    line-height: 0;
}
.kck-rail .kck-promo__media img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
/* Breathing room when body copy follows the photo (Affirm card) */
.kck-rail .kck-promo__media + .kck-promo__body {
    padding-top: var(--doc-space-3);
}

/* Red CTA bar */
.kck-rail .kck-promo__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--doc-space-2);
    padding: var(--doc-space-3) var(--doc-space-4);
    background: var(--kck-color-red);
    color: #FFFFFF;
    font-family: var(--doc-font-heading) !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--kck-tracking-wide);
    transition: background 150ms ease;
}
.kck-rail .kck-promo__cta::after {
    content: '\2192';
}
.kck-rail .kck-promo:hover .kck-promo__cta {
    background: var(--kck-color-red-hover);
}

/* Star rating row (reviews card). Decorative; gold-deep passes
   contrast on white per brand color rules (plain gold does not). */
.kck-rail .kck-promo__stars {
    display: block;
    text-align: center;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 4px;
    color: var(--kck-color-gold-deep);
    padding-bottom: var(--doc-space-2);
}

/* Partner logo slot (Affirm). Uses the partner's OFFICIAL brand
   asset — never AI-generate a trademarked logo. */
.kck-rail .kck-promo__media--logo {
    display: block;
    padding: 0 var(--doc-space-4) var(--doc-space-4);
    text-align: center;
    line-height: 0;
}
.kck-rail .kck-promo__media--logo img {
    display: inline-block;
    width: auto;
    max-height: 30px;
    margin: 0;
    border: 0;
    box-shadow: none;
}

/* Quote variant (reviews card — no photo needed) */
.kck-rail .kck-promo--quote .kck-promo__quote {
    display: block;
    padding: var(--doc-space-2) var(--doc-space-5) var(--doc-space-4);
    font-family: var(--doc-font-body) !important;
    font-size: var(--kck-font-size-base);
    font-style: italic;
    line-height: var(--kck-leading-normal);
    text-align: center;
    color: var(--kck-color-ink);
}
.kck-rail .kck-promo--quote .kck-promo__quote::before {
    content: '\201C';
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 44px;
    line-height: 1;
    color: var(--kck-color-red);
}

/* -------------------------------------------------------------
   WORDPRESS THEME DEFENSE
   WP themes commonly underline sidebar links, add link colors,
   or style widget images. These keep the cards intact without
   touching anything outside .kck-rail.
   ------------------------------------------------------------- */
.kck-rail a.kck-promo,
.kck-rail a.kck-promo:hover,
.kck-rail a.kck-promo:focus,
.kck-rail a.kck-promo:visited {
    text-decoration: none !important;
    border-bottom: none;
    box-shadow: none;
}
.kck-rail a.kck-promo:focus-visible {
    outline: 2px solid var(--kck-color-red);
    outline-offset: 2px;
}

@media print {
    .kck-rail {
        display: none !important;
    }
}

/* ===== QUICK ANSWER / AI SNIPPET BOX ===== */

.kck-snippet {
  background-color: #F9F2E6;
  border: 1px solid #E0DBD6;
  border-top: 3px solid #544F4A;
  border-radius: 10px;
  padding: 24px 28px;
  margin: 28px 0;
}

.kck-snippet p {
  font-family: 'Nunito', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #544F4A !important;
  margin: 0 !important;
  padding: 0 !important;
}

.kck-snippet p strong {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: #544F4A !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  display: block !important;
  margin-bottom: 8px !important;
}

@media (max-width: 600px) {
  .kck-snippet {
    padding: 20px 20px;
  }

  .kck-snippet p {
    font-size: 14px !important;
  }
}

/* =======================================================================
   KCK TABLES  ·  kcktable.css
   Paste at the bottom of the WordPress blog theme CSS (new-styles-v2.css).

   PART 1 is the TABLES block from brand.css, ported as close to verbatim as
   a different install allows. Fallbacks are written into each var() so the
   file is safe to drop on Magento or the guides template unchanged.

   PART 2 is blog-only: four rules the WordPress theme needs and Magento
   does not.

   PART 3 is one opt-in modifier that is NOT in the brand system, marked as
   such, with the reasoning in full.

   WHERE THIS CAME FROM. The brand guidelines specify .kcktable in prose and
   brand.css implements it. Those two disagree in about six places (listed
   at the bottom). The implementation wins here, because it is the thing that
   actually renders and the prose has never been compiled.

   WHERE IT IS INSTALLED TODAY. Nowhere but the guidelines page. Tested by
   injecting a .kcktable into the live Magento homepage: cells come back with
   0px padding, transparent header, wrap not scrolling. The blog is the same.
   So this is a first install on both, not a port that risks drifting from an
   existing one.

   THE BLOG THEME'S ONLY TABLE RULES, in full:
     table { border-collapse: collapse; border-spacing: 0 }   (0,0,1)
     th, td { padding: 0 }                                    (0,0,1)
     .post-blog .post__entry table { margin-bottom: 25px }    (0,2,1)
   Everything here clears the first two on its own. The third is why the
   margin rules in PART 2 are scoped. No !important anywhere.
   ======================================================================= */


/* =======================================================================
   PART 1 · brand.css TABLES, ported
   ======================================================================= */

/* Wrap any table that might overflow on narrow viewports, provides the
   horizontal scroll context. Always wrap tables in this. */
.kcktable-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 16px 0 24px;
}

/* Standard table, the default. Comfortable spacing, clean dividers, no
   decorative styling. Use for any informational or comparison content. */
.kcktable {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-family: var(--doc-font-body, "Nunito", sans-serif);
  font-size: 15px;
  color: var(--doc-charcoal, #544f4a);
}

/* Single header treatment, sentence case Nunito, applies to every variant.
   Background varies via modifier classes (default white, --header-cream,
   --header-red).

   THIS IS THE ONE PEOPLE WILL WANT TO CHANGE, so: it is deliberate, and the
   evidence is inside brand.css itself. Forty lines below this rule,
   .kcktable__chip uses --doc-font-heading at 11px uppercase with 0.06em
   tracking. The same author, in the same component, reached for Montserrat
   caps for the chip and explicitly did not for the header. The TOC eyebrow
   and title a few hundred lines further down are Montserrat too. Montserrat
   was not forgotten here, it was declined. See the note at the very bottom
   of this file for the four-line change if that decision is revisited. */
.kcktable thead th {
  padding: 12px 16px;
  text-align: left;
  vertical-align: bottom;
  font-family: var(--doc-font-body, "Nunito", sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--doc-ink, #38342e);
  background: #fff;
  border-bottom: 1px solid var(--doc-line, #e0dbd6);
}

.kcktable tbody td {
  padding: 14px 16px;
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid var(--doc-line, #e0dbd6);
}

.kcktable tbody tr:last-child td {
  border-bottom: none;
}

/* Hover row, uses a dedicated hover wash so it stays visible over zebra
   striping. The second selector explicitly beats
   .kcktable--zebra tbody tr:nth-child(even) td, which would otherwise win. */
.kcktable tbody tr:hover td,
.kcktable--zebra tbody tr:nth-child(even):hover td {
  background: var(--doc-red-wash-hover, #f5e5e3);
}

.kcktable caption {
  caption-side: top;
  padding: 0 0 12px;
  text-align: left;
  font-family: var(--doc-font-body, "Nunito", sans-serif);
  font-size: 13px;
  color: var(--doc-mid, #7a736d);
}

/* Cell alignment utilities. Put them on BOTH the th and the td so the column
   aligns as a unit. Higher specificity than the base thead th rule so the
   header right-aligns correctly. */
.kcktable thead th.kcktable__num,
.kcktable tbody td.kcktable__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.kcktable thead th.kcktable__center,
.kcktable tbody td.kcktable__center {
  text-align: center;
}

/* ----- Header background variants ----- */

/* Cream header, warm and editorial. The default feel, on brand for KCK. */
.kcktable--header-cream thead th {
  background: var(--doc-bg-cream, #fbf8f3);
}

/* Red wash header, bolder. For attention-getting tables and "this matters"
   contexts. */
.kcktable--header-red thead th {
  background: var(--doc-red-wash, #fcf6f5);
  color: var(--doc-burgundy, #991c1f);
}

/* ----- Data variant, denser and scan friendly ----- */
.kcktable--data {
  font-size: 14px;
}
.kcktable--data thead th {
  padding: 10px 12px;
}
.kcktable--data tbody td {
  padding: 10px 12px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* ----- Modifiers ----- */

/* Zebra, subtle warm tint on even rows. Pair with --data, and use only on
   tables with 5 or more rows so the pattern establishes itself. */
.kcktable--zebra tbody tr:nth-child(even) td {
  background: var(--doc-bg-cream, #fbf8f3);
}

/* Bordered, adds an outer border. For when the table needs to feel like a
   discrete visual unit. */
.kcktable--bordered {
  border: 1px solid var(--doc-line, #e0dbd6);
}
.kcktable--bordered tbody td {
  border-bottom: 1px solid var(--doc-line, #e0dbd6);
}
.kcktable--bordered tbody tr:last-child td {
  border-bottom: none;
}

/* Emphasis, left accent border in burgundy. For key data and featured
   comparisons. */
.kcktable--emphasis {
  border-left: 4px solid var(--doc-burgundy, #991c1f);
}

/* Sticky header, for long tables in a scrollable container. Wrap in
   .kcktable-scroll to provide the scroll context. */
.kcktable--sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0 6px 12px -2px rgba(56, 52, 46, 0.18);
}
.kcktable-scroll {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--doc-line, #e0dbd6);
  border-radius: var(--doc-radius-md, 10px);
}
.kcktable-scroll .kcktable {
  margin: 0;
}

/* ----- Status chips, square with a leading dot ----- */
.kcktable__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--doc-font-heading, "Montserrat", sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kcktable__chip::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.kcktable__chip--good {
  background: var(--doc-success-wash, #dcfce7);
  color: var(--doc-success, #15803d);
}
.kcktable__chip--ok {
  background: var(--doc-warning-wash, #fef3c7);
  color: var(--doc-warning, #b45309);
}
.kcktable__chip--bad {
  background: var(--doc-error-wash, #fde8e8);
  color: var(--doc-error, #c41e3a);
}
.kcktable__chip--info {
  background: var(--doc-info-wash, #e9eeef);
  color: var(--doc-info, #1e5262);
}
.kcktable__chip--neutral {
  background: var(--doc-bg-cream, #fbf8f3);
  color: var(--doc-charcoal, #544f4a);
}

/* Mobile, tighten table spacing */
@media (max-width: 700px) {
  .kcktable {
    font-size: 14px;
  }
  .kcktable thead th,
  .kcktable tbody td {
    padding: 10px 12px;
  }
  .kcktable--data {
    font-size: 13px;
  }
  .kcktable--data thead th,
  .kcktable--data tbody td {
    padding: 8px 10px;
  }
}


/* =======================================================================
   PART 2 · WordPress blog only
   Four rules. Magento does not need any of them.
   ======================================================================= */

/* 1. The theme's .post-blog .post__entry table { margin-bottom: 25px } is
      specificity (0,2,1) and beats .kcktable { margin: 0 }. Without this the
      table keeps a 25px gap inside its own wrapper. */
.post-blog .post__entry .kcktable {
  margin: 0;
}
.post-blog .post__entry .kcktable-wrap,
.post-blog .post__entry .kcktable-scroll {
  margin: 16px 0 25px;
}

/* 2. A row header. brand.css styles tbody td and never tbody th, because
      every demo table on the guidelines page puts its labels in td. Blog
      tables use <th scope="row">, which is the correct markup for a
      definition table and what the end-panel post already ships. Same
      padding and borders as a data cell, one weight up. */
.kcktable tbody th {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  font-weight: 700;
  color: var(--doc-ink, #38342e);
  border-bottom: 1px solid var(--doc-line, #e0dbd6);
}
.kcktable tbody tr:last-child th {
  border-bottom: none;
}
.kcktable tbody tr:hover th {
  background: var(--doc-red-wash-hover, #f5e5e3);
}
.kcktable--zebra tbody tr:nth-child(even) th {
  background: var(--doc-bg-cream, #fbf8f3);
}
.kcktable--data tbody th {
  padding: 10px 12px;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .kcktable tbody th {
    padding: 10px 12px;
  }
  .kcktable--data tbody th {
    padding: 8px 10px;
  }
}

/* 3. Links in a post table take the brand red, like every other link in the
      post. brand.css has no rule for this because its demo tables have no
      links in them. */
.kcktable a {
  color: var(--doc-red, #d9201e);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(217, 32, 30, 0.35);
}
.kcktable a:hover,
.kcktable a:focus-visible {
  text-decoration-color: currentColor;
}

/* 4. Old posts. Any table not yet wrapped gets padding, dividers and a
      header row so nothing looks broken while they are migrated one at a
      time. No scroll wrapper, which CSS cannot add. */
.post-blog .post__entry > table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--doc-font-body, "Nunito", sans-serif);
  font-size: 15px;
  color: var(--doc-charcoal, #544f4a);
}
.post-blog .post__entry > table thead th {
  padding: 12px 16px;
  text-align: left;
  vertical-align: bottom;
  font-size: 13px;
  font-weight: 700;
  color: var(--doc-ink, #38342e);
  background: var(--doc-bg-cream, #fbf8f3);
  border-bottom: 1px solid var(--doc-line, #e0dbd6);
}
.post-blog .post__entry > table tbody th,
.post-blog .post__entry > table tbody td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid var(--doc-line, #e0dbd6);
}
.post-blog .post__entry > table tbody th {
  font-weight: 700;
  color: var(--doc-ink, #38342e);
}
.post-blog .post__entry > table tbody tr:last-child th,
.post-blog .post__entry > table tbody tr:last-child td {
  border-bottom: none;
}


/* =======================================================================
   PART 3 · ADDITION, NOT IN THE BRAND SYSTEM  ·  .kcktable--stack
   -----------------------------------------------------------------------
   The guidelines Don't list says: "Don't try to collapse tables to cards on
   mobile. Stacked cards lose the relationship between columns, users can't
   compare row N to row N+1 once they're stacked vertically."

   Correct for every table the guidelines illustrate, all of which are
   comparisons or data grids where reading across and down is the point. It
   does not describe a two-column definition table, where the left column is
   a term and the right is a 45-word paragraph explaining it. There is no
   row-to-row comparison to lose. What horizontal scroll costs there is real:
   every line of the paragraph is cut at the screen edge, so reading one
   entry means swiping right and back on each line.

   Opt in per table, and only when BOTH are true:
     1. exactly two columns, and
     2. the second column holds sentences, not values.
   Anything else follows the guidelines and scrolls.

   It needs the ARIA roles in the markup. display:block removes the browser's
   table semantics, so without role="table" / "rowgroup" / "row" /
   "columnheader" / "rowheader" / "cell" a screen reader loses the
   header-to-cell association at exactly the width where it matters. No other
   variant stacks, so no other variant needs them.
   ======================================================================= */
.kcktable--stack thead th:first-child {
  width: 30%;
}

@media (max-width: 600px) {
  .kcktable--stack,
  .kcktable--stack tbody,
  .kcktable--stack tr,
  .kcktable--stack th,
  .kcktable--stack td {
    display: block;
    width: auto;
  }

  /* A caption keeps display: table-caption when its table becomes a block,
     and a table-caption inside a block box shrink-wraps to the narrowest
     column it can find, which puts the title on one word per line. */
  .kcktable--stack caption {
    display: block;
  }

  /* thead is hidden rather than stacked. In a two-column definition table
     the row head IS the label, so repeating the column names above every
     entry is noise. It stays in the accessibility tree. */
  .kcktable--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .kcktable--stack tbody tr {
    border-bottom: 1px solid var(--doc-line, #e0dbd6);
  }
  .kcktable--stack tbody tr:last-child {
    border-bottom: none;
  }
  .kcktable--stack tbody th {
    background: var(--doc-bg-cream, #fbf8f3);
    border-bottom: none;
  }
  .kcktable--stack tbody td {
    padding-bottom: 16px;
    border-bottom: none;
  }
  /* The hover wash has to come off once the cells are stacked, or a tap
     lights the label and its paragraph as two separate boxes. */
  .kcktable--stack tbody tr:hover th {
    background: var(--doc-bg-cream, #fbf8f3);
  }
  .kcktable--stack tbody tr:hover td {
    background: transparent;
  }
}


/* =======================================================================
   IF THE HEADER FONT DECISION IS REVISITED

   Montserrat caps instead of sentence-case Nunito is these four lines. It is
   NOT in this file on purpose: changing it here and not in brand.css is
   exactly how the --doc-* / --kck-* split happened. Change the brand doc and
   brand.css first, then uncomment this.

   .kcktable thead th {
     font-family: var(--doc-font-heading, "Montserrat", sans-serif);
     font-size: 11px;
     letter-spacing: 0.08em;
     text-transform: uppercase;
   }

   -----------------------------------------------------------------------
   WHERE THE PROSE AND brand.css DISAGREE

   Six places. brand.css is what this file follows. Worth reconciling in the
   guidelines, since the prose is what anybody reads before writing code.

     property            prose                    brand.css
     base font size      14px                     15px
     wrapper             border + radius-md       neither, --bordered adds it
     default header bg   cream                    white, cream is a modifier
     caption             12px italic charcoal     13px roman, --doc-mid
     --bordered          + column separators      outer border only
     --emphasis          on the wrap, +8px pad    on the table, no pad change
     --header-red        + burgundy bottom rule   no bottom rule
     --data font size    13px                     14px

   Also: the prose names --doc-red-wash for --header-red but prints #FDE8E8
   beside it, which is --doc-error-wash. brand.css uses the token. And the
   prose documents three chip variants where brand.css has five (--ok and
   --info are undocumented).
   ======================================================================= */
   
/* =======================================================================
   BYLINE
   The post author's name, linked to /author/andrew-saladino. Sized from the
   byline around it, one weight heavier so the name reads before the date.

   The underline is the only at-rest signal that the name is a link, so it
   has to be visible: #8F887F is 3.5:1 against white, which clears the 3:1
   threshold for a non-text element. #E0DBD6 was 1.37:1, invisible in
   practice. It goes red and solid on hover.
   ======================================================================= */
.post__author-link {
  font: inherit;
  font-weight: 600;
  color: #38342E;
  text-decoration: underline;
  text-decoration-color: #8F887F;
  text-underline-offset: 2px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.post__author-link:hover,
.post__author-link:focus {
  color: #D9201E;
  text-decoration-color: currentColor;
}
.post__author-link:focus-visible {
  outline: 2px solid #D9201E;
  outline-offset: 2px;
  border-radius: 2px;
}