/* EngineOil — charcoal, satin metal and copper. A mobile-first storefront. */
:root{--bg:#0a0c0e;--panel:#14181b;--panel-raised:#1b2024;--line:#2a3035;--muted:#a5afb8;--accent:#ed964c;--accent-light:#ffc08a;--radius:18px}
body{background:var(--bg)}
.section{padding-block:80px}
h2{letter-spacing:-1.7px;line-height:1.12}
h2 em{color:#aab3bb}
.button{border-radius:10px;gap:16px;justify-content:center;min-height:52px}
.gold,.dark{background:linear-gradient(115deg,#ffc28e,#ea9149);box-shadow:inset 0 1px 0 #ffdbb7,0 6px 24px #b55c1710}
.glass,.outline{border-color:#3b4248;background:#171c2080}
select,input{border-radius:10px;background:#171c20;border-color:#343c43}
select:focus,input:focus{border-color:var(--accent)}
.eyebrow{letter-spacing:1.8px}
.mobile-break{display:none}
header{background:#090b0eee}
.hero{background:radial-gradient(ellipse at 50% 0,#24272c55,transparent 55%),#090b0c}
.hero-copy>p:not(.eyebrow){color:#b6bec5}
.scene-settings{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);z-index:4;background:#111619eb;border:1px solid #41454a;border-radius:14px;backdrop-filter:blur(20px);box-shadow:0 16px 40px #0004;min-width:290px}
.scene-settings>summary{list-style:none;display:flex;align-items:center;gap:18px;padding:13px 18px;cursor:pointer;font-size:14px;color:#bbc4cc}
.scene-settings>summary::-webkit-details-marker{display:none}
.scene-settings-label{font-weight:600;color:#e9edf1}
.scene-settings-hint{color:#d7a57e;font-size:12px;margin-left:auto}
.scene-settings-plus{font-size:20px;color:var(--accent)}
.scene-settings[open] .scene-settings-plus{transform:rotate(45deg)}
.scene-settings .light-controls{position:static;transform:none;margin:0;box-shadow:none;background:transparent;border:0;border-top:1px solid #323a40;border-radius:0 0 14px 14px;backdrop-filter:none}
.light-setting select{border-radius:8px}
.vehicle-finder{background:radial-gradient(ellipse at 5% 0,#432c1c44,transparent 65%),#101417;border:0}
.vehicle-panel{border:1px solid #374047;border-top-color:#765035;border-radius:20px;padding:30px;background:linear-gradient(140deg,#1b2126,#111619);box-shadow:0 16px 45px #0002}
.vehicle-panel-top{padding-bottom:19px;border-bottom:1px solid #30383e}
.vehicle-panel-top strong{font-weight:800;letter-spacing:-.5px}
.vehicle-panel-top button{font-size:14px;color:#c0a48f}
.vehicle-fields label{color:#adb8c0}
.vehicle-fields select{font-size:16px;font-weight:400;min-width:0}
.vehicle-status{color:#edb98f}
.known-grade{border-color:#30383e}.known-grade>summary{font-size:14px;font-weight:600}
.vehicle-result,.vehicle-help{border-radius:18px}.finder-match{border-radius:12px}.finder-match img{border-radius:8px}
.car-brands-section{background:radial-gradient(ellipse at 80% 0,#202b3544,transparent 65%),#0b1014;border-top:1px solid #252d33;border-bottom:0}
.car-brand-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.car-brand{background:linear-gradient(145deg,#172028,#0b1218);border:1px solid #2c3943;min-height:168px;padding:18px 10px 17px;gap:13px;border-radius:17px;box-shadow:inset 0 1px 0 #ffffff05;transition:transform .2s,border-color .2s,box-shadow .2s}
.car-brand .car-emblem{display:grid;place-items:center;width:96px;height:84px;overflow:hidden;border-radius:50%;background:#081219;min-height:0;margin:0}
.car-brand .car-logo{width:104px;height:83px;max-width:none;mask-image:radial-gradient(ellipse at center,#000 46%,transparent 74%);-webkit-mask-image:radial-gradient(ellipse at center,#000 46%,transparent 74%)}
.car-brand>span:last-child{font-size:14px;font-weight:600;letter-spacing:0;min-height:20px;line-height:1.3;white-space:normal;text-align:center}
.car-brand:hover,.car-brand[aria-pressed=true]{background:linear-gradient(145deg,#2a2723,#10171d);border-color:#c08353;box-shadow:inset 0 1px 0 #ffc58b44,0 8px 24px #0003;transform:translateY(-2px)}
.car-brand-grid:not(.is-expanded) .car-brand:nth-child(n+11){display:none}
.brand-expand-row{display:flex;justify-content:center;margin-top:22px}.brand-expand-row .button{min-width:265px;font-size:14px;border-color:#38434c;color:#c7d0d7;font-weight:600}
.car-note{max-width:620px;margin:20px auto 0;font-size:12px;line-height:1.8;text-align:center;color:#8f9ba5}
.trustbar{background:#101518;border-block:1px solid #252d33}.trust-grid svg{color:#d6aa86}
.brands-section{background:#0a0e11;border-bottom:0}.brand-grid{gap:12px;border:0}
.brand{border:1px solid #293238;border-radius:14px;min-height:142px;background:linear-gradient(145deg,#151e25,#090f14);padding:19px 20px 15px;gap:9px}
.brand:hover{border-color:#9d6a42;box-shadow:none;background:#1e252a}
.brand-logo{height:65px;max-width:142px}.brand span{font-size:14px;color:#b9c3ca}
.catalogue-toolbar{border:0;align-items:center}.grade-tabs{gap:8px;padding:3px 0 10px;scrollbar-width:none}.grade-tabs::-webkit-scrollbar{display:none}
.grade-tabs button{border:1px solid #303940;border-radius:30px;padding:9px 17px;font-size:14px;background:#13191d;min-height:44px}
.grade-tabs button.active{border-color:#c48552;color:#ffca9d;background:#3a291d}
.filters{padding:18px;background:#13191d;border:1px solid #2b343c;border-radius:16px;gap:12px}
.product-grid{gap:20px}.product-card{border:1px solid #2b343c;border-radius:17px;background:linear-gradient(145deg,#151b20,#101519);padding:0 16px 16px;overflow:hidden}
.product-art{margin:0 -16px 17px;border:0;border-bottom:1px solid #263038;aspect-ratio:1/1.06;background:radial-gradient(ellipse at center,#252b30,#0b0f12 80%)}
.product-preview{padding:41px 24px 20px}
.product-tag{border-radius:7px;border-color:#3c484f;font-size:12px;padding:7px 8px;left:12px;top:12px;background:#111920e8}
.heart{width:38px;height:38px;right:7px;top:7px;border:1px solid #3c454c;background:#141b21d9}
.product-brand{font-size:12px;letter-spacing:1.2px;margin-bottom:7px}.product-card h3{font-size:16px;line-height:1.45;min-height:0}
.product-grade{font-size:12px;color:#8f9da8;margin:10px 0 16px}.product-price-row{border-top:1px solid #303941;flex-direction:column;align-items:stretch;gap:13px;padding-top:14px}
.product-price{font-size:23px}.view-oil{border:1px solid #4a4037;border-radius:9px;min-height:42px;color:#ecc6a7;background:#34271d66;font-size:14px;font-weight:600;text-align:center}.view-oil:hover{background:#49321f}
.catalogue-bottom{border:0}.price-note{max-width:760px;line-height:1.8}.active-filter{border-radius:10px}
.service-section{background:#121719}.service-art{border-radius:22px}.service-art:before{border-radius:10px}.service-steps i{border-radius:8px}
.guide-cards{border:0;gap:18px}.guide-cards article{padding:25px;border:1px solid #2b343a;border-radius:16px;background:#11171b}
.guide-cards article>span{margin-bottom:18px}.guide-cards p,.faqs details p{font-size:16px}
.faq-section{gap:50px}.faqs summary{min-height:64px}.contact-banner{border-radius:20px;background:radial-gradient(ellipse at left,#422d1e88,transparent),#151c21}
footer{background:#080c0f}.detail-art{background:#0a0e11}.detail-copy{background:#151b20}#product-dialog{border-radius:20px;border-color:#434c53}
@media(min-width:1101px){.scene-settings[open]{min-width:620px}}
@media(max-width:1100px){.scene-settings{position:relative;bottom:auto;left:auto;transform:none;align-self:center;order:2;margin:-18px auto 0;max-width:calc(100% - 40px);min-width:320px}.scene-settings .light-controls{margin:0;width:auto}.hero-labels{order:3}.hero-copy{z-index:2}}
@media(max-width:900px){.car-brand-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.car-brand{min-height:143px}.car-brand .car-emblem{width:80px;height:73px}.car-brand .car-logo{width:91px;height:75px}.car-brand>span:last-child{font-size:12px}.brand-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){
 html{scroll-padding-top:20px}body{padding-bottom:0;font-size:16px}.wrap{width:calc(100% - 40px)}.section{padding-block:48px}
 h2,.section-heading h2,.vehicle-finder .section-heading h2{font-size:34px;line-height:1.12;letter-spacing:-1.35px}.section-heading{margin-bottom:25px}.section-heading .eyebrow{font-size:12px;letter-spacing:1.5px;margin-bottom:11px}.section-heading>p{font-size:16px;line-height:1.6;margin-top:15px;max-width:320px}.section-heading .subtle-link{margin-top:17px;font-size:14px}
 .topbar>.wrap{height:29px}.topbar span{font-size:12px}.topbar svg{width:13px;height:13px}.nav{height:70px;gap:8px}.nav .logo{width:171px}.nav-actions{gap:3px}.nav-actions .saved-nav{display:none}.icon-button{width:40px;height:40px;border-radius:10px;background:#151b20;border:1px solid #293139}.icon-button svg{width:20px;height:20px}.mobile-nav{padding:8px 0 20px}.mobile-nav a{padding:13px 12px;border-radius:9px;background:#151b20}
 .hero{padding-top:0}.hero-copy{width:calc(100% - 40px);margin:35px auto 0;text-align:left;max-width:none}.hero-copy .eyebrow{max-width:260px;margin:0 0 16px;font-size:12px;line-height:1.55;letter-spacing:1.45px}.hero-copy .eyebrow>span{display:none}.hero h1{font-size:clamp(38px,10.4vw,59px);line-height:1.04;letter-spacing:-1.7px;position:relative;z-index:1}.hero h1 em{background:linear-gradient(105deg,#f2a465,#ffd2aa);background-clip:text;-webkit-background-clip:text}.hero-copy>p:not(.eyebrow){font-size:16px;line-height:1.65;margin:17px 0 0;max-width:260px;color:#aeb8c1}.mobile-break{display:block}.hero-buttons{margin-top:23px;gap:10px;flex-wrap:nowrap;justify-content:flex-start}.hero-buttons .button{min-width:0;min-height:50px;font-size:14px;font-weight:800;padding:11px 13px;flex:1;white-space:nowrap;border-radius:10px}.hero-buttons .glass{border-color:#51545a;background:#1b2025}
 .hero-tyre{width:135px;left:auto;right:-63px;top:52px;opacity:.65;z-index:0}.hero-scene{margin-top:-20px;margin-left:0;width:100%;order:1}.hero-image{width:100%}.scene-settings{width:calc(100% - 40px);max-width:none;min-width:0;margin:3px auto 0;border-color:#323c43;background:#161d23;border-radius:12px;box-shadow:none}.scene-settings>summary{padding:11px 14px;gap:10px;font-size:12px;min-height:44px}.scene-settings-label{font-size:12px}.scene-settings-hint{font-size:12px}.scene-settings .light-controls{display:grid;grid-template-columns:1fr 1fr;width:auto;max-width:none;padding:8px}.light-setting{font-size:12px;padding:4px 0;gap:6px}.light-setting select{font-size:14px;width:72px;min-height:40px}.light-controls #tyre-motion{font-size:12px;gap:9px;padding:8px;min-height:40px;margin-top:5px;border-top-color:#303941}.hero-labels{margin:17px auto 22px;width:calc(100% - 40px);font-size:12px;letter-spacing:.1px}.hero-labels>span:last-child{text-align:center;color:#8b969f}.hero-labels i{margin-inline:5px}
 .vehicle-finder{padding-block:36px 40px}.vehicle-finder .section-heading{margin-bottom:24px}.vehicle-panel{padding:21px 17px;border-radius:18px}.vehicle-panel-top{padding-bottom:16px;margin-bottom:20px;gap:8px}.vehicle-panel-top strong{font-size:18px}.vehicle-panel-top button{font-size:12px;white-space:nowrap}.vehicle-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:17px 12px}.vehicle-fields label{font-size:14px;line-height:1.4}.vehicle-fields label:nth-child(2),.vehicle-model-field,.vehicle-engine-field,.vehicle-submit{grid-column:1/-1}.vehicle-fields label:first-child{grid-column:1/-1}.vehicle-fields label:nth-child(4){grid-column:1/-1}.vehicle-fields select{height:51px;min-height:51px;font-size:16px;border-radius:9px;padding-left:12px;margin-top:7px;background:#10171d}.vehicle-fields .vehicle-submit{height:52px;font-size:16px;margin-top:4px}.vehicle-status{font-size:14px;line-height:1.6;margin-top:19px;min-height:0}.vehicle-source-note{font-size:12px;line-height:1.75;margin-top:12px;color:#92a0ab}.known-grade{padding-top:19px;margin-top:22px}.known-grade>summary{font-size:14px;color:#c1ccd5}.vehicle-result{padding:22px 17px}.vehicle-help{padding:20px}.finder-result-heading h3{font-size:21px}
 .car-brands-section{padding-block:42px}.car-brands-section .section-heading>p{font-size:14px;line-height:1.6;margin-top:14px}.car-brand-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.car-brand{min-height:137px;padding:13px 5px 14px;border-radius:14px;gap:11px}.car-brand .car-emblem{width:82px;height:76px}.car-brand .car-logo{width:91px;height:76px}.car-brand>span:last-child{font-size:12px;min-height:16px;line-height:1.3;font-weight:600}.car-brand-grid:not(.is-expanded) .car-brand:nth-child(n+7){display:none}.car-brand-grid.is-expanded .car-brand{display:flex}.brand-expand-row{margin-top:19px}.brand-expand-row .button{width:100%;min-width:0;min-height:47px;justify-content:space-between;font-weight:600;padding:10px 17px;background:#151e25}.car-note{text-align:left;margin-top:18px;font-size:12px;line-height:1.7}
 .trust-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-block:22px;width:calc(100% - 24px)}.trust-grid>div,.trust-grid>div:first-child,.trust-grid>div:last-child{flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;gap:8px;padding:0 5px;border:0;border-right:1px solid #303a41}.trust-grid>div:last-child{border:0}.trust-grid svg{width:25px;height:25px}.trust-grid p{display:block;flex:0}.trust-grid strong{font-size:12px;line-height:1.4;font-weight:600}.trust-grid p span{display:none}
 .brands-section{padding-block:42px}.brand-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.brand{padding:14px 8px 12px;min-height:113px;gap:6px;border-radius:12px}.brand-logo{height:55px;max-width:93px}.brand span{font-size:12px;letter-spacing:0;line-height:1.3}
 .catalogue{padding-block:42px}.catalogue .section-heading{margin-bottom:22px}.catalogue-toolbar{padding:0;margin-bottom:16px;gap:8px}.grade-tabs{gap:7px;width:100%;margin-right:-20px;padding:0 20px 6px 0}.grade-tabs button{font-size:14px;padding:8px 15px;min-height:42px}.catalogue-toolbar #product-count{font-size:12px;color:#a7b2bc;padding-top:3px}.filters{grid-template-columns:1fr 1fr;gap:9px;padding:12px;margin-bottom:21px;border-radius:13px}.filters .search-field{grid-column:1/-1}.filters>label:last-child{grid-column:1/-1}.filters input,.filters select{font-size:16px;min-height:46px;padding:9px 11px;background:#10161b}.filters .search-field input{padding-left:38px}.filters .search-field svg{left:11px;top:13px;width:19px;height:19px}
 .product-grid{gap:13px 11px}.product-card{border-radius:14px;padding:0 12px 12px;background:#131a20}.product-art{margin:0 -12px 13px;aspect-ratio:1/1.15}.product-preview{padding:39px 12px 16px}.product-tag{font-size:12px;left:8px;top:9px;padding:6px;border-radius:5px}.heart{width:32px;height:32px;right:5px;top:5px}.heart svg{width:16px;height:16px}.product-brand{font-size:12px;letter-spacing:.7px;margin-bottom:6px}.product-card h3{font-size:14px;line-height:1.45;min-height:0;font-weight:600;letter-spacing:-.15px}.product-grade{font-size:12px;margin:9px 0 12px}.product-price-row{padding-top:12px;gap:11px;flex-direction:column}.product-price{font-size:20px;letter-spacing:-.6px}.product-price small{font-size:12px;margin-right:4px}.view-oil{min-height:39px;font-size:14px;padding:7px;border-radius:8px}.catalogue-bottom{margin-top:25px;padding-top:0;gap:18px}.catalogue-bottom .button{min-height:48px}.price-note{font-size:12px;line-height:1.8;text-align:left;margin-top:20px}
 .service-section{padding-block:42px}.service-grid{gap:26px}.service-art{aspect-ratio:1.42;border-radius:17px}.service-monogram{font-size:145px;top:24px}.service-art-caption{left:27px;bottom:26px}.service-art-caption strong{font-size:29px}.service-mark{bottom:29px;width:37px}.service-copy h2{font-size:34px}.service-copy>p:not(.eyebrow){font-size:16px;margin-top:20px}.service-steps{margin-block:23px;gap:13px}.service-steps>span{font-size:14px;gap:12px}.service-phone{font-size:14px;line-height:1.6}
 .oil-guide{padding-bottom:30px}.guide-cards{gap:12px}.guide-cards article{padding:21px;border-radius:14px}.guide-cards article>span{margin-bottom:12px;font-size:12px}.guide-cards h3{font-size:20px;margin-bottom:10px}.guide-cards p{font-size:16px;line-height:1.65}.faq-section{gap:22px;padding-block:25px 42px}.faq-section h2{font-size:34px}.faqs summary{font-size:16px;padding-block:18px;line-height:1.55}.faqs details p{font-size:16px;line-height:1.7}.contact-banner{padding:25px 22px;border-radius:16px;margin-bottom:40px}.contact-banner h2{font-size:29px}.contact-banner .eyebrow{font-size:12px}.contact-banner .button{margin-top:24px;min-height:50px}
 footer{padding-top:38px}.footer-grid{gap:24px;padding-bottom:32px}.footer-brand .logo{width:193px;margin-bottom:16px}.footer-brand p{font-size:14px}.footer-grid h3{margin:7px 0 18px;font-size:12px;letter-spacing:1.3px}.footer-grid a:not(.logo){font-size:14px;min-height:28px;margin-bottom:7px}.footer-emirates p{font-size:14px}.footer-bottom{font-size:12px;line-height:1.7}.footer-genuine{margin-top:0}
 #toast{bottom:calc(20px + env(safe-area-inset-bottom,0px));border-radius:10px}
 #product-dialog{width:calc(100% - 24px);max-height:88dvh;border-radius:18px}.detail-art{min-height:240px}.detail-art img{height:220px}.detail-copy{padding:25px 21px}.detail-copy h2{font-size:26px}.detail-copy .button{font-size:14px}
}
@media(max-width:370px){.wrap{width:calc(100% - 32px)}.hero-copy{width:calc(100% - 32px)}.hero h1{font-size:38px}.hero-buttons .button{padding-inline:9px;font-size:13px}.nav .logo{width:153px}.hero-tyre{right:-77px}.car-brand-grid{gap:8px}.car-brand{min-height:129px}.car-brand .car-emblem{width:72px;height:69px}.car-brand .car-logo{width:84px;height:69px}.product-grid{gap:11px 9px}.product-card{padding-inline:10px}.product-art{margin-inline:-10px}.product-card h3{font-size:14px;min-height:0}.product-price{font-size:18px}.brand{padding-inline:5px}.brand span{font-size:12px}.scene-settings-hint{display:none}}
@media(prefers-reduced-motion:reduce){.car-brand:hover,.car-brand[aria-pressed=true]{transform:none}}
/* Reveal dependent vehicle choices when they are ready, keeping mobile concise. */
@media(max-width:640px){.vehicle-fields label:has(select:disabled){display:none}#vehicle-form:has(#vehicle-engine:disabled) .vehicle-submit{display:none}}
@media(max-width:640px){.car-brand{min-height:150px}.car-brand>span:last-child{font-size:14px;min-height:36px;display:flex;align-items:center;justify-content:center}.scene-settings-label{font-size:14px}.scene-settings>summary{gap:8px}.scene-settings-hint{display:none}}

/* Compact ten-logo rows apply only to car makes; oil brands retain their original cards. */
.car-brand-grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:10px}
.car-brand-grid .car-brand,.car-brand-grid:not(.is-expanded) .car-brand:nth-child(n){display:flex}
.car-brand{min-height:112px;padding:12px 6px;border-radius:12px;gap:8px}
.car-brand .car-emblem{width:100%;max-width:86px;height:68px;background:transparent;border-radius:0}
.car-brand .car-logo{width:100%;height:68px;mask-image:none;-webkit-mask-image:none}
.car-brand>span:last-child{font-size:12px;min-height:32px;line-height:1.3}
.car-brands-section .section-heading{margin-bottom:23px}
@media(max-width:900px){
 .car-brand-grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
 .car-brand{padding:7px 3px;min-height:76px;border-radius:8px;gap:4px}
 .car-brand .car-emblem,.car-brand .car-logo{height:46px;width:100%;max-width:100%}
 .car-brand>span:last-child{position:absolute;width:1px;height:1px;min-height:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;margin:-1px;border:0}
}
@media(max-width:640px){
 .car-brands-section{padding-block:27px}
 .car-brands-section>.wrap{width:calc(100% - 24px)}
 .car-brands-section .section-heading{margin-bottom:19px}
 .car-brands-section .section-heading .eyebrow{margin-bottom:8px;font-size:12px;letter-spacing:1px}
 .car-brands-section .section-heading h2{font-size:28px;letter-spacing:-1px}
 .car-brands-section .section-heading>p{margin-top:11px;font-size:14px}
 .car-brand-grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
 .car-brand{min-width:0;min-height:45px;padding:5px 1px;border-radius:6px;gap:0;border-color:#303c45}
 .car-brand .car-emblem,.car-brand .car-logo{height:30px;min-height:0;width:100%;max-width:100%}
 .car-brand:hover,.car-brand[aria-pressed=true]{transform:none}
 .car-note{margin-top:14px;font-size:12px}
}

#catalogue-list{scroll-margin-top:90px;outline:none}.catalogue-results{padding:24px;border:1px solid #715236;border-radius:16px;background:#191c1d;margin-bottom:24px}.catalogue-results h3{font-size:24px;line-height:1.3;margin:10px 0}.catalogue-results p{font-size:16px;color:#b2bdc5}.catalogue-results a{display:inline-block;margin-top:12px;color:#eeb27f;font-size:14px}

.filters{scroll-margin-top:90px}

/* Compact ribbons sit at the top of the image; every card reserves identical space. */
.product-ribbons{position:absolute;left:0;top:0;right:0;height:29px;z-index:3;pointer-events:none;display:flex;align-items:flex-start}
.product-ribbons span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:12px;line-height:18px;font-weight:600;padding:5px 17px 5px 10px;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);max-width:100%}
.choice-ribbon{background:#273d49;color:#fff}.choice-ribbon strong{font-weight:700;color:#ffc184}.bestseller-ribbon{background:#e98f39;color:#17130f}
.product-art .product-tag{top:38px}.product-art .heart{top:34px}.product-art .product-preview{padding-top:70px}
.manufacturer-match{font-size:12px;line-height:1.4;color:#b0e7cd;margin:0 0 8px}
@media(max-width:370px){.product-ribbons span{padding-left:7px;padding-right:13px;font-size:12px;gap:3px}}

/* A quieter showroom: automatic motion without explanatory furniture. */
.scene-settings[hidden]{display:none!important}
.hero{padding-bottom:28px}
.pour-copy{position:relative}
.pour-control{position:absolute!important;right:20px;bottom:20px;width:38px;height:38px;display:grid;place-items:center;padding:0!important;border:1px solid #ffffff20!important;border-radius:50%!important;text-decoration:none!important;font-size:15px!important;line-height:1;background:#0b1218!important;color:#b6c3cb!important}
.pour-copy>p:last-of-type{padding-right:36px}
/* Brand accents stay inside the selected collection, preserving the home identity. */
#oils.brand-selected{background:radial-gradient(ellipse at 50% 15%,var(--catalogue-wash),transparent 75%);border-radius:24px}
#oils.brand-selected .product-brand,#oils.brand-selected .eyebrow,#oils.brand-selected .section-heading em{color:var(--accent)}
#oils.brand-selected .grade-tabs button.active{background:var(--catalogue-wash);border-color:var(--accent);color:var(--accent)}
#oils.brand-selected .active-filter{background:var(--catalogue-wash);border-color:var(--accent)}
#oils.brand-selected .product-card{border-color:color-mix(in srgb,var(--accent) 25%,#26323a)}
#oils.brand-selected .view-oil{background:var(--catalogue-solid);color:var(--catalogue-on-solid);border-color:var(--catalogue-solid)}
#oils.brand-selected select:focus,#oils.brand-selected input:focus{outline-color:var(--accent)}
header .logo img{mix-blend-mode:screen}

/* Larger full bottles with a dedicated badge area above the image. */
.product-art{aspect-ratio:1/1.42}
.product-art .product-preview{padding:66px 6px 8px}
.product-art .product-preview img{max-width:none;max-height:none;width:100%;height:100%;object-fit:contain}
@media(max-width:640px){.product-art{aspect-ratio:1/1.52}.product-art .product-preview{padding:64px 3px 6px}}

.genuine-banner{display:flex;align-items:center;justify-content:center;text-align:center;min-height:39px;padding:9px 18px;background:linear-gradient(100deg,#151719,#302116 50%,#151719);border-block:1px solid #e9954d36;color:#e4e9ec;font-size:12px;font-weight:800;letter-spacing:1.8px;line-height:1.5}.genuine-banner strong{color:#f7b16e}.genuine-banner+header{border-top:0}

.product-preview svg.product-photo,.detail-art svg.product-photo{width:100%;height:100%;max-width:100%;display:block;filter:drop-shadow(0 7px 9px #0004)}.detail-art svg.product-photo{min-height:300px}

/* Let Safari's document scroll resize naturally with the keyboard and browser bars.
   A viewport-height inner scroller can remain clipped after an input loses focus. */
@media(max-width:700px){
 html:has(body.app-home){height:auto;overflow:visible}
 body.app-home{height:auto;min-height:100%;overflow:visible;padding:0;display:block}
 body.app-home.dialog-open{overflow:hidden}
 .app-home .site-scroll{min-height:0;overflow:visible;overscroll-behavior-y:auto;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}

/* Product cutouts share the original dark showroom surface. */
.product-art,.brand-product>div{background:radial-gradient(ellipse at center,#20292e,#0b1115 85%)}
.product-art:not(:has(.product-ribbons span)) .product-tag{top:10px}
.product-art:not(:has(.product-ribbons span)) .heart{top:6px}
.product-art:not(:has(.product-ribbons span)) .product-preview{padding-top:66px}
@media(max-width:640px){.product-art:not(:has(.product-ribbons span)) .product-preview{padding-top:64px}}

/* Transparent packshots use one surface regardless of their import source. */
.product-art.legacy-photo,.product-art.black-photo{background:radial-gradient(ellipse at center,#20292e,#0b1115 85%)}

/* Purchase actions connect to the existing store cart. */
.add-to-cart{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;width:100%;text-decoration:none;font-weight:700;line-height:1.25}.product-details-link{display:block;text-align:center;padding:10px 4px;color:#b4c0c8;font-size:14px;line-height:1.4;text-decoration:underline;text-underline-offset:3px}.product-price-row .product-details-link{width:100%}.brand-product .add-to-cart{margin-top:18px;padding:12px 8px;font-size:14px}.detail-copy .add-to-cart{background:#eaa15f;color:#111;border-radius:10px;margin-top:18px}.store-links{display:flex;align-items:center;gap:16px;font-size:14px}.cart-unavailable{display:block;text-align:center;padding:12px;color:#adb8bf}.seo-product-grid .add-to-cart{margin-top:14px;padding:12px 8px;font-size:14px}

.oem-section{scroll-margin-top:20px;border-top:1px solid #303b43}.oem-section[hidden]{display:none}.oem-section h2{font-size:clamp(28px,4vw,42px);margin:12px 0}.oem-note{color:#aebbc4;line-height:1.6;max-width:680px;margin-bottom:24px}.oem-empty{padding:24px;border:1px solid #303b43;border-radius:14px;background:#131b20;margin-bottom:20px}.oem-empty p{font-size:16px;line-height:1.7;margin-bottom:18px}.oem-section .product-grid{margin-bottom:22px}#oem-find-compatible{margin-top:18px}

/* The closing brand promise retains EngineOil's original amber identity. */
.genuine-finale{padding:88px 0 94px;background:radial-gradient(ellipse at 80% 90%,#75431c55,transparent 65%),#0b1013;border-top:1px solid #e89a4d70;border-bottom:1px solid #e89a4d70;text-align:center}
.genuine-finale .eyebrow{color:#efab68;margin-bottom:28px}
.genuine-finale h2{font-size:clamp(38px,7.5vw,104px);line-height:1.04;letter-spacing:-.045em;margin:0;font-weight:850;color:#f3f5f6}
.genuine-finale h2 strong{color:#ffb56d;display:inline-block;text-shadow:0 3px 35px #f0953925}
.oem-reference-card[hidden]{display:none}
.oem-reference-card .oem-photo{height:260px;display:flex;align-items:center;justify-content:center;padding:20px;background:#e9edf0}
.oem-photo img{max-width:100%;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.oem-reference-card .oem-card-body{padding:20px;display:flex;flex-direction:column;flex:1}
.oem-reference-card h3{padding:0;margin:8px 0;font-size:19px;line-height:1.4}
.oem-reference-card .product-brand,.oem-reference-card .product-grade{padding:0;margin:0 0 10px}
.oem-reference-card .button{margin-top:auto;font-size:15px;min-height:48px}
.oem-part{font-size:13px;color:#a7b3ba;overflow-wrap:anywhere;margin:0 0 18px}
@media(max-width:640px){.genuine-finale{padding:58px 0 64px}.genuine-finale .eyebrow{font-size:12px;letter-spacing:.14em}.oem-reference-card .oem-photo{height:200px;padding:12px}.oem-reference-card .oem-card-body{padding:13px}.oem-reference-card h3{font-size:16px}.oem-reference-card .button{font-size:14px;padding:10px 6px}}

.oem-details{margin-top:auto}.oem-details summary{cursor:pointer;list-style:none;text-align:center;display:flex;justify-content:center}.oem-details summary::-webkit-details-marker{display:none}.oem-detail-body{padding-top:14px;font-size:14px;line-height:1.6;color:#bac5cc}.oem-detail-body p{margin:0 0 12px}.oem-detail-body a{color:#ffb56d;text-decoration:underline}.oem-section .product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}@media(max-width:900px){.oem-section .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}

.oem-product-detail{display:grid;grid-template-columns:1fr 1fr;gap:52px;padding:40px 0 80px}.oem-product-detail .oem-photo{height:480px;padding:28px;background:#e9edf0;border-radius:20px}.oem-product-detail h1{font-size:clamp(30px,4vw,50px);line-height:1.12;margin:18px 0 28px}.oem-product-detail dl{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:20px 0;border-block:1px solid #364149}.oem-product-detail dt{color:#a8b4bd}.oem-product-detail dd{margin:0;overflow-wrap:anywhere}.oem-product-detail p{line-height:1.7}.oem-product-detail .product-details-link{display:block;margin-top:18px}@media(max-width:640px){.oem-product-detail{grid-template-columns:1fr;gap:28px}.oem-product-detail .oem-photo{height:330px}}

/* Oil finder: keep the answer and actual products together. */
.vehicle-result{scroll-margin-top:96px}.finder-oil-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.finder-oil-card{min-width:0;padding:16px;border:1px solid #354149;border-radius:16px;background:#111a1f;display:flex;flex-direction:column;gap:12px}.finder-oil-card a{color:inherit;text-decoration:none}.finder-oil-card img{display:block;width:100%;height:180px;object-fit:contain;border-radius:10px}.finder-oil-card span{display:block;color:#f7c28e;font-size:13px;margin-top:12px}.finder-oil-card h4{font-size:16px;line-height:1.4;margin:8px 0}.finder-oil-card>.button{margin-top:auto;min-height:42px;padding:10px;font-size:14px}.finder-match-title small{display:block;font-size:14px;color:#aebac0;font-weight:400;margin-top:8px}.finder-match-note{font-size:14px;color:#bac4c9}.finder-disclaimer{padding:14px!important}.finder-disclaimer p{font-size:13px!important;line-height:1.65!important}.finder-result-heading h3{font-size:20px!important}.vehicle-source-note{display:none}.vehicle-source-details{font-size:13px}.finder-oil-options{margin-bottom:12px}
@media(max-width:640px){.finder-oil-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.finder-oil-card{padding:12px}.finder-oil-card img{height:140px}.finder-oil-card h4{font-size:14px}.finder-oil-card span{font-size:12px}.vehicle-result{padding:18px 14px;scroll-margin-top:80px}}

.vehicle-region-options{grid-column:1/-1;order:4;font-size:14px;color:var(--muted)}.vehicle-region-options>summary{cursor:pointer}.vehicle-region-options label{display:block;margin-top:14px}.vehicle-fields .vehicle-submit{grid-column:1/-1;order:10}.vehicle-engine-field{grid-column:1/-1;order:5}.vehicle-fields>label[hidden]{display:none!important}.vehicle-result .finder-reference>.finder-result-heading{margin-top:0}