/* Ken's battery finder (18 Oct 2026; dropdowns 19 Oct 2026). Site colours: navy #152545, red #cc4444, WhatsApp green #25d366, light #f7f9fc. */
#kens-bf{scroll-margin-top:96px}
#kens-bf .kbf{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-bf p,#kens-bf h3,#kens-bf h4,#kens-bf ol,#kens-bf ul{margin-top:0;margin-bottom:0}
#kens-bf .kbf-loading,#kens-bf .kbf-empty{color:#54607a;margin:.4rem 0}
#kens-bf .kbf-last{margin:0 0 14px;font-size:.92rem;color:#54607a}
#kens-bf .kbf-link{background:none;border:0;padding:0;font:inherit;color:#cc4444;font-weight:600;text-decoration:underline;cursor:pointer}

/* the dropdowns: make / model / year in one row on wider screens, the follow-up questions in rows below */
#kens-bf .kbf-form{margin:0}
#kens-bf .kbf-fields{display:grid;grid-template-columns:1fr;gap:12px}
#kens-bf .kbf-fields--more{margin-top:12px}
#kens-bf .kbf-field{display:flex;flex-direction:column;gap:6px;min-width:0}
#kens-bf .kbf-field label{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#54607a}
#kens-bf .kbf-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-bf .kbf-field select:hover{border-color:#152545}
#kens-bf .kbf-field select:focus-visible{outline:none;border-color:#152545;box-shadow:0 0 0 3px rgba(21,37,69,.18)}
#kens-bf .kbf-field select:disabled{background-color:#f3f5f9;color:#8a94a6;border-color:#dfe4ec;cursor:not-allowed;opacity:1}
/* type-to-filter boxes (make, model, engine): look like the dropdowns, list opens below */
#kens-bf .kbf-combo{position:relative}
#kens-bf .kbf-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-bf .kbf-combo__input::placeholder{color:#6b7689;opacity:1}
#kens-bf .kbf-combo__input:hover{border-color:#152545}
#kens-bf .kbf-combo__input:focus{outline:none;border-color:#152545;box-shadow:0 0 0 3px rgba(21,37,69,.18)}
#kens-bf .kbf-combo__input:disabled{background:#f3f5f9;color:#8a94a6;border-color:#dfe4ec;cursor:not-allowed}
#kens-bf .kbf-combo__input:disabled::placeholder{color:#8a94a6}
#kens-bf .kbf-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-bf .kbf-combo.is-open .kbf-combo__arrow{transform:rotate(180deg)}
#kens-bf .kbf-combo.is-up .kbf-combo__list{top:auto;bottom:calc(100% + 4px)}
#kens-bf .kbf-combo__input:disabled+.kbf-combo__arrow{opacity:.45;cursor:not-allowed}
#kens-bf .kbf-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-bf .kbf-combo__group{margin:0;padding:8px 14px 4px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#cc4444}
#kens-bf .kbf-combo__opt{margin:0;padding:10px 14px;font-size:16px;line-height:1.3;cursor:pointer}
#kens-bf .kbf-combo__opt.is-active{background:#eef3fb}
#kens-bf .kbf-combo__opt.is-selected{font-weight:700}
#kens-bf .kbf-combo__opt.is-selected::after{content:" ✓";color:#1f7a4d}
#kens-bf .kbf-combo__opt mark{background:none;color:#cc4444;font-weight:700;padding:0}
#kens-bf .kbf-combo__none{margin:0;padding:10px 14px;color:#6b7689;font-size:.92rem}
#kens-bf .kbf-combo__sub{margin-left:6px;padding:1px 7px;border-radius:6px;background:#eef1f6;color:#54607a;font-size:.78rem;font-weight:600;white-space:nowrap}
/* the next one to answer */
#kens-bf .kbf-field--ask select,#kens-bf .kbf-field--ask .kbf-combo__input:not(:focus){border-color:#152545;box-shadow:0 0 0 3px rgba(204,68,68,.16)}
#kens-bf .kbf-field--ask label{color:#cc4444}
#kens-bf .kbf-qhint{margin:10px 0 0;color:#54607a;font-size:.9rem;max-width:72ch}
/* phones: the short follow-ups two to a row; the engine and the battery check (long choices) take the full width */
#kens-bf .kbf-fields--more{grid-template-columns:repeat(2,minmax(0,1fr))}
#kens-bf .kbf-fields--more .kbf-field[data-field="eng"],#kens-bf .kbf-fields--more .kbf-field[data-field="pick"]{grid-column:1/-1}
@media (min-width:640px){
  #kens-bf .kbf-fields,#kens-bf .kbf-fields--more{grid-template-columns:repeat(3,minmax(0,1fr))}
  #kens-bf .kbf-fields--more .kbf-field[data-field="eng"],#kens-bf .kbf-fields--more .kbf-field[data-field="pick"]{grid-column:span 2}
}
@media (min-width:782px){#kens-bf .kbf{padding:24px}}
/* 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-bf .kbf{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-bf .kbf{padding:14px}}
/* the still outline in the page until the finder has loaded (same size as the real dropdowns) */
#kens-bf .kbf-skel__label{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#54607a;line-height:1.5}
#kens-bf .kbf-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}

/* help and results */
#kens-bf .kbf-help{margin:16px 0 0;padding-top:12px;border-top:1px solid #eef1f6;color:#54607a;font-size:.92rem}
#kens-bf .kbf-help a{color:#1f8a4c;font-weight:700}
#kens-bf .kbf-out:not(:empty){margin-top:18px;padding-top:18px;border-top:1px solid #eef1f6}
#kens-bf .kbf-res__car{margin:0 0 6px;color:#54607a;font-size:.92rem}
#kens-bf .kbf-res__car strong{color:#152545}
#kens-bf .kbf-res__title{margin:0 0 14px;font-size:1.3rem;line-height:1.3;color:#152545;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#kens-bf .kbf-res__text{margin:0 0 14px;color:#3b4558}
#kens-bf .kbf-res__cta{max-width:440px}
#kens-bf .kbf-tag{display:inline-block;border-radius:6px;padding:2px 8px;font-size:.78rem;font-weight:700;letter-spacing:.02em;vertical-align:middle}
#kens-bf .kbf-tag--W{background:#eef1f6;color:#3b4558}
#kens-bf .kbf-tag--E{background:#e6f4ec;color:#1f7a4d}
#kens-bf .kbf-tag--A{background:#e8eefb;color:#1d4fa8}
#kens-bf .kbf-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px}
#kens-bf .kbf-card{position:relative;display:flex;flex-direction:column;gap:4px;border:1.5px solid #e3e8f1;border-radius:14px;padding:14px;background:#fff}
#kens-bf .kbf-card--rec{border-color:#152545;box-shadow:0 4px 18px rgba(21,37,69,.10)}
#kens-bf .kbf-card__badge{align-self:flex-start;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:#152545;border-radius:999px;padding:3px 10px}
#kens-bf .kbf-card:not(.kbf-card--rec) .kbf-card__badge{background:#eef1f6;color:#3b4558}
#kens-bf .kbf-card__img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;margin:6px 0 2px}
#kens-bf .kbf-card__img--none{display:flex;align-items:center;justify-content:center;aspect-ratio:auto;height:64px;background:#f7f9fc;border-radius:10px;font-size:1.4rem;font-weight:800;color:#c9d2e0}
#kens-bf .kbf-card__name{margin:4px 0 0;font-size:1.02rem;line-height:1.3;color:#152545}
#kens-bf .kbf-card__also{font-weight:400;font-size:.85rem;color:#6b7689}
#kens-bf .kbf-card__spec{margin:0;color:#54607a;font-size:.88rem;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#kens-bf .kbf-stock{margin:4px 0 0;font-size:.86rem;font-weight:600}
#kens-bf .kbf-stock--in{color:#1f7a4d}
#kens-bf .kbf-stock--order{color:#9a6700}
/* 19 Oct 2026: fitted or collect, two price buttons; the chosen one sets the WhatsApp message */
#kens-bf .kbf-price{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 2px}
#kens-bf .kbf-price__opt{display:flex;flex-direction:column;align-items:flex-start;min-height:44px;margin:0;padding:8px 10px;border:1.5px solid #d5dce8;border-radius:10px;background:#fff;color:#152545;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
#kens-bf .kbf-price__opt:hover{border-color:#152545}
#kens-bf .kbf-price__opt.is-on{border-color:#cc4444;background:#fff7f7;box-shadow:0 0 0 2px rgba(204,68,68,.14)}
#kens-bf .kbf-price__opt:focus-visible{outline:3px solid #152545;outline-offset:2px}
#kens-bf .kbf-price__label{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#54607a}
#kens-bf .kbf-price__opt.is-on .kbf-price__label{color:#cc4444}
#kens-bf .kbf-price__amt{font-size:1.35rem;line-height:1.25;color:#152545}
#kens-bf .kbf-price__opt.is-on .kbf-price__amt{color:#cc4444}
#kens-bf .kbf-price__sub{font-size:.78rem;line-height:1.3;color:#6b7689}
/* 19 Oct 2026: "More info" on each card (size, dimensions, terminals ...) */
#kens-bf .kbf-info{margin:8px 0 0;border-top:1px solid #eef1f6;padding-top:2px}
#kens-bf .kbf-info summary{display:flex;align-items:center;gap:8px;min-height:40px;cursor:pointer;list-style:none;font-size:.9rem;font-weight:700;color:#152545}
#kens-bf .kbf-info summary::-webkit-details-marker{display:none}
#kens-bf .kbf-info summary::after{content:"";width:7px;height:7px;border-right:2px solid #152545;border-bottom:2px solid #152545;transform:rotate(45deg);margin-top:-4px}
#kens-bf .kbf-info[open] summary::after{transform:rotate(225deg);margin-top:3px}
#kens-bf .kbf-info summary:focus-visible{outline:3px solid #152545;outline-offset:2px;border-radius:6px}
#kens-bf .kbf-info__list{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:2px 0 4px;font-size:.86rem;line-height:1.35}
#kens-bf .kbf-info__list dt{margin:0;color:#6b7689}
#kens-bf .kbf-info__list dd{margin:0;color:#152545;font-weight:600}
#kens-bf .kbf-info__list small{font-weight:400;color:#8a94a6;font-size:.78rem}
#kens-bf .kbf-info__feat{margin:8px 0 4px!important;padding-left:1.1rem;font-size:.84rem;color:#3b4558}
#kens-bf .kbf-info__feat li{margin:2px 0}
#kens-bf .kbf-card__imgnote{align-self:flex-end;margin-top:-6px;font-size:.7rem;color:#8a94a6}
#kens-bf .kbf-card__price{margin:6px 0 0;color:#152545;font-size:.95rem}
#kens-bf .kbf-card__price strong{font-size:1.6rem;color:#cc4444;margin-right:2px}
#kens-bf .kbf-card__split{margin:0;color:#6b7689;font-size:.82rem}
#kens-bf .kbf-card__cta{display:flex;gap:8px;margin-top:10px}
#kens-bf .kbf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:9px;font-weight:700;font-size:.95rem;text-decoration:none!important;flex:1 1 auto}
#kens-bf .kbf-btn--wa{background:#25d366;color:#08301b!important;text-align:center;line-height:1.2;padding:6px 14px}
#kens-bf .kbf-btn--call{flex:0 0 auto;border:2px solid #152545;color:#152545!important;background:#fff}
#kens-bf .kbf-btn:focus-visible,#kens-bf .kbf-link:focus-visible{outline:3px solid #152545;outline-offset:2px}
#kens-bf .kbf-notes{margin:14px 0 0;padding-left:1.1rem;color:#3b4558;font-size:.9rem}
#kens-bf .kbf-notes li{margin:3px 0}
#kens-bf .kbf-paynote{margin:12px 0 0;font-size:.9rem;color:#54607a}
#kens-bf .kbf-res__none{margin:0;color:#3b4558}
@media (prefers-reduced-motion:reduce){#kens-bf .kbf-field select{transition:none}}

/* the battery sizes table on the battery page (outside the finder box; this file only loads on finder pages) */
.kens-sizetable table{width:100%;border-collapse:collapse;font-size:.95rem;table-layout:auto}
.kens-sizetable th,.kens-sizetable td{padding:10px 8px;border-bottom:1px solid #e3e8f1;text-align:left;vertical-align:top;white-space:normal}
.kens-sizetable th{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#6b7689;border-bottom:2px solid #d5dce8}
.kens-sizetable td:first-child{font-weight:700;color:#152545;white-space:nowrap}
.kens-sizetable td:nth-child(2){color:#3b4558}
.kens-sizetable td:last-child,.kens-sizetable th:last-child{text-align:right;white-space:nowrap}
.kens-sizetable td:last-child{font-weight:700;color:#cc4444}
@media (max-width:600px){.kens-sizetable table{font-size:.86rem}.kens-sizetable th,.kens-sizetable td{padding:8px 5px}}
.kens-sizetable th,.kens-sizetable td{border:0!important;border-bottom:1px solid #e3e8f1!important}
@media (max-width:600px){
.kens-sizetable thead{display:none}
.kens-sizetable tbody tr{display:grid;grid-template-columns:1fr auto auto;gap:2px 14px;padding:10px 2px;border-bottom:1px solid #e3e8f1}
.kens-sizetable tbody td{border:0!important;padding:0!important;font-size:.95rem}
.kens-sizetable tbody td:nth-child(2){grid-column:1 / -1;grid-row:2;font-size:.86rem;color:#54607a}
.kens-sizetable tbody td[data-label]::before{content:attr(data-label) " ";font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b7689}
}
.kens-sizetable td[data-label="Collect"]{color:#152545!important}

/* 19 Oct 2026 (conversion check): computers see the shop number on the call button and both buttons full width; phones
   get a shorter battery photo so the price and the reserve button fit on one screen with the answer */
#kens-bf .kbf-call__num{display:none}
@media (min-width:900px){#kens-bf .kbf-card__cta{flex-direction:column}#kens-bf .kbf-call__num{display:inline;margin-left:.3em}}
@media (min-width:640px){#kens-bf .kbf-card__img{max-height:200px}}
/* phones: photo beside the name, so the answer, the prices and the reserve button fit on one screen */
@media (max-width:639px){
#kens-bf .kbf-card{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:12px;row-gap:4px;align-items:start}
#kens-bf .kbf-card>*{grid-column:1/-1}
#kens-bf .kbf-card__badge{justify-self:start}
#kens-bf .kbf-card__img{grid-column:1;grid-row:2/5;width:96px;margin:2px 0 0;align-self:center}
#kens-bf .kbf-card__img--none{height:72px}
#kens-bf .kbf-card__imgnote{grid-column:1;grid-row:5;align-self:start;justify-self:center;margin:0}
#kens-bf .kbf-card__name{grid-column:2;grid-row:2;margin:0}
#kens-bf .kbf-card__spec{grid-column:2;grid-row:3}
#kens-bf .kbf-card .kbf-stock{grid-column:2;grid-row:4;margin:0}
}

/* 19 Oct 2026 evening (Moiz's answers): warranty line on every card, "ask us" cards without a price, search by size */
#kens-bf .kbf-card__warranty{margin:2px 0 0;font-size:.82rem;color:#1f7a4d;font-weight:600}
#kens-bf .kbf-stock--ask{color:#4a5568}
#kens-bf .kbf-card__askprice{margin:8px 0 2px;padding:10px 12px;background:#f7f9fc;border-radius:10px;font-size:.9rem;color:#3b4558}
#kens-bf .kbf-bysize{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 0;padding-top:12px;border-top:1px dashed #e3e8f1}
#kens-bf .kbf-bysize__label{font-weight:500;color:#54607a;font-size:.9rem}
#kens-bf .kbf-field--inline{flex:0 1 180px;min-width:150px}
#kens-bf .kbf-bysize[hidden]{display:none}
#kens-bf .kbf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:639px){#kens-bf .kbf-card .kbf-card__warranty{grid-column:2;grid-row:5;margin:0}#kens-bf .kbf-card__img{grid-row:2/6}#kens-bf .kbf-card__imgnote{grid-row:6}}
/* the size box is a plain text box: no chevron, a shorter height, the list only appears while typing */
#kens-bf .kbf-field--inline .kbf-combo__arrow{display:none}
#kens-bf .kbf-field--inline .kbf-combo__input{height:40px;padding:0 12px;font-size:15px}

/* 20 Oct 2026: the page's "batteries by make" cards (outside the finder, same stylesheet) */
.kens-makes__grid{gap:14px}
.kens-make{background:#fff;border:1px solid #e3e8f1;border-radius:12px;padding:16px 18px;display:flex;flex-direction:column}
.kens-make h3{margin:0 0 6px;font-size:1.1rem;color:#152545}
.kens-make p{margin:0 0 8px;font-size:.95rem;line-height:1.55}
.kens-make .kens-make__link{margin:auto 0 0!important;padding-top:6px}
.kens-make .kens-make__link a{font-weight:700;color:#cc4444;text-decoration:none}
.kens-make .kens-make__link a::after{content:" \2192"}
.kens-make .kens-make__link a:hover,.kens-make .kens-make__link a:focus-visible{text-decoration:underline}

.kens-make > .wp-block-group__inner-container{display:flex;flex-direction:column;flex:1}
#kens-bf .kbf-card__page{margin:6px 0 0;font-size:.9rem}#kens-bf .kbf-card__page a{font-weight:700;color:#152545}

/* 20 Oct 2026: "All our car batteries, by size" on the battery page */
.kens-makes .kens-models__h{margin:22px 0 10px;font-size:1.1rem;color:#152545}
.kens-models{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.kens-models a{display:inline-block;padding:7px 13px;border:1px solid #d5ddea;border-radius:999px;background:#fff;color:#152545;font-weight:600;font-size:.92rem;line-height:1.3;text-decoration:none}
.kens-models a:hover,.kens-models a:focus-visible{border-color:#cc4444;color:#cc4444}
.kens-allbat{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(18rem,100%),1fr));gap:10px;align-items:start}
.kens-allbat__size{border:1px solid #e3e8f1;border-radius:12px;background:#fff;padding:10px 14px}
.kens-allbat__size summary{cursor:pointer;font-weight:700;color:#152545;list-style:none;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.kens-allbat__size summary::-webkit-details-marker{display:none}
.kens-allbat__size summary::before{content:"\25B8";color:#cc4444;transition:transform .15s}.kens-allbat__size[open] summary::before{transform:rotate(90deg)}
.kens-allbat__size summary span{font-weight:500;font-size:.88rem;color:#54607a}
.kens-allbat__size ul{margin:10px 0 2px;padding:0;list-style:none;display:grid;gap:8px}
.kens-allbat__size li a{font-weight:700;color:#152545}.kens-allbat__meta{display:block;font-size:.85rem;color:#54607a}
@media (prefers-reduced-motion:reduce){.kens-allbat__size summary::before{transition:none}}
#kens-bf .kbf-card__name a{color:inherit;text-decoration:underline;text-decoration-color:#c9d2e0;text-underline-offset:3px}#kens-bf .kbf-card__name a:hover,#kens-bf .kbf-card__name a:focus-visible{text-decoration-color:#cc4444}


/* 20 Oct 2026 (Qusay: "a bit of up and down" between the battery cards): the photo and its "Range photo" note are one
   block (the note sits on the photo), the prices are one block, and every card has the same nine parts - badge, photo,
   name, spec, stock, warranty, prices, buttons, More info. From 640px wide each card's parts share the row lines of the
   cards beside it (CSS subgrid), so names, stock lines, prices and buttons line up whatever the text length. */
#kens-bf .kbf-card__media{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
#kens-bf .kbf-card__media .kbf-card__imgnote{position:absolute;right:6px;bottom:6px;margin:0;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid #e3e8f1;font-size:.68rem;line-height:1.5;color:#54607a}
#kens-bf .kbf-card__buy{display:flex;flex-direction:column;min-width:0}
#kens-bf .kbf-card__cta{margin-top:10px}
#kens-bf .kbf-card .kbf-info{margin:4px 0 0}
@media (min-width:640px){
  @supports (grid-template-rows:subgrid){
    #kens-bf .kbf-card{display:grid;grid-template-rows:subgrid;grid-row:span 9;row-gap:4px;align-content:start}
    #kens-bf .kbf-card__badge{justify-self:start;align-self:start}
    #kens-bf .kbf-card__cta{align-self:end}
  }
}
/* phones: the photo block keeps the left column beside the name; the note goes under the small photo */
@media (max-width:639px){
  #kens-bf .kbf-card__media{grid-column:1;grid-row:2/6;flex-direction:column;align-self:center;gap:2px;width:96px}
  #kens-bf .kbf-card__media .kbf-card__img{width:96px;margin:2px 0 0}
  #kens-bf .kbf-card__media .kbf-card__imgnote{position:static;padding:0;border:0;background:none;font-size:.66rem}
}