/* anthe-fit.css - the sizing pass of 2026-10-19.
   Owner: "analyse the mobile version ... do not change font or color, only the sizing to make it more screen friendly be it
   mobile or web". Loaded LAST (application/views/website/inc/header.php), so it wins over the template without editing it.
   SIZES, SPACING AND TAP AREAS ONLY - no typeface, no colour, no font size. Remove the <link> to undo it all.
   Rules: touch targets >= 44x44 with >= 8px between (ui-ux-pro-max ux: Touch Target Size / Touch Spacing / Touch Friendly),
   no content wider than the screen (Horizontal Scroll), space reserved for photos (Content Jumping), zoom allowed (viewport). */

/* ---- 1. Catalogue cards, every width ------------------------------------------------------------------------------------
   Measured before: the photo had a fixed 226px height and used about half the card (145x165 in a 267px card on desktop),
   the title box was fixed at 75px and the part-number box at 76px - 3 of 16 cards cut their last part number.
   Now: the photo is a square that fills the card (contain - a part's edges are never cropped, its space is held before it
   loads), the title and the part numbers grow with their text, and the part numbers sit at the bottom so a row lines up. */
.car-block-four { display: flex; }
.car-block-four > .inner-box { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.car-block-four .inner-box .image-box { flex: 0 0 auto; padding: 12px 12px 0; }
.car-block-four .inner-box .image-box .image { height: auto !important; margin: 0; }
/* the catalogue page's own style held the photo at 60% with 20px on top (!important, 4 classes) - this one is stronger */
.car-block-four .inner-box .image-box figure.image img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1;
    object-fit: contain; padding: 0 !important; margin: 0 auto !important; }
.car-block-four .inner-box .content-box { flex: 1 0 auto; display: flex; flex-direction: column; height: auto !important; }
.car-block-four .inner-box .content-box > * { flex-shrink: 0; }
.car-block-four .inner-box .content-box h6.title { height: auto !important; }
.car-block-four .inner-box .content-box .btn-box { height: auto !important; margin-top: auto; padding-top: 8px; }
.car-block-four .inner-box .content-box .btn-box span { display: block; line-height: 1.5 !important; overflow-wrap: anywhere; }

/* ---- 2. Catalogue cards on phones and tablets (< 992px): photo LEFT, name and part numbers RIGHT ---------------------------
   Measured before at 375px: one card per row, 369x405 - a buyer saw about two parts per screen. Side by side the card is
   about 150px tall at the SAME font sizes (five parts per screen). */
@media (max-width: 991.98px) {
    .car-block-four { margin-bottom: 12px; }
    .car-block-four > .inner-box { flex-direction: row; align-items: center; }
    .car-block-four .inner-box .image-box { flex: 0 0 128px; width: 128px; padding: 10px; }
    .car-block-four .inner-box .content-box { flex: 1 1 0%; align-self: stretch; justify-content: center; min-width: 0; padding: 14px 16px 12px 6px !important; }
    .car-block-four .inner-box .content-box h6.title { margin-bottom: 6px; }
    .car-block-four .inner-box .content-box .btn-box { margin-top: 0; padding-top: 4px; }
}

/* ---- 3. Tap areas on touch screens (< 992px) ------------------------------------------------------------------------------
   Measured before: the menu button 24x11 (the ONLY way into the menu on a phone), footer links 28px tall with 7px between,
   breadcrumb links 22px, "Show Categories" 28px, the category ticks 28px. All to >= 44px; the icons and text stay as they are. */
@media (max-width: 991.98px) {
    footer a { display: inline-flex; align-items: center; min-height: 44px; }
    .breadcrumb li { display: inline-flex; align-items: center; min-height: 44px; }   /* the whole line, so Home and the page name stay level */
    .breadcrumb li::before { top: 50% !important; transform: translateY(-50%); }       /* the "/" was pinned to the top (top: 0) - now on the line */
    .breadcrumb li a { display: inline-flex; align-items: center; min-height: 44px; }
    .sidebar-handle { min-height: 44px; display: flex; align-items: center; gap: 8px; }
    .cheak-box label.contain { padding-top: 8px; padding-bottom: 8px; }
    .cheak-box label.contain .checkmark { top: 50% !important; transform: translateY(-50%); }   /* the box was pinned at top: 4px - now level with its label */
}

/* The phone menu button shows up to 1199px (the template's own break) - measured 24x11 at 1024px too */
@media (max-width: 1199.98px) {
    .mobile-navigation a { width: 44px; height: 44px; justify-content: center; align-items: center; }
}

/* ---- 4. Every width -------------------------------------------------------------------------------------------------------
   Page numbers were 40x40, the slider dots 20x20 (the dot itself stays its size - only the tap area around it grows). */
.pagination .page-link { min-width: 44px; height: 44px; line-height: 42px; text-align: center; }
/* !important: the footer loads a second copy of the slider's own stylesheet in the BODY, after this file */
.slick-dots li { width: 44px !important; height: 44px !important; margin: 0 !important; }
.slick-dots li button, .slick-dots li button:before { width: 44px !important; height: 44px !important; line-height: 44px !important; }

/* The slider arrows sat OUTSIDE a phone's screen (left -37px / right 377px of 375) - nobody could tap them and they pushed the
   page 22px wider; on a phone the slider is swiped and the dots show where you are. */
@media (max-width: 767.98px) {
    .slick-prev, .slick-next { display: none !important; }
}

/* The catalogue's search button (the magnifier) was 22x30; typed text now stops before it. NOT the header's search
   (form name="head_search", owner 10-19: "fix this search bar issue") - the template already sizes that one. */
form[action$="online-jcb-parts-catalog"]:not([name="head_search"]):not(.veh-box):not(#filterForm) button[type="submit"] { width: 44px; height: 44px; right: 10px !important; display: inline-flex; align-items: center; justify-content: center; }
form[action$="online-jcb-parts-catalog"]:not([name="head_search"]) input[name="search"] { padding-right: 60px !important; }

/* ---- 5. The contact form: the part of a field you can tap was 28px tall inside a 72px box --------------------------------- */
.form_boxes input { height: 40px; }

/* ---- 6. Catalogue categories: tick several, then Apply (owner, 2026-10-19: "we should be able to select multiple category
   and press apply, so side category option should be a slide in menu type thing"). Below 1200px "Show Categories" opens a
   drawer from the left: a close button, the list scrolling on its own, Clear + Apply fixed at the bottom, a dark backdrop.
   From 1200px the list stays in the left column with the same Clear / Apply. Template colours only (border #E1E1E1, the
   theme's dark #050B20, the theme button). */
button.sidebar-handle { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.cat-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cat-drawer-close, .cat-drawer-backdrop { display: none; }
.cat-drawer-foot { display: flex; gap: 10px; margin-top: 14px; }
.cat-drawer-foot .cat-clear, .cat-drawer-foot .cat-apply { flex: 1 1 0; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 14px; }
.cat-drawer-foot .cat-clear, .cat-drawer-foot .cat-apply { box-sizing: border-box; height: 48px; border-radius: 12px !important; border: 1px solid #E1E1E1; font: inherit; cursor: pointer; }
.cat-drawer-foot .cat-clear { background: transparent; color: var(--theme-color-dark, #050B20); }
/* owner, 2026-10-19: "make same shape and give apply button yellow color that we use on the website" - the site's own button
   ("Send Message"): #ffd000, black text, 12px corners (on this page the template left it grey and square) */
/* 2026-10-20 (owner): "The apply button of category and vehicle make model needs to be grey like add to order list" - the cards' grey */
.cat-drawer-foot .cat-apply { background: #eceef2 !important; border-color: #cfd4dc !important; color: #050B20 !important; font-weight: 600; }
.cat-drawer-foot .cat-apply:hover { background: #e1e4ea !important; }
.cat-drawer-foot .cat-clear:focus-visible, .cat-drawer-foot .cat-apply:focus-visible { outline: 2px solid #050B20; outline-offset: 2px; }
.cat-apply-n:empty { display: none; }

@media (max-width: 1199.98px) {
    .wrap-sidebar-dk .sidebar-handle { display: flex; align-items: center; gap: 8px; min-height: 44px; }
    .wrap-sidebar-dk .inventory-sidebar { display: flex !important; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0;
        width: min(88vw, 380px); height: auto !important; margin: 0 !important; background: #fff; z-index: 100010; overflow: hidden;
        box-shadow: 0 0 32px rgba(5, 11, 32, .25); transform: translateX(-105%); visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s; }
    .cat-drawer-on .wrap-sidebar-dk .inventory-sidebar { transform: none; visibility: visible; transition: transform .25s ease; }
    .wrap-sidebar-dk .inventory-sidebar .inventroy-widget { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; padding: 0; }
    .wrap-sidebar-dk .categories-box { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; }
    .cat-drawer-head { padding: 8px 8px 8px 20px; border-bottom: 1px solid #E1E1E1; }
    .cat-drawer-head .title { margin: 0; }
    .cat-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0;
        font-size: 30px; line-height: 1; color: inherit; cursor: pointer; }
    #filterForm.cheak-box { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; }
    .cat-drawer-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 20px; }
    .cat-drawer-foot { margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #E1E1E1; background: #fff; }
    .cat-drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(5, 11, 32, .5); z-index: 100009; opacity: 0; visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s; }
    .cat-drawer-on .cat-drawer-backdrop { opacity: 1; visibility: visible; transition: opacity .25s ease; }
    body.cat-drawer-on { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .wrap-sidebar-dk .inventory-sidebar, .cat-drawer-backdrop { transition: none !important; }
}
/* From 1200px the list is 27 rows long - Clear / Apply stay in view at the bottom of the screen while it scrolls */
@media (min-width: 1200px) {
    .cat-drawer-foot { position: sticky; bottom: 0; z-index: 2; background: #fff; padding: 12px 0 6px; margin-top: 6px; }
}
/* ... which needs the page wrapper to CLIP rather than hide (overflow: hidden makes it a scroll box, and nothing inside can
   stick to the screen); clip cuts off exactly the same and lets sticky work. Browsers without clip keep hidden. */
@supports (overflow: clip) {
    @media (min-width: 1200px) { .boxcar-wrapper { overflow: clip !important; } }
}

/* ---- 7. The product page (owner, 2026-10-19: "Too much space above breadcrums" + "no back button once product is opened") -
   Back to the catalogue above the breadcrumb (44px tall, the theme's own dark text); on phones and tablets the section's 52px
   top padding (+ 20px under the black banner) shrinks so the part starts higher. */
.pd-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 4px; font-weight: 500; color: var(--theme-color-dark, #050B20); }
.pd-back:focus-visible { outline: 2px solid #050B20; outline-offset: 2px; }
@media (max-width: 991.98px) {
    section.inventory-section { padding-top: 8px !important; margin-top: 0 !important; }
    section.inventory-section .boxcar-title-three { margin-bottom: 12px; }
}

/* ---- 8. The phone header + the side menu (owner, 2026-10-19: "The header has become too high. Decrease the height" + "the menu
   button is on the right, but it opens from the left ... My preference is menu on the left and logo on the right" + "We don't need
   that word menu, rather we need the line underneath ... the search bar in the menu ... rounded edges a little below the top, and
   it should be clearly visible"). Up to 1199px (where the template shows its phone menu): 64px tall (was 88), the menu button
   first, then the logo (112px wide, was 150), account + cart on the right; the old right-hand menu button is hidden. */
.mob-menu-btn { display: none; }
@media (max-width: 1199.98px) {
    .boxcar-header.header-style-v7 .header-inner { padding-top: 10px; padding-bottom: 10px; }
    .boxcar-header.header-style-v7 .header-inner .c-box { display: flex; align-items: center; justify-content: flex-start; gap: 4px; }
    .mob-menu-btn { display: block; flex: 0 0 auto; margin-left: -10px; }
    .mob-menu-btn a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; }
    .mob-menu-btn a:focus-visible { outline: 2px solid #050B20; outline-offset: 2px; }
    .boxcar-header.header-style-v7 .header-inner .c-box .logo { right: 0; flex: 0 0 auto; }
    .boxcar-header.header-style-v7 .header-inner .c-box .logo img { width: 112px; height: auto; display: block; }
    .boxcar-header.header-style-v7 .header-inner .c-box .right-box { margin-left: auto; }
    .boxcar-header .right-box .mobile-navigation { display: none !important; }
}
/* the side menu: no "Menu" title, a line under every link, the search box rounded, framed and clear of the top edge */
.mm-menu .mm-navbar { display: none !important; }
.mm-menu > form[name="head_search"] { display: block; padding: 18px 16px 10px; }
.mm-menu .mobile-search-form { min-height: 52px; padding: 4px 6px 4px 12px; border: 1.5px solid #c9ced8; border-radius: 14px; background: #fff;
    box-shadow: 0 1px 3px rgba(5, 11, 32, .08); }
.mm-menu .mobile-search-form:focus-within { border-color: #050B20; }
.mm-menu .mobile-search-form input[type="text"] { min-height: 44px; color: #050B20; }
.mm-menu .mobile-search-form input[type="text"]::placeholder { color: rgba(5, 11, 32, .6); }
.mm-menu .mobile-search-form button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.mm-menu .mm-panel { padding: 0 16px 24px !important; }
.mm-menu .mm-listview { padding: 0 !important; }
.mm-menu .mm-listitem { margin: 0 !important; border-bottom: 1px solid #E1E1E1 !important; }   /* the plugin's own ::after line is display:none here */
.mm-menu .mm-listitem__text { padding: 15px 8px !important; }

/* ---- 9. The vehicle filter: Make -> Model -> Year (owner, 2026-10-19: "Above the show category in mobile and on side in web").
   Phones: Make | Model side by side, Year (when the model has years) beside "Show parts"; from 1200px one column at the top of
   the left column. Native selects (48px, 16px text - no zoom on iOS). */
.veh-box { margin: 0 0 16px; padding: 14px; border: 1px solid #E1E1E1; border-radius: 16px; background: #fff; }
.veh-title { margin: 0 0 10px; color: #050B20; font-size: 16px; font-weight: 600; line-height: 1.3; }
.veh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.veh-field { min-width: 0; }
.veh-field[hidden] { display: none; }
.veh-field label { display: flex; align-items: center; gap: 6px; margin: 0 0 5px; color: #050B20; font-size: 14px; font-weight: 600; line-height: 1.2; }
.veh-step { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
    background: #050B20; color: #ffd000; font-size: 12px; font-weight: 700; line-height: 1; }
.veh-field select { display: block; width: 100%; min-height: 48px; padding: 0 30px 0 12px; border: 1px solid #E1E1E1; border-radius: 12px;
    background-color: #fff; color: #050B20; font-size: 16px; text-overflow: ellipsis; cursor: pointer; }
.veh-field select:focus-visible { outline: 2px solid #050B20; outline-offset: 1px; border-color: #050B20; }
.veh-go { grid-column: 1 / -1; min-height: 48px; padding: 0 16px; border: 1px solid #cfd4dc; border-radius: 12px; background: #eceef2; color: #050B20;   /* grey, owner 2026-10-20 */
    font-size: 16px; font-weight: 600; cursor: pointer; transition: filter .15s ease; }
.veh-go:hover { background: #e1e4ea; }
.veh-go:focus-visible { outline: 2px solid #050B20; outline-offset: 2px; }
.veh-grid.has-year .veh-go { grid-column: auto; }
@media (min-width: 1200px) {
    .veh-box { margin-bottom: 20px; padding: 18px; }
    .veh-grid, .veh-grid.has-year { grid-template-columns: minmax(0, 1fr); }
    .veh-grid.has-year .veh-go { grid-column: 1 / -1; }
}

/* ---- 10. Phones + tablets (< 1200px): the parts come up sooner (owner, 2026-10-20: "space between header breadcrumb search and
   find part is quite large. Reduce them because we need to see content faster in mobile"). Measured at 375px: the black line
   76px tall + 20px under it, the search box 63px, 51px under the search - the vehicle box started at 410px, now ~260px. */
@media (max-width: 1199.98px) {
    .box-quote { margin-bottom: 0 !important; padding: 7px 12px !important; line-height: 18px !important; }
    .box-quote .author { display: block; font-size: 13px !important; line-height: 18px !important; text-wrap: balance; }
    section.cars-section-four.v1.v2 { padding-top: 4px !important; }
    .cars-section-four .boxcar-title-three { margin-bottom: 14px !important; }
    .cars-section-four .boxcar-title-three .breadcrumb { margin-bottom: 0 !important; }
    .cars-section-four .boxcar-title-three h3 { margin-bottom: 8px !important; font-size: 30px !important; line-height: 1.2 !important; }
    .cars-section-four .boxcar-title-three input[name="search"] { height: 48px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
    .cars-section-four .veh-box { margin-bottom: 8px; }
}

/* ---- 11. The catalogue cards' "Add to Order List" in GREY (owner, 2026-10-20: "it is become too much yellow"); the part page
   keeps its one yellow button. */
.cc-add .cc-add__btn { background: #eceef2; border-color: #cfd4dc; color: #050B20; }
.cc-add .cc-add__btn:hover { background: #e1e4ea; filter: none; }
.cc-add .cc-add__btn.is-done { background: #050B20; border-color: #050B20; color: #fff; filter: none; }

/* ---- 12. The header's search icon (owner, 2026-10-20: "make search icon in header on click we get the searchbar, remove it from
   product catalogue"). Up to 1440px - where the template hides its own header search box - a 44px icon before the account icon
   opens a full-width search bar under the header (Esc / x closes it). */
.hs-open { display: none; }
@media (max-width: 1440px) {
    .hs-open { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; margin-right: 2px;
        padding: 0; background: none; border: 0; border-radius: 12px; color: #050B20; cursor: pointer; }
    .hs-open:hover, .hs-open[aria-expanded="true"] { background: #f4f5f8; }
    .hs-open:focus-visible { outline: 2px solid #050B20; outline-offset: 2px; }
}
.hs-panel { border-top: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1; background: #fff; padding: 10px 0; }
.hs-panel[hidden] { display: none; }
.hs-form { display: flex; align-items: center; gap: 8px; }
.hs-form .hs-input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px; border: 1.5px solid #c9ced8; border-radius: 14px; background: #fff;
    color: #050B20; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; }
.hs-form .hs-input:focus { border-color: #050B20; }
.hs-form .hs-input::placeholder { color: rgba(5, 11, 32, .55); }
.hs-form .hs-go { flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
    border: 0; border-radius: 14px; background: #ffd000; color: #050B20; cursor: pointer; }
.hs-form .hs-close { flex: 0 0 40px; width: 40px; height: 48px; padding: 0; border: 0; background: none; color: rgba(5, 11, 32, .7); font-size: 28px; line-height: 1; cursor: pointer; }
.hs-form .hs-go:focus-visible, .hs-form .hs-close:focus-visible { outline: 2px solid #050B20; outline-offset: 2px; }
/* the catalogue says what was searched, with an x to clear it */
.cat-search-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 6px 0 14px; padding: 2px 2px 2px 12px; border-radius: 999px;
    background: #f4f5f8; color: #050B20; font-size: 15px; }
.cat-search-chip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-search-chip a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
    color: #050B20; font-size: 22px; line-height: 1; text-decoration: none; }
.cat-search-chip a:hover { background: #e1e4ea; color: #050B20; }

/* ---- 13. "Filter Categories" (was "Show Categories" - owner, 2026-10-20: "needs a bit highlight maybe make it bold"): a bold
   button with a dark outline on phones and tablets. */
@media (max-width: 1199.98px) {
    .wrap-sidebar-dk .sidebar-handle.js-cat-drawer { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
        border: 1.5px solid #050B20; border-radius: 12px; background: #fff; color: #050B20; font-weight: 700; }
    .wrap-sidebar-dk .sidebar-handle.js-cat-drawer:focus-visible { outline: 2px solid #050B20; outline-offset: 2px; }
}

/* ---- 14. The part page's four points (OEM-equivalent quality, on-time delivery, secure payments, loyalty rewards) 2 x 2 on phones
   and tablets (owner, 2026-10-20: "can be like 2 by 2? is too big for phone, on desktop it seems ok"): the icon above the words,
   centred - 4 rows of 94px became 2 rows. Desktop (>= 1200px) unchanged. */
@media (max-width: 1199.98px) {
    .inventory-section .choose-us-block { flex: 0 0 50%; max-width: 50%; }
    .inventory-section .choose-us-block .content-row { flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 14px; text-align: center; }
    .inventory-section .choose-us-block .icon-box { margin: 0 !important; width: auto !important; height: auto !important; line-height: 1 !important; min-height: 0 !important; }
    .inventory-section .choose-us-block .icon-box img { width: 44px !important; height: auto; }
    .inventory-section .choose-us-block .title { margin: 0; font-size: 14px; line-height: 1.25; text-align: center; }
    .inventory-section .choose-us-block .title br { display: none; }
}

/* ---- 15. The catalogue's downloadable PDF + the one filter (owner, 2026-10-20: "a download catalog pdf button on website ...
   always an updated catalog pdf"; "the filter vehicle remove from here, rename filter category to 'Vehicle / Category Filter'";
   then "vehicle category filter button also needs to be a lesser highlight ... the download PDF button needs to be next to
   vehicle category filter button in 1 line so it makes symmetry ... write download pdf ... in desktop the button needs to be
   center aligned").
   Below 1200px: [Vehicle / Category Filter] [Download PDF] on one line, the same quiet style (36px, 14px, a light grey edge),
   together as wide as the cards. Below 1200px the vehicle (Make -> Model -> Year) lives in the filter panel above the
   categories, and the panel's Apply takes both. From 1200px: Download PDF centred at the top of the left column, the vehicle
   and the categories under it as before. ---- */
.cat-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cars-section-four .boxcar-title-three .cat-titlerow h3 { margin: 0 !important; min-width: 0; }
.cat-tools { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; }
.cat-tools .cat-pdf, .wrap-sidebar-dk .cat-tools .sidebar-handle.js-cat-drawer {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-height: 36px; height: 36px; margin: 0;
    padding: 0 10px; border: 1px solid #cfd4dc; border-radius: 10px; background: #fff; color: #050B20; font-size: 14px; font-weight: 600;
    line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s; }
.cat-tools .cat-pdf:hover, .wrap-sidebar-dk .cat-tools .sidebar-handle.js-cat-drawer:hover { border-color: #050B20; background: #f6f7f9; color: #050B20; }
.cat-tools .cat-pdf:focus-visible, .wrap-sidebar-dk .cat-tools .sidebar-handle.js-cat-drawer:focus-visible { outline: 2px solid #050B20; outline-offset: 2px; }
.cat-tools svg { flex: none; width: 16px; height: 16px; }
.cat-drawer-top { display: none; }
@media (max-width: 1199.98px) {
    .cat-tools { margin-bottom: 10px; }
    .cat-tools .cat-pdf, .wrap-sidebar-dk .cat-tools .sidebar-handle.js-cat-drawer { flex: 1 1 auto; }
    /* the panel: its head on top, then the vehicle, then the categories (their list scrolls on its own) */
    .cat-drawer-top { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-bottom: 1px solid #E1E1E1; }
    .cat-drawer-top__title { margin: 0; color: #050B20; font-size: 18px; font-weight: 700; line-height: 1.3; }
    #catDrawer .veh-box { flex: none; margin: 0; padding: 12px 20px 14px; border: 0; border-bottom: 1px solid #E1E1E1; border-radius: 0; }
    #catDrawer .veh-title { margin-bottom: 8px; font-size: 15px; }
    #catDrawer .veh-go { display: none; }   /* Apply at the bottom takes the vehicle too */
    #catDrawer .veh-grid.has-year { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
    .wrap-sidebar-dk .categories-box { padding-top: 0; margin-bottom: 0; }
    .cat-drawer-head { padding: 12px 20px 0; border-bottom: 0; }
    .cat-drawer-head .title { font-size: 15px; font-weight: 600; }
}
@media (max-width: 374.98px) {   /* the narrowest phones: a little tighter so both stay on one line */
    .cat-tools { gap: 6px; }
    .cat-tools .cat-pdf, .wrap-sidebar-dk .cat-tools .sidebar-handle.js-cat-drawer { padding: 0 7px; font-size: 13px; gap: 5px; }
}
.cat-pdf--desk { display: none; }
@media (min-width: 1200px) {
    .cat-tools { display: none; }   /* the filters are the left column; the download is on the "Showing" line */
    .cars-section-four .text-box { gap: 12px; }
    .cars-section-four .text-box .cat-pdf--desk { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-left: auto; box-sizing: border-box;
        height: 42px; padding: 0 16px; border: 1px solid #cfd4dc; border-radius: 10px; background: #fff; color: #050B20; font-size: 15px; font-weight: 600;
        line-height: 1.2; text-decoration: none; white-space: nowrap; transition: border-color .15s, background .15s; }
    .cars-section-four .text-box .cat-pdf--desk:hover { border-color: #050B20; background: #f6f7f9; color: #050B20; }
    .cars-section-four .text-box .cat-pdf--desk:focus-visible { outline: 2px solid #050B20; outline-offset: 2px; }
    .cars-section-four .text-box .cat-pdf--desk svg { flex: none; width: 18px; height: 18px; }
}

/* ---- 16. "Showing 1 to 16 of 1134 products for JCB 3CX / 3DX" - smaller and grey (owner, 2026-10-20: "it is only for
   reference"), above and below the parts ---- */
.cars-section-four .text-box .text, .cars-section-four .pagination-sec .text { font-size: 13px; line-height: 1.4; color: #6b7280; }
.cars-section-four .text-box .text strong, .cars-section-four .pagination-sec .text strong { color: inherit; font-weight: 600; }

/* ---- 17. The page numbers (owner, 2026-10-20: "it should be round and arrow also should show"): every number a circle, the
   current page yellow with dark text, both arrows always there (faded at the ends). Phones (< 768px) get the short list
   (1 number either side - one line), wider screens the long one. ---- */
.cars-section-four .pagination-sec .pagination.pg-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 0; padding: 0; }
.cars-section-four .pagination-sec .pg-list .page-item { margin: 0; }
.cars-section-four .pagination-sec .pg-list .page-item .page-link { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    width: 40px; min-width: 40px; height: 40px; margin: 0; padding: 0; border: 1px solid #E1E1E1; border-radius: 50% !important; background: #fff;
    color: #050B20; font-size: 15px; font-weight: 500; line-height: 1; box-shadow: none; }
.cars-section-four .pagination-sec .pg-list .page-item a.page-link:hover { background: #f6f7f9; border-color: #050B20; color: #050B20; }
.cars-section-four .pagination-sec .pg-list .page-item a.page-link:focus-visible { outline: 2px solid #050B20; outline-offset: 2px; }
.cars-section-four .pagination-sec .pg-list .page-item.active .page-link { background: #ffd000; border-color: #ffd000; color: #050B20; font-weight: 700; }
.cars-section-four .pagination-sec .pg-list .pg-gap .page-link { width: auto; min-width: 16px; border: 0; background: none; color: #6b7280; }
.cars-section-four .pagination-sec .pg-list .pg-arrow.disabled .page-link { opacity: .35; background: #fff; border-color: #E1E1E1; }
.cars-section-four .pagination-sec .pg-list .page-link svg { width: 12px; height: 12px; }
.pg-list--phone { display: none !important; }
@media (max-width: 767.98px) {
    .pg-list--wide { display: none !important; }
    .pg-list--phone { display: flex !important; }
    .cars-section-four .pagination-sec .pagination.pg-list { gap: 4px; }
    .cars-section-four .pagination-sec .pg-list .page-item .page-link { width: 36px; min-width: 36px; height: 36px; font-size: 14px; }
}
@media (max-width: 374.98px) {
    .cars-section-four .pagination-sec .pagination.pg-list { gap: 3px; }
    .cars-section-four .pagination-sec .pg-list .page-item .page-link { width: 30px; min-width: 30px; height: 30px; font-size: 13px; }
}
/* the "..." stays narrow at every width (the size rules above would make it a full circle's width) */
.cars-section-four .pagination-sec .pg-list .page-item.pg-gap .page-link { width: auto; min-width: 16px; padding: 0 2px; }

/* ---- 18. Phones + tablets (< 1200px): the breadcrumb small and grey like "Showing ..." (owner, 2026-10-20: "the breadcrumbs are
   large - make them smaller and grey like showing"), and the first part closer under "Showing ..." ---- */
@media (max-width: 1199.98px) {
    .cars-section-four .boxcar-title-three .breadcrumb li { font-size: 13px; line-height: 1.4; color: #6b7280; margin-right: 18px; }
    .cars-section-four .boxcar-title-three .breadcrumb li::before { right: -12px; color: #9ca3af; }
    .cars-section-four .boxcar-title-three .breadcrumb li a { color: #6b7280; }
    .cars-section-four .text-box { margin-bottom: 12px !important; }
    .cars-section-four .text-box .text { margin-bottom: 0 !important; }
}

/* ---- 19. Desktop (>= 1200px): the filter column narrower and its text a size smaller (owner, 2026-10-20: "the make model
   category filters font also can be smaller relatively and can take lesser side space as well for desktop") - 355px -> 300px
   (270 first: "270 is too small"), the parts get the rest ---- */
@media (min-width: 1200px) {
    .cars-section-four .wrap-sidebar-dk { flex: 0 0 300px; width: 300px; max-width: 300px; }
    .cars-section-four .wrap-sidebar-dk ~ .col-xl-9 { flex: 1 1 0; width: auto; max-width: none; min-width: 0; }
    .veh-box { margin-bottom: 14px; padding: 14px; border-radius: 14px; }
    .veh-title { margin-bottom: 8px; font-size: 14px; }
    .veh-grid, .veh-grid.has-year { gap: 8px; }
    .veh-field label { margin-bottom: 4px; font-size: 13px; }
    .veh-step { flex-basis: 18px; width: 18px; height: 18px; font-size: 11px; }
    .veh-field select { min-height: 38px; padding: 0 28px 0 10px; border-radius: 10px; font-size: 14px; }
    .veh-go { min-height: 38px; border-radius: 10px; font-size: 14px; }
    .wrap-sidebar-dk .inventroy-widget { padding: 14px; border-radius: 14px; }
    .wrap-sidebar-dk .categories-box { padding-top: 0; }
    .wrap-sidebar-dk .categories-box .title { margin-bottom: 8px; font-size: 14px; font-weight: 600; }
    .wrap-sidebar-dk .categories-box .contain { margin-bottom: 6px; padding-left: 26px; font-size: 13.5px; line-height: 1.45; }
    .wrap-sidebar-dk .categories-box .checkmark { top: 2px; width: 17px; height: 17px; border-radius: 4px; }
    .wrap-sidebar-dk .categories-box .contain .checkmark:after { left: 5px; top: 2px; width: 5px; height: 9px; border-width: 0 2px 2px 0; }
    .cat-drawer-foot .cat-clear, .cat-drawer-foot .cat-apply { min-height: 38px; height: 38px; border-radius: 10px !important; font-size: 14px; }
}

/* ---- 20. Desktop: FIVE parts a row from 1280px (owner, 2026-10-20: "can we do 5 images per line? because image size is too
   big") - measured: 1366px -> cards 185px wide, 1280px -> 168px, "Add to Order List" whole in both; 1200-1279px stays at four
   (152px was too tight). The card's own padding and type a step smaller to suit. ---- */
@media (min-width: 1280px) {
    .cars-section-four .wrap-sidebar-dk ~ .col-xl-9 .car-block-four { flex: 0 0 20%; width: 20%; max-width: 20%; }
    .cars-section-four .wrap-sidebar-dk ~ .col-xl-9 .car-block-four .inner-box .content-box { padding: 12px 10px 10px; }
    .cars-section-four .wrap-sidebar-dk ~ .col-xl-9 .car-block-four .inner-box .content-box .title { font-size: 15px; line-height: 20px; }
    .cars-section-four .wrap-sidebar-dk ~ .col-xl-9 .car-block-four .inner-box .content-box .btn-box span { font-size: 13px; line-height: 1.45; }
    .car-block-four .inner-box .image-box .image img { padding-top: 14px; }
}

/* ---- 21. The card's quantity and Add on ONE line (owner, 2026-10-20: "the quantity button and add to order list, can they be
   in 1 line? maybe writing 'Add' only ... same in mobile, i see only 2 items in 1 go ... at least 3 or 4 so we need to reduce
   size of these buttons"): [- 1 +] [Add], 36px tall; "N in your Order List" under them, slimmer. Phones and tablets: a smaller
   photo (112px) and type - a card about 160px tall, 4 parts a screen at 375 x 812. ---- */
.car-block-four .cc-add-wrap { margin-top: 8px; }
.car-block-four .cc-add { flex-wrap: wrap; gap: 6px; align-items: stretch; }
.car-block-four .cc-add .ol-qty { flex: 1 1 0; min-width: 0; border-radius: 9px; }   /* basis 0: the button keeps its place on the line */
.car-block-four .cc-add .ol-qty__btn { flex: none; width: 26px; min-height: 34px; font-size: 17px; }
.car-block-four .cc-add .ol-qty__input { flex: 1 1 0; width: 0; min-width: 24px; min-height: 34px; padding: 0; font-size: 14px; }
.car-block-four .cc-add .cc-add__btn { flex: 0 0 auto; min-height: 34px; height: 34px; padding: 0 10px; border-radius: 9px; font-size: 13px; font-weight: 600; }
/* 2026-10-20 (owner): "we have space, write add to order list and decrease the size of qty adder" - the whole label wherever the
   card has room for it beside the quantity (measured: phones 200-216px, tablets 220px); the desktop's five-a-row cards are
   ~178px inside, where "Add to Order List" (115px) would leave the quantity 57px - there it stays "Add". */
/* then (owner): "do on desktop making it under its fine" - a card too narrow for both on one line (the desktop's, < 196px)
   puts "Add to Order List" UNDER the quantity, both the card's width */
@container (max-width: 195.98px) {
    .car-block-four .cc-add .ol-qty { flex: 1 1 100%; }
    .car-block-four .cc-add .cc-add__btn { flex: 1 1 100%; }
}
.car-block-four .cc-add .ol-in { min-height: 32px; padding: 4px 8px; border-radius: 8px; font-size: 13px; }
@media (max-width: 991.98px) {
    .car-block-four { margin-bottom: 10px; }
    .car-block-four .inner-box .image-box { flex: 0 0 112px; width: 112px; padding: 8px; }
    .car-block-four .inner-box .content-box { padding: 10px 12px 10px 4px !important; }
    .car-block-four .inner-box .content-box h6.title { margin-bottom: 4px; font-size: 16px; line-height: 21px; }
    .car-block-four .inner-box .content-box .btn-box span { font-size: 13px; line-height: 1.4 !important; }
    .car-block-four .cc-add .ol-qty__btn { width: 28px; }
    .car-block-four .inner-box .image-box { flex: 0 0 104px; width: 104px; padding: 6px; }
}

/* ---- 22. Desktop (>= 1200px): "Showing ..." + Download PDF ABOVE the parts, and the parts start level with the filters (owner,
   2026-10-20: "the showing is in line with the left filters rather the items needs to start in line and showing needs to be
   above that"). The two columns become a grid: filters | (Showing / parts / pages); the parts column's own box steps aside
   (display: contents) so its three pieces sit in the grid's rows. Each piece keeps the 12px gutter, so the text, the cards and
   the Download PDF button share the same left and right edges. ---- */
@media (min-width: 1200px) {
    .cars-section-four .row.cat-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
    .cars-section-four .row.cat-layout > .wrap-sidebar-dk { grid-column: 1; grid-row: 2 / span 2; width: auto; max-width: none; flex: none; }
    .cars-section-four .row.cat-layout > .col-xl-9 { display: contents; }
    .cars-section-four .row.cat-layout > .col-xl-9 > .text-box { grid-column: 2; grid-row: 1; margin-bottom: 16px !important;
        padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5); }
    .cars-section-four .row.cat-layout > .col-xl-9 > .row { grid-column: 2; grid-row: 2; margin-left: 0; margin-right: 0; }
    .cars-section-four .row.cat-layout > .col-xl-9 > .pagination-sec { grid-column: 2; grid-row: 3;
        padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5); }
}

/* ---- 23. Part names in the site's own type (owner, 2026-10-20: "for product title, the font looks combursone ... it does not
   hurt the eyes" -> option B): Titillium Web semi-bold in the name's own case - not Oswald in capitals, which read like shouting
   twenty times a page. The part page's name the same, bold and larger (it is that page's heading). Oswald stays for the page
   headings ("Product Catalogue"). The OEM line GREY, a step darker than the "Showing ..." grey, the number semi-bold ("for ref
   oem number, make that in grey but a little darker grey than our standard one or maybe grey in bold. we cannot have 2 black"). */
.car-block-four .inner-box .content-box h6.title { font-family: "Titillium Web", sans-serif; text-transform: none; font-weight: 600; letter-spacing: 0; }
.car-block-four .inner-box .content-box h6.title a { color: #050B20; }
.car-block-four .inner-box .content-box .btn-box span { color: #4b5563; }
.cc-oem { font-weight: 600; color: #4b5563; }
/* the part page's template rules are six classes deep - !important rather than a longer chain */
.contact-box .content-box h6.title.pd-name { font-family: "Titillium Web", sans-serif !important; text-transform: none !important; font-weight: 700 !important;
    font-size: 20px !important; line-height: 1.3 !important; letter-spacing: 0 !important; color: #050B20 !important; margin-bottom: 4px !important; }
.contact-box .content-box .text.pd-oemline { color: #4b5563 !important; font-size: 15px !important; }
@media (min-width: 992px) { .contact-box .content-box h6.title.pd-name { font-size: 24px !important; } }

/* ---- 24. The catalogue PDF's email step (owner, 2026-10-20: "ask for email verification like we do for documents"): a centred
   card over a dark veil - email, then the 6-digit code, then the download. 48px fields at 16px (no zoom on iPhone). ---- */
.cat-get[hidden] { display: none; }
.cat-get { position: fixed; inset: 0; z-index: 100030; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cat-get__bg { position: absolute; inset: 0; background: rgba(5, 11, 32, .55); }
.cat-get__box { position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px 22px 20px;
    border-radius: 16px; background: #fff; box-shadow: 0 20px 48px rgba(5, 11, 32, .3); color: #050B20; }
.cat-get__x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: none; color: #050B20; font-size: 28px; line-height: 1; cursor: pointer; }
.cat-get__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 12px;
    background: #eceef2; color: #050B20; }
.cat-get__title { margin: 0 0 6px; font-family: "Titillium Web", sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; color: #050B20; }
.cat-get__sub { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #4b5563; }
.cat-get__step { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.cat-get__step[hidden] { display: none; }
.cat-get__step label { margin: 0; font-size: 14px; font-weight: 600; color: #050B20; }
.cat-get__step input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #cfd4dc; border-radius: 12px; background: #fff; color: #050B20; font-size: 16px; }
.cat-get__step input:focus-visible { outline: 2px solid #050B20; outline-offset: 1px; border-color: #050B20; }
#catGetCodeIn { letter-spacing: 6px; font-size: 20px; font-weight: 600; text-align: center; }
.cat-get__go { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 4px; padding: 0 16px; border: 0; border-radius: 12px;
    background: #050B20; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; }
.cat-get__go:hover { background: #1b2340; color: #fff; }
.cat-get__go:disabled { opacity: .6; cursor: default; }
.cat-get__go:focus-visible { outline: 2px solid #050B20; outline-offset: 2px; }
.cat-get__note { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: #4b5563; }
.cat-get__note b { color: #050B20; font-weight: 600; overflow-wrap: anywhere; }
/* owner, 2026-10-20: "Didn't receive a code?" over Change email / Send a new code; "Auto download didn't start?" over Download again */
.cat-get__q { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: #4b5563; text-align: center; }
.cat-get__done .cat-get__q { margin: 12px 0 2px; color: #4b5563; }
.cat-get__links { margin: 0; font-size: 14px; color: #6b7280; text-align: center; }
.cat-get__link { min-height: 36px; padding: 0 4px; border: 0; background: none; color: #050B20; font: inherit; font-weight: 600; text-decoration: underline;
    text-underline-offset: 2px; cursor: pointer; }
.cat-get__done p { margin: 0 0 4px; font-size: 15px; line-height: 1.5; color: #14532d; }
.cat-get__msg { min-height: 0; margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: #4b5563; }
.cat-get__msg:empty { display: none; }
.cat-get__msg.is-bad { color: #b91c1c; }
body.cat-get-on { overflow: hidden; }