/* ===================================================== HOME USED MACHINES — REFERENCE PROPORTIONS ===================================================== */ body.home .home-used-machines { width: 100%; } /* ===================================================== SLIDER ===================================================== */ body.home .home-used-machines .pk-slider { position: relative; width: 100%; overflow: hidden; } /* Keep all listings in one horizontal line */ body.home .home-used-machines .swiper-wrapper { align-items: stretch; } /* IMPORTANT: Do not set width:auto here. Swiper calculates the widths for 4 / 3 / 2 cards. */ body.home .home-used-machines .swiper-slide { height: auto; min-width: 0; box-sizing: border-box; } body.home .home-used-machines .hp-grid__item { padding: 0 !important; margin: 0 !important; } /* ===================================================== CARD — COMPACT REFERENCE SIZE ===================================================== */ body.home .home-used-machines .hp-listing--view-block { height: 100%; margin: 0 !important; background: #ffffff; border: 1px solid #eeeeee !important; border-radius: 4px !important; overflow: hidden; box-shadow: none !important; transition: box-shadow 0.3s ease; } body.home .home-used-machines .hp-listing--view-block:hover { transform: none !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.10) !important; } /* ===================================================== IMAGE — 160PX LIKE THE REFERENCE ===================================================== */ body.home .home-used-machines .hp-listing__header { margin: 0 !important; padding: 0 !important; } body.home .home-used-machines .hp-listing__image { width: 100% !important; height: 160px !important; margin: 0 !important; padding: 0 !important; overflow: hidden; } body.home .home-used-machines .hp-listing__image a { display: block; width: 100%; height: 100%; } body.home .home-used-machines .hp-listing__image img { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ===================================================== CONTENT ===================================================== */ body.home .home-used-machines .hp-listing__content { padding: 12px 10px 14px !important; } body.home .home-used-machines .hp-listing__title { margin: 0 0 5px !important; font-size: 16px !important; line-height: 1.25 !important; font-weight: 700 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===================================================== NAVIGATION — ACTUAL LIVE SWIPER CLASSES ===================================================== */ body.home .home-used-machines .pk-slider > .swiper-button-prev, body.home .home-used-machines .pk-slider > .swiper-button-next { position: absolute !important; /* 160px image: center = 80px */ top: 80px !important; bottom: auto !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: translateY(-50%) !important; background: rgba(255, 255, 255, 0.88) !important; background-image: none !important; border: 1px solid #eeeeee !important; border-radius: 50% !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10) !important; color: #8b96a8 !important; opacity: 1 !important; visibility: visible !important; cursor: pointer; z-index: 50 !important; box-sizing: border-box !important; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; } /* LEFT ARROW */ body.home .home-used-machines .pk-slider > .swiper-button-prev { left: 8px !important; right: auto !important; } /* RIGHT ARROW */ body.home .home-used-machines .pk-slider > .swiper-button-next { right: 8px !important; left: auto !important; } /* SWIPER ARROW ICON */ body.home .home-used-machines .pk-slider > .swiper-button-prev::after, body.home .home-used-machines .pk-slider > .swiper-button-next::after { font-size: 17px !important; font-weight: 700 !important; line-height: 1 !important; color: inherit !important; } /* HOVER — BLUE CIRCLE + WHITE ARROW */ body.home .home-used-machines .pk-slider > .swiper-button-prev:hover, body.home .home-used-machines .pk-slider > .swiper-button-next:hover { background: #337ab7 !important; border-color: #337ab7 !important; color: #ffffff !important; } /* ===================================================== TABLET ===================================================== */ @media (min-width: 768px) and (max-width: 1199px) { body.home .home-used-machines .hp-listing__image { height: 145px !important; } body.home .home-used-machines .pk-slider > .swiper-button-prev, body.home .home-used-machines .pk-slider > .swiper-button-next { top: 72.5px !important; } } /* ===================================================== MOBILE — 2 CARDS, SWIPE ONLY, ABSOLUTELY NO ARROWS ===================================================== */ @media screen and (max-width: 767px) { body.home .home-used-machines .pk-slider > .swiper-button-prev, body.home .home-used-machines .pk-slider > .swiper-button-next { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } body.home .home-used-machines .pk-slider > .swiper-button-prev::after, body.home .home-used-machines .pk-slider > .swiper-button-next::after { display: none !important; content: none !important; } /* MOBILE CARD IMAGE */ body.home .home-used-machines .hp-listing__image { height: 105px !important; } /* MOBILE CONTENT */ body.home .home-used-machines .hp-listing__content { padding: 8px 7px 9px !important; } /* MOBILE TITLE */ body.home .home-used-machines .hp-listing__title { font-size: 12px !important; line-height: 1.2 !important; margin-bottom: 4px !important; } } /* ===================================================== MOBILE SPECS — DEFAULT HIDDEN ===================================================== */ body.home .home-used-machines .pk-mobile-specs { display: none; } /* ===================================================== MOBILE STRUCTURE ===================================================== */ @media screen and (max-width: 767px) { /* Final mobile sequence: IMAGE TITLE PRICE TYPE | MODEL | MAKE */ /* Hide navigation completely */ body.home .home-used-machines .swiper-button-prev, body.home .home-used-machines .swiper-button-next { display: none !important; } /* Hide original attributes */ body.home .home-used-machines .hp-listing__attribute--type, body.home .home-used-machines .hp-listing__attribute--model, body.home .home-used-machines .hp-listing__attribute--make { display: none !important; } /* New combined specs row */ body.home .home-used-machines .pk-mobile-specs { display: flex !important; align-items: center; width: 100%; margin-top: 6px; overflow: hidden; white-space: nowrap; } /* Individual values */ body.home .home-used-machines .pk-mobile-spec { min-width: 0; padding: 0 5px; font-size: 10px; line-height: 1.3; font-weight: 400; color: #777777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Remove left spacing from first value */ body.home .home-used-machines .pk-mobile-spec:first-child { padding-left: 0; } /* Separator between values */ body.home .home-used-machines .pk-mobile-spec + .pk-mobile-spec { border-left: 1px solid #d8d8d8; } }