.section--find-oilogic{background-color:var(--color-background);isolation:isolate}.find-oilogic__hero{position:relative;z-index:999;background-color:var(--color-background);padding-block-start:calc(var(--fluid-48-64) + var(--fo-pt-mobile, 0px));padding-block-end:calc(var(--fluid-32-48) + var(--fo-pb-mobile, 0px))}@media(min-width:768px){.find-oilogic__hero{padding-block-start:calc(var(--fluid-48-64) + var(--fo-pt-desktop, 0px));padding-block-end:calc(var(--fluid-32-48) + var(--fo-pb-desktop, 0px))}}.find-oilogic__hero-inner{padding-inline:var(--fluid-16-40)}.find-oilogic__heading-group{display:flex;flex-direction:column;align-items:center;gap:var(--fluid-12-12);max-inline-size:var(--fluid-340-510);margin-inline:auto;text-align:center}.find-oilogic__heading{margin:0;font-family:var(--font-display-family);font-size:var(--fluid-36-48);font-weight:var(--font-weight-regular);line-height:var(--line-height-display);letter-spacing:var(--letter-spacing-display-tight);color:var(--color-gray-800);text-wrap:balance}.find-oilogic__description{margin:0;font-family:var(--font-body-family);font-size:var(--fluid-18-20);font-weight:var(--font-weight-light);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);color:var(--color-gray-800)}.find-oilogic__description p{margin:0}.find-oilogic__retailers{position:relative;margin-block-start:calc(var(--fluid-121-194) / -2);background-color:var(--color-brand-periwinkle);overflow-x:clip}.find-oilogic__scallop{--fo-scallop-w: var(--fluid-85-136);--fo-scallop-depth: calc(var(--fo-scallop-w) / 2);--fo-scallop-h: var(--fluid-121-194);--fo-scallop-bleed: 2px;position:absolute;inset-block-start:calc(-1 * var(--fo-scallop-bleed));inset-inline:0;block-size:calc(var(--fo-scallop-h) + var(--fo-scallop-bleed));background-color:var(--color-background);--fo-scallop-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1'%3E%3Ccircle cx='1' cy='0' r='1' fill='%23fff'/%3E%3C/svg%3E") left bottom / var(--fo-scallop-w) var(--fo-scallop-depth) repeat-x, linear-gradient(#000, #000) left top / 100% calc(100% - var(--fo-scallop-depth) + 2px) no-repeat;-webkit-mask:var(--fo-scallop-mask);mask:var(--fo-scallop-mask);pointer-events:none}.find-oilogic__retailers-inner{padding-inline:var(--fluid-16-40);padding-block-start:calc(var(--fo-scallop-h, var(--fluid-121-194)) + var(--fluid-48-64));padding-block-end:var(--fluid-48-64)}@media(min-width:768px){.find-oilogic__retailers-inner{padding-inline:0}}.find-oilogic__grids{display:flex;flex-direction:column;gap:var(--fluid-32-40)}.find-oilogic__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--fluid-12-20);margin:0;padding:0;list-style:none}.find-oilogic__card{position:relative;display:flex;flex:0 0 auto;align-items:center;justify-content:center;border-radius:16px;background-color:var(--fo-card-bg, var(--color-brand-yellow))}.find-oilogic__card[tabindex="0"]{cursor:default}.find-oilogic__card[tabindex="0"]:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}@media(min-width:768px){.find-oilogic__card{border-radius:30px}}.find-oilogic__card--medium{inline-size:var(--fluid-173-440);block-size:var(--fluid-103-178);padding-inline:var(--fluid-24-40);padding-block:var(--fluid-24-48)}.find-oilogic__card--small{inline-size:var(--fluid-109-256);block-size:var(--fluid-94-144);padding-inline:var(--fluid-12-40);padding-block:var(--fluid-12-48)}.find-oilogic__logo{max-inline-size:100%;max-block-size:100%;inline-size:auto;block-size:auto;object-fit:contain}.find-oilogic__tooltip{position:absolute;inset-block-end:calc(100% + var(--fluid-8-8));inset-inline-start:50%;translate:-50% 4px;max-inline-size:220px;width:max-content;padding:var(--fluid-8-8) var(--fluid-12-12);border-radius:8px;background-color:var(--color-gray-800);color:var(--color-white);font-family:var(--font-body-family);font-size:var(--fluid-12-14);line-height:var(--line-height-body);text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease-out,translate .15s ease-out;z-index:2}.find-oilogic__card:hover .find-oilogic__tooltip,.find-oilogic__card:focus-within .find-oilogic__tooltip{opacity:1;visibility:visible;translate:-50% 0}.find-oilogic__empty-state{padding-block:var(--fluid-48-64);padding-inline:var(--fluid-16-40);text-align:center;color:var(--color-foreground)}
/*# sourceMappingURL=/cdn/shop/t/39/assets/section-find-oilogic.css.map */