/* quick links mobile bar */

main .section.quick-links-bar-container { padding: 0 !important; background: var(--clr-brand-white); margin-block: 0 !important;}

.section.quick-links-bar-container ul { padding: 0; }

.quick-links-bar { padding-block: var(--spacing-m); margin: 0 !important; }

.quick-links-bar ul li { padding-inline: var(--gutter-xs); }

.quick-links-bar.no-overflow ul li { padding-inline: var(--gutter-s); flex: 1 1 auto !important;}

.quick-links-bar.no-overflow ul li:not(:last-child) { border-right: 1px solid var(--text-color); }

.quick-links-bar ul li a { text-transform: uppercase; color: var(--text-color); font-weight: var(--fw-bold);}

@media (width >= 768px) {.section.quick-links-bar-container {display: none;}}

.banner-type-promo > div { background: none;}

/* homepage */

.section:has(.slide[class*="promo"], .slide[class*="hero"]), .section.hero, .section:has(.fragment-wrapper),

.section:has(.full-bleed) { margin-block-end: var(--spacing-l); padding-block: 0;}

.slide-wrapper :is(.slide[class*="promo"], .slide.hero) div.copy-wrapper {padding: var(--gutter-m);}

.section .block.hero h1 {text-transform: uppercase;

font-size: clamp(2.4rem, calc(2.2rem + 2vw), 3.4rem);margin-block-end: var(--gutter-m) !important;}

.block.hero h1 em {font-family: var(--heading-font-family-secondary);font-style: normal;}

.block.hero h1 strong em {font-family: var(--heading-font-family-secondary-bold);font-style: normal;}

.slide-wrapper .slide.hero .cta-wrapper {margin-block-start: 0.5em;}

.slide[class*="promo"] h2 { text-transform: uppercase; font-size: clamp(2.2rem, calc(1rem + 2vw), 3rem);}

.slide[class*="promo"] h2 em {font-family: var(--heading-font-family-secondary); font-style: normal; }

.slide[class*="promo"] h2 strong em {font-family: var(--heading-font-family-secondary-bold); font-style: normal; }

main .section > div .block:where([class*="promo"], .hero) p {line-height: 1.2; font: var(--font-pragmatica-extd); font-size: clamp(1.4rem, calc(1rem + 0.75vw), 3rem); }

.cta-wrapper:has(p.button-container + p.button-container) p.button-container a {margin-block-end: 0;}

p.button-container { margin-block-end: 0 !important;}

@media (width <= 360px) {

.slide[class*="promo"] h2 {font-size: min(calc(1.4rem + 2vw), 5.4rem);}}

@media (width >= 400px) {

.section .block.hero h1 {font-size: clamp(2.6rem, calc(3rem + 2vw), 4.4rem);}}

@media (width <= 767px) {

.slide[class*="promo"] .cta-wrapper { justify-content: center; }}

@media (width >= 1024px) {

.section .block.hero h1 {font-size: clamp(2.8rem, calc(2.2rem + 2.2vw), 6.4rem);}

.slide[class*="promo"] h2 {font-size: clamp(2.2rem, calc(1rem + 2vw), 5.6rem);}}

@media (width >= 1440px) {

.section .block.hero h1 {font-size: clamp(3rem, calc(3rem + 2.2vw), 8rem);}}

@media (width >= 1900px) {

.section .block.hero h1 {font-size: clamp(3rem, calc(3rem + 3vw), 8rem);}}

main .banner .promotion-content p a {color: black !important;}

.fragment-carousel-wrapper > button {

background: #ffffff70 !important;border-radius: 4px !important;}

.fragment-carousel-wrapper > button:is(:hover, :focus-visible) {

background: #ffffff !important;}

@media (min-width: 900px), (width >= 900px) {

.fragment-carousel-wrapper > button {width: 4.4rem !important;height: 4.4rem !important;}

.fragment-carousel-wrapper > button::after {

height: 4.4rem !important;width: 4.4rem !important;mask-size: 2.6rem !important;}

}