.qc-banner, .qc-panel { --qc-black: #000000; --qc-teal: #00738F; --qc-white: #FFFFFF; --qc-offwhite: #F6F5F3; --qc-lightgrey: #EDEBE8; --qc-font: "aktiv-grotesk-condensed", sans-serif; --qc-mono: "JetBrains Mono", ui-monospace, monospace; --qc-radius: 10px; font-family: var(--qc-font); color: var(--qc-black); overflow-wrap: break-word; } .qc-banner *, .qc-banner *::before, .qc-banner *::after, .qc-panel *, .qc-panel *::before, .qc-panel *::after { box-sizing: border-box; }  .qc-banner.brxe-container { width: 100%; max-width: 100%; padding: 0; margin: 0; container: qc-banner / inline-size; } .qc-banner .qc-banner__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo btn" "text btn"; align-items: center; column-gap: 1rem; row-gap: .25rem; width: 100%; padding: .625rem .75rem .625rem 1rem; border-radius: 15px; background: var(--qc-teal); color: var(--qc-white); text-align: left; } .qc-banner .qc-banner__logo { grid-area: logo; display: block; width: 6.75rem; max-width: 100%; height: auto; margin: 0; } .qc-banner .qc-banner__divider { display: none; } .qc-banner .qc-banner__text { grid-area: text; display: flex; flex-direction: column; gap: .125rem; width: auto; min-width: 0; } .qc-banner .qc-banner__title { margin: 0; font: 700 1.125rem/1.2 var(--qc-font); color: inherit; } .qc-banner .qc-banner__proof { margin: 0; font: 400 1rem/1.3 var(--qc-font); color: inherit; }  .qc-banner .qc-banner__btn { grid-area: btn; display: inline-flex; align-items: center; gap: .375rem; width: auto; min-height: 2.25rem; margin: 0; padding: .3125rem .625rem .3125rem .875rem; border: 0; border-radius: var(--qc-radius); background: var(--qc-lightgrey); color: var(--qc-black); font: 400 1rem/1.2 var(--qc-font); white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color .3s, color .3s; } .qc-banner .qc-banner__btn::after { content: ""; flex: none; width: .8125rem; height: .8125rem; background-color: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; } .qc-banner .qc-banner__btn:focus-visible { outline: 2px solid var(--qc-white); outline-offset: 2px; } @media (hover: hover) { .qc-banner .qc-banner__btn:hover { background: var(--qc-black); color: var(--qc-white); } }  @container qc-banner (min-width: 29rem) { .qc-banner .qc-banner__bar { display: flex; flex-direction: row; align-items: center; gap: 1.125rem; padding: .625rem .75rem .625rem 1.375rem; } .qc-banner .qc-banner__logo { flex: none; width: 7.5rem; } .qc-banner .qc-banner__divider { display: block; flex: none; width: 1px; height: 2.25rem; background: rgba(255, 255, 255, .35); } .qc-banner .qc-banner__text { flex: 1 1 auto; } .qc-banner .qc-banner__btn { flex: none; margin-left: auto; } }  @media (max-width: 767px) { .qc-banner .qc-banner__proof { display: none; } .qc-banner .qc-banner__title { font-size: 1.0625rem; } }  @container qc-banner (max-width: 15rem) { .qc-banner .qc-banner__bar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "text" "btn"; row-gap: .5rem; } .qc-banner .qc-banner__btn { justify-self: start; } }  .qc-panel.brxe-offcanvas { z-index: 10000; } .qc-panel .brx-offcanvas-backdrop { background: rgba(0, 0, 0, .5); } .qc-panel[data-direction] .brx-offcanvas-inner { display: flex; flex-direction: column; flex-wrap: nowrap; width: min(30rem, 100%); max-width: 100%; height: 100%; padding: 0; gap: 0; background: var(--qc-white); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; } .qc-panel :focus-visible { outline: 3px solid var(--qc-black); outline-offset: 2px; }  .qc-panel .qc-panel__header { position: sticky; top: 0; z-index: 2; flex: none; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: max(.625rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) .625rem 1.25rem; background: var(--qc-white); border-bottom: 1px solid var(--qc-lightgrey); } .qc-panel .qc-panel__logo { display: block; width: 8.25rem; max-width: 60%; height: auto; margin: 0; }  .qc-panel .qc-panel__close { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--qc-black); border-radius: var(--qc-radius); background: var(--qc-white); color: var(--qc-black); cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; } .qc-panel .qc-panel__close .brxa-wrap { display: none; } .qc-panel .qc-panel__close::before { content: ""; width: 20px; height: 20px; background-color: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; } @media (hover: hover) { .qc-panel .qc-panel__close:hover { background: var(--qc-teal); border-color: var(--qc-teal); color: var(--qc-white); } }  .qc-panel .qc-panel__body { container: qc-body / inline-size; flex: 1 0 auto; display: flex; flex-direction: column; gap: .875rem; width: 100%; padding: 1.25rem max(1.25rem, env(safe-area-inset-right, 0px)) max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)) 1.25rem; }  .qc-panel .qc-panel__hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; min-height: 13.5rem; padding: 1.125rem 1.25rem; overflow: hidden; border-radius: var(--qc-radius); background: var(--qc-black); color: var(--qc-white); } .qc-panel .qc-panel__photo { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: 62% 30%; } .qc-panel .qc-panel__hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, 0) 75%); } .qc-panel .qc-panel__title { margin: 0; max-width: 14ch; font: 700 1.875rem/1.1 var(--qc-font); color: inherit; text-wrap: balance; } .qc-panel .qc-panel__lead { margin: 0; font: 400 1.125rem/1.4 var(--qc-font); color: var(--qc-black); }  .qc-panel .qc-panel__benefits { display: flex; flex-direction: column; gap: 0; width: 100%; margin: 0; padding: .25rem 1rem; list-style: none; border-radius: var(--qc-radius); background: var(--qc-offwhite); } .qc-panel .qc-panel__benefit { display: grid; grid-template-columns: 1.625rem minmax(0, 1fr); column-gap: .75rem; row-gap: .125rem; width: 100%; margin: 0; padding: .75rem 0; list-style: none; } .qc-panel .qc-panel__benefit + .qc-panel__benefit { border-top: 1px solid rgba(0, 0, 0, .1); } .qc-panel .qc-panel__benefit::marker { content: none; } .qc-panel .qc-panel__benefit-icon { grid-row: span 2; display: block; width: 1.625rem; height: 1.625rem; margin: .0625rem 0 0; } .qc-panel .qc-panel__benefit-title { margin: 0; font: 700 1.25rem/1.2 var(--qc-font); color: var(--qc-black); } .qc-panel .qc-panel__benefit-text { margin: 0; font: 400 1rem/1.4 var(--qc-font); color: var(--qc-black); }  .qc-panel .qc-panel__contact { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; column-gap: 1.25rem; width: 100%; padding: 1rem 1.125rem; border-radius: var(--qc-radius); background: var(--qc-teal); color: var(--qc-white); } .qc-panel .qc-panel__contact-main, .qc-panel .qc-panel__contact-info { display: flex; flex-direction: column; align-items: flex-start; width: auto; min-width: 0; } .qc-panel .qc-panel__contact-main { gap: .125rem; } .qc-panel .qc-panel__contact-info { align-self: stretch; justify-content: center; gap: .375rem; padding-left: 1.25rem; border-left: 1px solid rgba(255, 255, 255, .3); } .qc-panel .qc-panel__eyebrow { margin: 0 0 .125rem; font: 400 .95rem/1.3 var(--qc-mono); letter-spacing: -0.06px; text-transform: uppercase; color: inherit; } .qc-panel .qc-panel__contact-title { margin: 0; font: 400 1.125rem/1.3 var(--qc-font); color: inherit; } .qc-panel .qc-panel__phone { display: inline-flex; align-items: center; gap: .375rem; font: 700 1.375rem/1.25 var(--qc-font); font-variant-numeric: tabular-nums; color: var(--qc-white); text-decoration: none; text-underline-offset: 4px; white-space: nowrap; } .qc-panel .qc-panel__phone::before { content: ""; flex: none; width: 1.0625rem; height: 1.0625rem; background-color: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center / contain no-repeat; } .qc-panel .qc-panel__hours { margin: 0; font: 400 1rem/1.4 var(--qc-font); color: inherit; } .qc-panel .qc-panel__email { font: 400 1rem/1.4 var(--qc-font); color: var(--qc-white); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .6); text-underline-offset: 3px; overflow-wrap: anywhere; } .qc-panel .qc-panel__contact a:focus-visible { outline: 2px solid var(--qc-white); outline-offset: 2px; } @media (hover: hover) { .qc-panel .qc-panel__phone:hover { text-decoration: underline; color: var(--qc-white); } .qc-panel .qc-panel__email:hover { text-decoration-color: currentColor; color: var(--qc-white); } } @container qc-body (max-width: 22rem) { .qc-panel .qc-panel__contact { column-gap: .875rem; } .qc-panel .qc-panel__contact-info { padding-left: .875rem; } }  .qc-panel .qc-panel__reviews { width: 100%; min-width: 0; padding: 0; background: none; } .qc-panel .qc-panel__reviews .trustpilot-widget { width: 100%; min-height: 240px; } .qc-panel .qc-panel__reviews .trustpilot-widget > a { font: 400 1rem/1.4 var(--qc-font); color: var(--qc-black); }  @media (max-width: 30rem) { .qc-panel .qc-panel__header { padding-left: 1rem; } .qc-panel .qc-panel__logo { width: 7.5rem; } .qc-panel .qc-panel__body { gap: .75rem; padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + .75rem)) 1rem; } .qc-panel .qc-panel__hero { min-height: 9.5rem; padding: .875rem 1rem; } .qc-panel .qc-panel__title { font-size: 1.625rem; } .qc-panel .qc-panel__lead { font-size: 1.0625rem; line-height: 1.4; } .qc-panel .qc-panel__benefits { padding: 0 .875rem; } .qc-panel .qc-panel__benefit { padding: .5625rem 0; column-gap: .625rem; } .qc-panel .qc-panel__benefit-icon { width: 1.375rem; height: 1.375rem; } .qc-panel .qc-panel__benefit-title { font-size: 1.125rem; } .qc-panel .qc-panel__contact { padding: .75rem .875rem; } .qc-panel .qc-panel__contact-title { font-size: 1.0625rem; } .qc-panel .qc-panel__phone { font-size: 1.25rem; } .qc-panel .qc-panel__hours, .qc-panel .qc-panel__email { font-size: .9375rem; } }  @media (max-width: 30rem) and (max-height: 45rem) { .qc-panel .qc-panel__body { gap: .625rem; padding-top: .875rem; } .qc-panel .qc-panel__hero { min-height: 8rem; padding: .75rem .875rem; } .qc-panel .qc-panel__benefit { padding: .5rem 0; } }  @media (min-width: 30.01rem) and (max-height: 50rem) { .qc-panel .qc-panel__hero { min-height: 10.5rem; } }  @media (max-height: 30rem) { .qc-panel .qc-panel__header { padding-top: max(.375rem, env(safe-area-inset-top, 0px)); padding-bottom: .375rem; } .qc-panel .qc-panel__body { padding-top: .875rem; gap: .75rem; } .qc-panel .qc-panel__title { font-size: 1.5rem; max-width: none; color: var(--qc-black); } .qc-panel .qc-panel__hero { min-height: 0; padding: 0; background: none; } .qc-panel .qc-panel__hero::after, .qc-panel .qc-panel__photo { display: none; } }  @media (prefers-reduced-motion: reduce) { .qc-panel .brx-offcanvas-inner, .qc-panel .brx-offcanvas-backdrop { transition-duration: 0s !important; } }  html:has(.qc-panel) { scrollbar-gutter: stable; }  .qc-topbar.brxe-block{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.75rem;width:auto;color:#fff;font-family:"aktiv-grotesk-condensed",sans-serif;line-height:1.2;white-space:nowrap} .qc-topbar .qc-topbar__brand{display:inline-flex;flex-direction:row;align-items:center;width:auto;min-height:2rem;margin:0;padding:0 .25rem;border:0;border-radius:4px;background:none;color:inherit;cursor:pointer} .qc-topbar .qc-topbar__logo{display:block;width:5.625rem;max-width:none;height:auto} .qc-topbar .qc-topbar__text{font-size:.875rem;font-weight:400;color:#fff} .qc-topbar .qc-topbar__divider{flex:none;width:1px;height:1rem;background:rgba(255,255,255,.35)} .qc-topbar .qc-topbar__phone{display:inline-flex;align-items:center;gap:.375rem;min-height:2rem;color:#fff;font-size:.9375rem;font-weight:700;font-variant-numeric:tabular-nums;text-decoration:none} .qc-topbar .qc-topbar__phone::before{content:"";flex:none;width:.875rem;height:.875rem;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center/contain no-repeat} .qc-topbar .qc-topbar__brand:focus-visible,.qc-topbar .qc-topbar__phone:focus-visible{outline:2px solid #fff;outline-offset:2px} @media (hover:hover){.qc-topbar .qc-topbar__phone:hover{color:#fff;text-decoration:underline}.qc-topbar .qc-topbar__brand:hover{opacity:.85}} .qc-topbar--desktop.brxe-block{margin-left:auto} .qc-topbar--compact.brxe-block{display:none} @media (max-width:1280px){.qc-topbar--desktop .qc-topbar__text{display:none}} @media (max-width:1024px){  .at-sale-header:has(.qc-topbar--compact){flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:.75rem} .at-sale-header:has(.qc-topbar--compact) > .brxe-container{width:auto;flex:0 1 auto;min-width:0;margin:0}  .at-sale-header .qc-topbar--compact.brxe-block{display:flex;flex:none;width:auto;margin:0;padding:0 0 0 .75rem;border-left:1px solid rgba(255,255,255,.35);pointer-events:auto} }  @media (max-width:767px){.at-sale-header .qc-topbar--compact.brxe-block{display:none}}  body.single-product .qc-topbar.brxe-block{display:none}