/* Ken's oil finder (18 Oct 2026). Scoped to #kens-of so the theme can't override it. */
#kens-of{scroll-margin-top:96px}
#kens-of .kof{background:#fff;border:1px solid #e3e8f1;border-radius:16px;padding:18px;box-shadow:0 6px 24px rgba(21,37,69,.08);color:#152545;font-size:16px;line-height:1.5}
#kens-of p,#kens-of h3,#kens-of h4{margin-top:0;margin-bottom:0}
#kens-of .kof-empty{color:#54607a}
/* 19 Oct 2026: the dropdowns (same look as the battery finder): grade / approval / make in one row on wider screens */
#kens-of .kof-form{margin:0}
#kens-of .kof-fields{display:grid;grid-template-columns:1fr;gap:12px}
#kens-of .kof-field{display:flex;flex-direction:column;gap:6px;min-width:0}
#kens-of .kof-field label,#kens-of .kof-skel__label{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#54607a;line-height:1.5}
#kens-of .kof-field select{display:block;width:100%;min-width:0;height:52px;margin:0;padding:0 40px 0 14px;box-sizing:border-box;font:inherit;font-size:16px;color:#152545;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23152545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/13px 9px;
  border:1.5px solid #c9d2e0;border-radius:10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;transition:border-color .15s,box-shadow .15s}
#kens-of .kof-field select:hover{border-color:#152545}
#kens-of .kof-field select:focus-visible{outline:none;border-color:#152545;box-shadow:0 0 0 3px rgba(21,37,69,.18)}
/* type-to-filter boxes (make, model, engine): look like the dropdowns, list opens below */
#kens-of .kof-combo{position:relative}
#kens-of .kof-combo__input{display:block;width:100%;min-width:0;height:52px;margin:0;padding:0 44px 0 14px;box-sizing:border-box;font:inherit;font-size:16px;color:#152545;background:#fff;
  border:1.5px solid #c9d2e0;border-radius:10px;-webkit-appearance:none;appearance:none;text-overflow:ellipsis;transition:border-color .15s,box-shadow .15s}
#kens-of .kof-combo__input::placeholder{color:#6b7689;opacity:1}
#kens-of .kof-combo__input:hover{border-color:#152545}
#kens-of .kof-combo__input:focus{outline:none;border-color:#152545;box-shadow:0 0 0 3px rgba(21,37,69,.18)}
#kens-of .kof-combo__input:disabled{background:#f3f5f9;color:#8a94a6;border-color:#dfe4ec;cursor:not-allowed}
#kens-of .kof-combo__input:disabled::placeholder{color:#8a94a6}
#kens-of .kof-combo__arrow{position:absolute;top:2px;right:2px;bottom:2px;width:40px;border-radius:0 8px 8px 0;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23152545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/13px 9px}
#kens-of .kof-combo.is-open .kof-combo__arrow{transform:rotate(180deg)}
#kens-of .kof-combo.is-up .kof-combo__list{top:auto;bottom:calc(100% + 4px)}
#kens-of .kof-combo__input:disabled+.kof-combo__arrow{opacity:.45;cursor:not-allowed}
#kens-of .kof-combo__list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;margin:0;padding:6px 0;list-style:none;background:#fff;color:#152545;
  border:1.5px solid #152545;border-radius:10px;box-shadow:0 14px 30px rgba(21,37,69,.2);max-height:min(320px,46vh);overflow-y:auto;overscroll-behavior:contain;text-align:left}
#kens-of .kof-combo__group{margin:0;padding:8px 14px 4px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#cc4444}
#kens-of .kof-combo__opt{margin:0;padding:10px 14px;font-size:16px;line-height:1.3;cursor:pointer}
#kens-of .kof-combo__opt.is-active{background:#eef3fb}
#kens-of .kof-combo__opt.is-selected{font-weight:700}
#kens-of .kof-combo__opt.is-selected::after{content:" ✓";color:#1f7a4d}
#kens-of .kof-combo__opt mark{background:none;color:#cc4444;font-weight:700;padding:0}
#kens-of .kof-combo__none{margin:0;padding:10px 14px;color:#6b7689;font-size:.92rem}
#kens-of .kof-combo__sub{margin-left:6px;padding:1px 7px;border-radius:6px;background:#eef1f6;color:#54607a;font-size:.78rem;font-weight:600;white-space:nowrap}
#kens-of .kof-field--ask .kof-combo__input:not(:focus){border-color:#152545;box-shadow:0 0 0 3px rgba(204,68,68,.16)}
#kens-of .kof-field--ask select{border-color:#152545;box-shadow:0 0 0 3px rgba(204,68,68,.16)}
#kens-of .kof-field--ask label{color:#cc4444}
#kens-of .kof-qhint{margin:10px 0 0;color:#54607a;font-size:.9rem;max-width:72ch}
#kens-of .kof-skel__box{display:flex;align-items:center;height:52px;padding:0 40px 0 14px;box-sizing:border-box;border:1.5px solid #dfe4ec;border-radius:10px;color:#8a94a6;font-size:16px;white-space:nowrap;overflow:hidden;
  background:#f3f5f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23152545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/13px 9px}
#kens-of .kof-help{margin:16px 0 0;padding-top:12px;border-top:1px solid #eef1f6;color:#54607a;font-size:.92rem}
#kens-of .kof-help a{color:#1f8a4c;font-weight:700}
#kens-of .kof-out:not(:empty){margin-top:18px;padding-top:18px;border-top:1px solid #eef1f6}
#kens-of .kof-res__title{font-size:1.15rem;line-height:1.3;margin:0 0 8px}
#kens-of .kof-res__text a{color:#1f8a4c;font-weight:700}
#kens-of .kof-res__nudge{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#fdf3f3;color:#7a2a2a;font-size:.92rem}
#kens-of .kof-btn:focus-visible,#kens-of .kof-link:focus-visible{outline:3px solid #152545;outline-offset:2px}
@media (min-width:640px){#kens-of .kof-fields{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){#kens-of .kof-field select{transition:none}}
#kens-of .kof-link{background:none;border:0;padding:0;font:inherit;color:#cc4444;font-weight:600;text-decoration:underline;cursor:pointer}
#kens-of .kof-note{margin-top:14px;color:#54607a;font-size:.9rem}
#kens-of .kof-note a{color:#1f8a4c;font-weight:700}
#kens-of .kof-res__line{margin-bottom:12px;color:#3b4558}
#kens-of .kof-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px}
#kens-of .kof-card{display:flex;gap:12px;border:1.5px solid #e3e8f1;border-radius:14px;padding:12px;background:#fff}
#kens-of .kof-card__img{flex:0 0 96px;width:96px;height:96px;object-fit:contain;border-radius:8px;background:#fff}
#kens-of .kof-card__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
#kens-of .kof-card__name{font-size:1rem;line-height:1.3}
#kens-of .kof-card__name a{color:#152545;text-decoration:none}
#kens-of .kof-card__name a:hover{text-decoration:underline}
#kens-of .kof-card__grade{color:#54607a;font-size:.86rem}
#kens-of .kof-tags__label{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b7689}
#kens-of .kof-tags{display:flex;flex-wrap:wrap;gap:4px}
#kens-of .kof-tag{font-size:.74rem;background:#eef1f6;color:#3b4558;border-radius:6px;padding:2px 7px;font-weight:600}
#kens-of .kof-tag--hit{background:#e6f4ec;color:#1f7a4d}
#kens-of .kof-card__cta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
#kens-of .kof-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:4px 12px;border-radius:9px;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;text-decoration:none!important;line-height:1.2}
#kens-of .kof-btn--add{background:#cc4444;color:#fff;border:0}
#kens-of .kof-btn--add:disabled{opacity:.7}
#kens-of .kof-btn__sub{font-weight:400;font-size:.74rem;opacity:.9}
#kens-of .kof-btn--out{border:1.5px solid #c9d2e0;color:#54607a!important;background:#fff}
#kens-of .kof-more{margin-top:14px;text-align:center}
#kens-of .kof-btn--more{border:2px solid #152545;color:#152545;background:#fff;padding:8px 18px}
#kens-of .kof-btn--more:hover,#kens-of .kof-btn--more:focus-visible{background:#152545;color:#fff}
#kens-of .kof-added{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:#1f7a4d}
#kens-of .kof-added a{color:#152545}
@media (min-width:782px){#kens-of .kof{padding:24px}}
@media (max-width:480px){#kens-of .kof-card__img{flex-basis:72px;width:72px;height:72px}}
/* the page's "Shop by grade" product grids: on phones each grade is one swipeable row (a third card peeks in to show it
   scrolls) instead of one product per row, which made 34 oils some 19,000 px of scrolling */
.kens-oilshop .kens-swipe-hint{display:none}
@media (max-width:767px){
.kens-oilshop ul.products.grid-cols{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:44%;column-gap:12px;row-gap:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:2px 2px 12px;margin-bottom:8px}
.kens-oilshop ul.products.grid-cols>li.product{scroll-snap-align:start;width:auto;margin:0;padding:4px}
.kens-oilshop ul.products.grid-cols>li.product .product-details{padding:8px 6px 6px}
/* Add to basket always on show (Kadence only reveals it on hover, which a phone does not have); one class more than
   Kadence's own .woocommerce ul.products.woo-archive-action-on-hover li.product rules, which load after this file */
.kens-oilshop ul.products.woo-archive-action-on-hover.grid-cols>li.product .product-action-wrap{padding:0 6px 8px;position:static;opacity:1}
.kens-oilshop ul.products.woo-archive-action-on-hover.grid-cols>li.product .product-action-wrap .button{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;padding:8px 4px;border-radius:8px;background:#cc4444;color:#fff;text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:700;line-height:1.2;white-space:nowrap}
.kens-oilshop ul.products.woo-archive-action-on-hover.grid-cols>li.product .product-action-wrap .button .kadence-arrow-right-alt-svg{display:none}
.kens-oilshop ul.products.woo-archive-action-on-hover.grid-cols>li.product:hover .entry-content-wrap,
.kens-oilshop ul.products.woo-archive-action-on-hover.grid-cols>li.product:focus-within .entry-content-wrap{transform:none}
.kens-oilshop ul.products.grid-cols>li.product .woocommerce-loop-product__title{font-size:.86rem;line-height:1.3}
.kens-oilshop .kens-swipe-hint{display:block;font-size:.85rem;color:#54607a;margin:0 0 6px}
}

/* 19 Oct 2026 (Qusay): the finder sits in the page's top banner, straight under the heading; the banner (a cover block)
   clips what overflows it, which would cut off an open list near its bottom edge, so it may overflow here */
.kens-hero-finder-cover{overflow:visible!important}
.kens-hero-finder{width:100%;max-width:1080px;margin:1.3rem 0 1.1rem;text-align:left}
.kens-hero-finder #kens-of .kof{box-shadow:0 14px 40px rgba(0,0,0,.28);border-color:transparent}
@media (max-width:639px){.kens-hero-finder{margin:1rem 0 .9rem}.kens-hero-finder #kens-of .kof{padding:14px}}
/* 23 Oct 2026 (120bh): two rows - find by car (make, model, engine), or by the oil (grade, approval) */
#kens-of .kof-row{margin:0 0 8px;font-size:.95rem;font-weight:700;color:#152545}
#kens-of .kof-row--or{margin-top:16px;padding-top:14px;border-top:1px solid #eef1f6}
#kens-of .kof-field select:disabled{background-color:#f3f5f9;color:#8a94a6;border-color:#dfe4ec;cursor:not-allowed}
#kens-of .kof-qhint a{color:#1f8a4c;font-weight:700}
#kens-of .kof-qhint strong{color:#152545}
#kens-of .kof-qhint a.kof-page{display:inline-block;margin-left:2px;color:#152545;text-decoration:underline;text-underline-offset:2px}
#kens-of .kof-qhint a.kof-page::after{content:" \2192"}
@media (min-width:640px){#kens-of .kof-fields--oil{grid-template-columns:repeat(2,minmax(0,1fr))}}