/* ========================================================= HOMEPAGE MACHINERY CAROUSEL 4 desktop / 3 small desktop / 2 tablet / 2 mobile ========================================================= */ /* WIDESCREEN + DESKTOP — 80% WIDTH, 4 CARDS */ @media (min-width: 1200px) { .am-home-machinery { width: 80% !important; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; } .am-home-machinery__carousel { width: 100% !important; padding-left: 34px !important; padding-right: 34px !important; box-sizing: border-box !important; } .am-home-machinery__track { gap: 18px !important; } .am-home-machinery__slide { flex: 0 0 calc((100% - 54px) / 4) !important; width: calc((100% - 54px) / 4) !important; min-width: calc((100% - 54px) / 4) !important; max-width: calc((100% - 54px) / 4) !important; } } /* SMALL DESKTOP — 3 CARDS */ @media (min-width: 1024px) and (max-width: 1199px) { .am-home-machinery { width: 90% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } .am-home-machinery__carousel { padding-left: 30px !important; padding-right: 30px !important; } .am-home-machinery__track { gap: 16px !important; } .am-home-machinery__slide { flex: 0 0 calc((100% - 32px) / 3) !important; width: calc((100% - 32px) / 3) !important; min-width: calc((100% - 32px) / 3) !important; max-width: calc((100% - 32px) / 3) !important; } } /* TABLET — 2 CARDS */ @media (min-width: 768px) and (max-width: 1023px) { .am-home-machinery { width: 94% !important; margin-left: auto !important; margin-right: auto !important; } .am-home-machinery__carousel { padding-left: 24px !important; padding-right: 24px !important; } .am-home-machinery__track { gap: 14px !important; } .am-home-machinery__slide { flex: 0 0 calc((100% - 14px) / 2) !important; width: calc((100% - 14px) / 2) !important; min-width: calc((100% - 14px) / 2) !important; max-width: calc((100% - 14px) / 2) !important; } } /* MOBILE — 2 CARDS */ @media (max-width: 767px) { .am-home-machinery { width: 100% !important; max-width: none !important; overflow: hidden !important; } .am-home-machinery__header { padding-left: 16px !important; padding-right: 16px !important; } .am-home-machinery__carousel { padding-left: 16px !important; padding-right: 16px !important; } .am-home-machinery__track { gap: 10px !important; } .am-home-machinery__slide { flex: 0 0 calc((100% - 10px) / 2) !important; width: calc((100% - 10px) / 2) !important; min-width: calc((100% - 10px) / 2) !important; max-width: calc((100% - 10px) / 2) !important; } } /* Always keep inventory cards inside their carousel slot */ .am-home-machinery__slide > .amui-card { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } /* Keep arrows just outside cards */ .am-home-machinery__arrow--left { left: 4px !important; } .am-home-machinery__arrow--right { right: 4px !important; } /* ========================================================= HOMEPAGE MACHINERY CAROUSEL ASK DEALER / VIEW DETAILS FIX ========================================================= */ /* --------------------------------------------------------- ASK DEALER CARD Keep it compact like the real machinery inventory card --------------------------------------------------------- */ .am-home-machinery .amui-card-machinery-ask-dealer { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 54px !important; height: 54px !important; margin: 12px 0 0 !important; padding: 7px 48px !important; overflow: hidden !important; background: #fff !important; border: 1px solid #00bd63 !important; border-radius: 8px !important; box-sizing: border-box !important; cursor: pointer !important; } /* ASK DEALER text */ .am-home-machinery .amui-card-machinery-ask-content { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; text-align: center !important; line-height: 1 !important; z-index: 3 !important; } .am-home-machinery .amui-card-machinery-ask-content strong { display: block !important; margin: 0 0 3px !important; color: #00bd63 !important; font-size: 18px !important; line-height: 1 !important; font-weight: 800 !important; white-space: nowrap !important; } .am-home-machinery .amui-card-machinery-ask-content small { display: block !important; color: #111 !important; font-size: 10px !important; line-height: 1.1 !important; font-weight: 600 !important; white-space: nowrap !important; } /* --------------------------------------------------------- GOLD FINANCE LOGO STOP IT BECOMING THE GIANT IMAGE --------------------------------------------------------- */ .am-home-machinery .amui-card-machinery-ask-logo { position: absolute !important; right: 11px !important; top: 50% !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; max-width: 28px !important; max-height: 28px !important; object-fit: contain !important; margin: 0 !important; transform: translateY(-50%) !important; z-index: 4 !important; } /* --------------------------------------------------------- DEALER VERIFIED BADGE The existing card creates this with ::before --------------------------------------------------------- */ .am-home-machinery .amui-card-machinery-ask-dealer.is-dealer::before { position: absolute !important; left: 10px !important; top: 50% !important; width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; max-width: 30px !important; max-height: 30px !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; transform: translateY(-50%) !important; z-index: 4 !important; } /* --------------------------------------------------------- REMOVE ANY LARGE PSEUDO-ELEMENT FROM ASK DEALER --------------------------------------------------------- */ .am-home-machinery .amui-card-machinery-ask-dealer::after { display: none !important; content: none !important; } /* ========================================================= VIEW DETAILS BUTTON TEXT MUST ALWAYS BE WHITE ========================================================= */ .am-home-machinery .amui-card-view-button, .am-home-machinery .amui-card-view-button:link, .am-home-machinery .amui-card-view-button:visited { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; color: #fff !important; -webkit-text-fill-color: #fff !important; background: #00bd63 !important; text-decoration: none !important; font-weight: 800 !important; } /* Keep hover white too */ .am-home-machinery .amui-card-view-button:hover, .am-home-machinery .amui-card-view-button:focus, .am-home-machinery .amui-card-view-button:active { color: #fff !important; -webkit-text-fill-color: #fff !important; background: #00ad5a !important; } /* ========================================================= SMALLER CARD BREAKPOINTS ========================================================= */ @media (max-width: 1199px) { .am-home-machinery .amui-card-machinery-ask-dealer { padding-left: 43px !important; padding-right: 43px !important; } .am-home-machinery .amui-card-machinery-ask-content strong { font-size: 16px !important; } } @media (max-width: 767px) { .am-home-machinery .amui-card-machinery-ask-dealer { min-height: 50px !important; height: 50px !important; padding-left: 37px !important; padding-right: 37px !important; } .am-home-machinery .amui-card-machinery-ask-content strong { font-size: 13px !important; } .am-home-machinery .amui-card-machinery-ask-content small { font-size: 8px !important; } .am-home-machinery .amui-card-machinery-ask-logo { right: 7px !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; } .am-home-machinery .amui-card-machinery-ask-dealer.is-dealer::before { left: 7px !important; width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; } } /* FORCE VIEW DETAILS TEXT WHITE */ .am-home-machinery .amui-card-actions .amui-card-view-button, .am-home-machinery .amui-card-actions .amui-card-view-button:link, .am-home-machinery .amui-card-actions .amui-card-view-button:visited, .am-home-machinery .amui-card-actions .amui-card-view-button:hover, .am-home-machinery .amui-card-actions .amui-card-view-button:focus, .am-home-machinery .amui-card-actions .amui-card-view-button:active { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Catch text/span rules inherited from the main inventory cards */ .am-home-machinery .amui-card-view-button *, .am-home-machinery .amui-card-view-button span, .am-home-machinery .amui-card-view-button strong { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* FORCE "VIEW MORE MACHINERY" BUTTON TEXT WHITE */ .am-home-machinery__more, .am-home-machinery__more:link, .am-home-machinery__more:visited, .am-home-machinery__more:hover, .am-home-machinery__more:focus, .am-home-machinery__more:active { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: none !important; } /* ========================================================= SELL ANYTHING BANNER — SIZE / ALIGNMENT ========================================================= */ /* DESKTOP + WIDESCREEN Match the 80% machinery carousel width above */ @media (min-width: 1200px) { .am-home-sell { width: 80% !important; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; margin-top: 55px !important; margin-bottom: 60px !important; } .am-home-sell__inner { width: 100% !important; min-height: 400px !important; height: 400px !important; grid-template-columns: 38% 62% !important; } .am-home-sell__content { padding-left: 58px !important; padding-right: 28px !important; } /* * Make the actual image/vehicle side MUCH more dominant. */ .am-home-sell__visual { height: 400px !important; min-height: 400px !important; } .am-home-sell__visual img { width: 220% !important; height: 220% !important; max-width: none !important; max-height: none !important; right: -22% !important; top: 50% !important; object-fit: cover !important; object-position: right center !important; transform: translateY(-50%) !important; } } /* BIG WIDESCREEN */ @media (min-width: 1600px) { .am-home-sell__inner, .am-home-sell__visual { height: 430px !important; min-height: 430px !important; } .am-home-sell__visual img { width: 225% !important; height: 225% !important; right: -23% !important; } } /* SMALL DESKTOP — match 90% machinery width */ @media (min-width: 1024px) and (max-width: 1199px) { .am-home-sell { width: 90% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } .am-home-sell__inner { height: 340px !important; min-height: 340px !important; } .am-home-sell__visual { height: 340px !important; min-height: 340px !important; } .am-home-sell__visual img { width: 220% !important; height: 220% !important; max-width: none !important; right: -24% !important; } } /* TABLET */ @media (min-width: 768px) and (max-width: 1023px) { .am-home-sell { width: 94% !important; margin-left: auto !important; margin-right: auto !important; } .am-home-sell__inner { min-height: 310px !important; } } /* MOBILE */ @media (max-width: 767px) { .am-home-sell { width: calc(100% - 24px) !important; margin-left: auto !important; margin-right: auto !important; } .am-home-sell__visual { height: 260px !important; min-height: 260px !important; } .am-home-sell__visual img { width: 240% !important; height: 240% !important; max-width: none !important; max-height: none !important; right: -30% !important; top: 54% !important; } } /* ========================================================= SELL BANNER — SLIM FINAL OVERRIDE ========================================================= */ @media (min-width: 1200px) { .am-home-sell { width: 80% !important; max-width: 1600px !important; margin: 38px auto 45px !important; } .am-home-sell__inner { width: 100% !important; height: 240px !important; min-height: 240px !important; grid-template-columns: 38% 62% !important; overflow: hidden !important; border-radius: 20px !important; } .am-home-sell__content { height: 240px !important; padding: 30px 48px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .am-home-sell__visual { height: 240px !important; min-height: 240px !important; overflow: hidden !important; position: relative !important; } .am-home-sell__visual img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; position: absolute !important; top: 0 !important; right: 0 !important; transform: none !important; object-fit: cover !important; object-position: center center !important; } } /* SMALL DESKTOP */ @media (min-width: 1024px) and (max-width: 1199px) { .am-home-sell { width: 90% !important; margin: 35px auto 45px !important; } .am-home-sell__inner, .am-home-sell__content, .am-home-sell__visual { height: 225px !important; min-height: 225px !important; } .am-home-sell__visual img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; top: 0 !important; right: 0 !important; transform: none !important; object-fit: cover !important; object-position: center !important; } } /* TABLET */ @media (min-width: 768px) and (max-width: 1023px) { .am-home-sell { width: calc(100% - 40px) !important; margin: 30px auto 40px !important; } .am-home-sell__inner, .am-home-sell__content, .am-home-sell__visual { min-height: 220px !important; } .am-home-sell__visual img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; transform: none !important; object-fit: cover !important; } } /* MOBILE */ @media (max-width: 767px) { .am-home-sell { width: calc(100% - 24px) !important; margin: 28px auto 35px !important; } .am-home-sell__inner { height: auto !important; min-height: 0 !important; } .am-home-sell__visual { height: 180px !important; min-height: 180px !important; } .am-home-sell__visual img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; top: 0 !important; right: 0 !important; transform: none !important; object-fit: cover !important; object-position: center !important; } } /* SELL BANNER — SMALLER HEADING */ @media (min-width: 1200px) { .am-home-sell__content h2 { font-size: 38px !important; line-height: 0.98 !important; letter-spacing: -1px !important; margin-bottom: 16px !important; } } @media (min-width: 768px) and (max-width: 1199px) { .am-home-sell__content h2 { font-size: 32px !important; line-height: 1 !important; } } @media (max-width: 767px) { .am-home-sell__content h2 { font-size: 28px !important; line-height: 1 !important; letter-spacing: -0.5px !important; } } /* ========================================================= MACHINERY CAROUSEL — 5 CARDS ON BIG SCREENS ========================================================= */ @media (min-width: 1200px) { .am-home-machinery__track { gap: 16px !important; } .am-home-machinery__slide { flex: 0 0 calc((100% - 64px) / 5) !important; width: calc((100% - 64px) / 5) !important; min-width: calc((100% - 64px) / 5) !important; max-width: calc((100% - 64px) / 5) !important; } } /* ========================================================= HOMEPAGE MACHINERY USE MOBILE-STYLE CARD DESIGN ON DESKTOP ========================================================= */ @media (min-width: 768px) { /* ----------------------------------------------------- CARD ----------------------------------------------------- */ .am-home-machinery .amui-card { border: 1px solid #1d1d1d !important; border-radius: 18px !important; overflow: hidden !important; background: #fff !important; box-shadow: none !important; } .am-home-machinery .amui-card-content { padding: 8px 10px 10px !important; } /* ----------------------------------------------------- IMAGE ----------------------------------------------------- */ .am-home-machinery .amui-card-image-wrap { border-radius: 14px 14px 0 0 !important; overflow: hidden !important; } .am-home-machinery .amui-card-image { width: 100% !important; aspect-ratio: 1.32 / 1 !important; height: auto !important; object-fit: cover !important; } /* ----------------------------------------------------- TITLE ----------------------------------------------------- */ .am-home-machinery .amui-card-title { min-height: 42px !important; margin: 7px 5px 6px !important; font-size: 15px !important; line-height: 1.08 !important; text-align: center !important; } /* ----------------------------------------------------- SPECS — MOBILE STYLE 2 x 2 Hide the last 2 specs so it matches mobile ----------------------------------------------------- */ .am-home-machinery .amui-card-spec-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; margin: 4px 0 7px !important; } .am-home-machinery .amui-card-spec:nth-child(n+5) { display: none !important; } .am-home-machinery .amui-card-spec { min-width: 0 !important; min-height: 32px !important; padding: 5px 7px !important; box-sizing: border-box !important; } .am-home-machinery .amui-card-spec-value { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 10px !important; } /* ----------------------------------------------------- PRICE — MOBILE STYLE Price first, finance below ----------------------------------------------------- */ .am-home-machinery .amui-card-price-finance { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; min-height: 0 !important; margin: 5px 0 0 !important; padding: 0 !important; border: 0 !important; } /* PRICE ROW */ .am-home-machinery .amui-card-price-block { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 50px !important; margin: 0 !important; padding: 5px 7px !important; box-sizing: border-box !important; border-bottom: 1px solid #d7dfe1 !important; } /* * Existing dealer badge stays on left. */ .am-home-machinery .amui-card-price-block.is-dealer { padding-left: 48px !important; } .am-home-machinery .amui-card-price { font-size: 22px !important; line-height: 1 !important; color: #00bd63 !important; white-space: nowrap !important; } .am-home-machinery .amui-card-price-disclosure { position: absolute !important; left: 50% !important; bottom: 3px !important; transform: translateX(-50%) !important; font-size: 7px !important; line-height: 1 !important; white-space: nowrap !important; } /* OR is not needed in stacked/mobile version */ .am-home-machinery .amui-card-price-divider { display: none !important; } /* ----------------------------------------------------- FINANCE — SECOND ROW ----------------------------------------------------- */ .am-home-machinery .amui-card-finance { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 48px !important; height: 48px !important; margin: 0 !important; padding: 3px 6px !important; box-sizing: border-box !important; border: 0 !important; background: transparent !important; } .am-home-machinery .amui-card-finance-logo { width: 26px !important; height: 26px !important; max-width: 26px !important; max-height: 26px !important; margin: 0 7px 0 0 !important; object-fit: contain !important; } .am-home-machinery .amui-card-finance-value { display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 3px !important; margin: 0 !important; padding: 0 !important; } .am-home-machinery .amui-card-finance-value strong { color: #f2b400 !important; font-size: 22px !important; line-height: 1 !important; } .am-home-machinery .amui-card-finance-value small { color: #111 !important; font-size: 7px !important; font-weight: 800 !important; text-transform: uppercase !important; } /* Hide FROM if present */ .am-home-machinery .amui-card-finance-prefix { display: none !important; } /* ----------------------------------------------------- DISCLAIMER ----------------------------------------------------- */ .am-home-machinery .amui-card-finance-disclaimer { display: block !important; min-height: 0 !important; height: auto !important; margin: 3px 4px 5px !important; padding: 0 !important; color: #00a957 !important; font-size: 7px !important; line-height: 1.2 !important; text-align: center !important; } /* ----------------------------------------------------- VIEW DETAILS ----------------------------------------------------- */ .am-home-machinery .amui-card-actions { margin: 0 !important; padding: 0 !important; } .am-home-machinery .amui-card-view-button { height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 10px !important; border-radius: 999px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; line-height: 42px !important; } /* ----------------------------------------------------- ASK DEALER VERSION Keep same compact stacked visual ----------------------------------------------------- */ .am-home-machinery .amui-card-machinery-ask-dealer { height: 54px !important; min-height: 54px !important; margin: 5px 0 0 !important; border-radius: 8px !important; } } /* ========================================================= 5-CARD WIDESCREEN Slightly reduce text so these still fit beautifully ========================================================= */ @media (min-width: 1200px) { .am-home-machinery .amui-card-title { font-size: 14px !important; } .am-home-machinery .amui-card-price { font-size: 21px !important; } .am-home-machinery .amui-card-finance-value strong { font-size: 21px !important; } } /* ========================================================= LEAVE ACTUAL MOBILE ALONE It already has its own native mobile card styling ========================================================= */ /* ========================================================= HOMEPAGE MACHINERY ASK DEALER = SAME HEIGHT/LAYOUT AS PRICED FINANCE BLOCK ========================================================= */ @media (min-width: 768px) { /* * Turn Ask Dealer into the same stacked two-row block * as PRICE + WEEKLY FINANCE. */ .am-home-machinery .amui-card-machinery-ask-dealer { position: relative !important; display: grid !important; grid-template-columns: 44px 1fr 44px !important; grid-template-rows: 49px 1px 49px !important; width: 100% !important; height: 99px !important; min-height: 99px !important; max-height: 99px !important; margin: 5px 0 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; background: #fff !important; border: 0 !important; border-radius: 0 !important; cursor: pointer !important; } /* * Let ASK DEALER and EXPLORE FINANCE * become separate grid items. */ .am-home-machinery .amui-card-machinery-ask-content { display: contents !important; } /* ===================================================== TOP ROW — ASK DEALER ====================================================== */ .am-home-machinery .amui-card-machinery-ask-content strong { grid-column: 1 / 4 !important; grid-row: 1 !important; align-self: center !important; justify-self: center !important; margin: 0 !important; padding: 0 8px !important; color: #00bd63 !important; font-size: 20px !important; line-height: 1 !important; font-weight: 800 !important; text-align: center !important; white-space: nowrap !important; } /* Give dealer badge room on dealer listings */ .am-home-machinery .amui-card-machinery-ask-dealer.is-dealer .amui-card-machinery-ask-content strong { padding-left: 45px !important; padding-right: 10px !important; } /* ===================================================== DEALER BADGE — TOP LEFT ====================================================== */ .am-home-machinery .amui-card-machinery-ask-dealer.is-dealer::before { display: block !important; position: absolute !important; left: 8px !important; top: 24px !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; transform: translateY(-50%) !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; z-index: 5 !important; } /* ===================================================== DIVIDER ====================================================== */ .am-home-machinery .amui-card-machinery-ask-dealer::after { content: "" !important; display: block !important; position: absolute !important; left: 8px !important; right: 8px !important; top: 49px !important; height: 1px !important; background: #d8dfe0 !important; z-index: 2 !important; } /* ===================================================== BOTTOM ROW — EXPLORE FINANCE ====================================================== */ .am-home-machinery .amui-card-machinery-ask-content small { grid-column: 1 / 4 !important; grid-row: 3 !important; align-self: center !important; justify-self: center !important; margin: 0 !important; padding: 0 8px 0 38px !important; color: #f2b400 !important; font-size: 12px !important; line-height: 1 !important; font-weight: 800 !important; text-align: center !important; text-transform: uppercase !important; white-space: nowrap !important; } /* ===================================================== GOLD FINANCE LOGO — BOTTOM LEFT ====================================================== */ .am-home-machinery .amui-card-machinery-ask-logo { position: absolute !important; left: 35px !important; right: auto !important; top: 74px !important; width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; max-width: 26px !important; max-height: 26px !important; margin: 0 !important; object-fit: contain !important; transform: translateY(-50%) !important; z-index: 5 !important; } /* ===================================================== DISCLAIMER Same position as priced cards ====================================================== */ .am-home-machinery .amui-card-machinery-ask-dealer + .amui-card-finance-disclaimer { margin-top: 3px !important; } } /* ========================================================= MOBILE CAROUSEL Same concept, slightly smaller ========================================================= */ @media (max-width: 767px) { .am-home-machinery .amui-card-machinery-ask-dealer { display: grid !important; grid-template-columns: 36px 1fr 36px !important; grid-template-rows: 42px 1px 42px !important; height: 85px !important; min-height: 85px !important; max-height: 85px !important; padding: 0 !important; } .am-home-machinery .amui-card-machinery-ask-content { display: contents !important; } .am-home-machinery .amui-card-machinery-ask-content strong { grid-column: 1 / 4 !important; grid-row: 1 !important; align-self: center !important; justify-self: center !important; color: #00bd63 !important; font-size: 15px !important; margin: 0 !important; } .am-home-machinery .amui-card-machinery-ask-content small { grid-column: 1 / 4 !important; grid-row: 3 !important; align-self: center !important; justify-self: center !important; padding-left: 30px !important; color: #f2b400 !important; font-size: 9px !important; font-weight: 800 !important; margin: 0 !important; } .am-home-machinery .amui-card-machinery-ask-dealer::after { top: 42px !important; } .am-home-machinery .amui-card-machinery-ask-logo { left: 27px !important; top: 64px !important; width: 21px !important; height: 21px !important; min-width: 21px !important; min-height: 21px !important; max-width: 21px !important; max-height: 21px !important; } .am-home-machinery .amui-card-machinery-ask-dealer.is-dealer::before { left: 7px !important; top: 21px !important; width: 27px !important; height: 27px !important; min-width: 27px !important; min-height: 27px !important; max-width: 27px !important; max-height: 27px !important; } } /* ========================================================= JUST LANDED TRUCKS ========================================================= */ .am-home-trucks, /* ========================================================= JUST LANDED TRUCKS ========================================================= */ .am-home-cars { width: 80% !important; max-width: 1600px !important; margin: 48px auto 60px !important; font-family: Inter, Arial, sans-serif !important; } /* ========================================================= HEADER ========================================================= */ .am-home-trucks__header, /* ========================================================= HEADER ========================================================= */ .am-home-cars__header { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 24px !important; margin-bottom: 20px !important; padding: 0 6px !important; } .am-home-trucks__header h2, .am-home-cars__header h2 { margin: 0 !important; color: #111 !important; font-size: 31px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: -.8px !important; } .am-home-trucks__header h2 > span, .am-home-cars__header h2 > span { color: #00bd63 !important; } .am-home-trucks__header h2 small, .am-home-cars__header h2 small { display: inline !important; color: #111 !important; font-size: .72em !important; font-weight: 700 !important; } .am-home-trucks__more, .am-home-trucks__more:link, .am-home-trucks__more:visited, .am-home-trucks__more:hover, .am-home-cars__more, .am-home-cars__more:link, .am-home-cars__more:visited, .am-home-cars__more:hover { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 38px !important; padding: 0 19px !important; border-radius: 999px !important; background: #00bd63 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 12px !important; font-weight: 800 !important; text-decoration: none !important; } /* ========================================================= CAROUSEL ========================================================= */ .am-home-trucks__carousel, /* ========================================================= CAROUSEL ========================================================= */ .am-home-cars__carousel { position: relative !important; width: 100% !important; padding: 0 34px !important; box-sizing: border-box !important; } .am-home-trucks__track, .am-home-cars__track { display: flex !important; align-items: stretch !important; gap: 16px !important; width: 100% !important; padding: 4px 2px 16px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth !important; scroll-snap-type: x mandatory !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; } .am-home-trucks__track::-webkit-scrollbar, .am-home-cars__track::-webkit-scrollbar { display: none !important; } /* ========================================================= 5 CARDS — LARGE DESKTOP ========================================================= */ .am-home-trucks__slide, /* ========================================================= 5 CARDS — LARGE DESKTOP ========================================================= */ .am-home-cars__slide { flex: 0 0 calc((100% - 64px) / 5) !important; width: calc((100% - 64px) / 5) !important; min-width: calc((100% - 64px) / 5) !important; max-width: calc((100% - 64px) / 5) !important; scroll-snap-align: start !important; box-sizing: border-box !important; } /* ========================================================= MOBILE-STYLE TRUCK CARD ========================================================= */ .am-home-trucks .amui-card, /* ========================================================= MOBILE-STYLE TRUCK CARD ========================================================= */ .am-home-cars .amui-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; overflow: hidden !important; background: #fff !important; border: 1px solid #202020 !important; border-radius: 18px !important; box-shadow: none !important; box-sizing: border-box !important; } .am-home-trucks .amui-card-content, .am-home-cars .amui-card-content { padding: 8px 10px 10px !important; } /* IMAGE */ .am-home-trucks .amui-card-image-wrap, /* IMAGE */ .am-home-cars .amui-card-image-wrap { overflow: hidden !important; border-radius: 14px 14px 0 0 !important; } .am-home-trucks .amui-card-image, .am-home-cars .amui-card-image { display: block !important; width: 100% !important; aspect-ratio: 1.32 / 1 !important; height: auto !important; object-fit: cover !important; } /* ========================================================= TITLE ========================================================= */ .am-home-trucks .amui-card-title, /* ========================================================= TITLE ========================================================= */ .am-home-cars .amui-card-title { min-height: 42px !important; margin: 7px 4px 6px !important; font-size: 14px !important; line-height: 1.08 !important; text-align: center !important; } /* ========================================================= 2 × 2 MOBILE-STYLE SPECS ========================================================= */ .am-home-trucks .amui-card-spec-grid, /* ========================================================= 2 × 2 MOBILE-STYLE SPECS ========================================================= */ .am-home-cars .amui-card-spec-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; margin: 4px 0 7px !important; } /* * Mobile-style card: * only first 4 specs. */ .am-home-trucks .amui-card-spec:nth-child(n+5), /* * Mobile-style card: * only first 4 specs. */ .am-home-cars .amui-card-spec:nth-child(n+5) { display: none !important; } .am-home-trucks .amui-card-spec, .am-home-cars .amui-card-spec { min-width: 0 !important; min-height: 32px !important; padding: 5px 7px !important; box-sizing: border-box !important; } .am-home-trucks .amui-card-spec-value, .am-home-cars .amui-card-spec-value { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 10px !important; } /* ========================================================= PRICE + FINANCE — STACKED LIKE MOBILE ========================================================= */ .am-home-trucks .amui-card-price-finance, /* ========================================================= PRICE + FINANCE — STACKED LIKE MOBILE ========================================================= */ .am-home-cars .amui-card-price-finance { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; min-height: 0 !important; margin: 5px 0 0 !important; padding: 0 !important; border: 0 !important; } /* PRICE ROW */ .am-home-trucks .amui-card-price-block, /* PRICE ROW */ .am-home-cars .amui-card-price-block { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 50px !important; margin: 0 !important; padding: 5px 7px !important; box-sizing: border-box !important; border-bottom: 1px solid #d7dfe1 !important; } .am-home-trucks .amui-card-price-block.is-dealer, .am-home-cars .amui-card-price-block.is-dealer { padding-left: 48px !important; } .am-home-trucks .amui-card-price, .am-home-cars .amui-card-price { color: #00bd63 !important; font-size: 21px !important; line-height: 1 !important; white-space: nowrap !important; } .am-home-trucks .amui-card-price-disclosure, .am-home-cars .amui-card-price-disclosure { position: absolute !important; left: 50% !important; bottom: 3px !important; transform: translateX(-50%) !important; font-size: 7px !important; line-height: 1 !important; white-space: nowrap !important; } /* NO OR IN STACKED MOBILE DESIGN */ .am-home-trucks .amui-card-price-divider, /* NO OR IN STACKED MOBILE DESIGN */ .am-home-cars .amui-card-price-divider { display: none !important; } /* ========================================================= FINANCE ROW ========================================================= */ .am-home-trucks .amui-card-finance, /* ========================================================= FINANCE ROW ========================================================= */ .am-home-cars .amui-card-finance { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 3px 6px !important; box-sizing: border-box !important; border: 0 !important; background: transparent !important; cursor: pointer !important; } .am-home-trucks .amui-card-finance-logo, .am-home-cars .amui-card-finance-logo { width: 26px !important; height: 26px !important; min-width: 26px !important; max-width: 26px !important; max-height: 26px !important; margin: 0 7px 0 0 !important; object-fit: contain !important; } .am-home-trucks .amui-card-finance-value, .am-home-cars .amui-card-finance-value { display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 3px !important; margin: 0 !important; padding: 0 !important; } .am-home-trucks .amui-card-finance-value strong, .am-home-cars .amui-card-finance-value strong { color: #f2b400 !important; font-size: 21px !important; line-height: 1 !important; } .am-home-trucks .amui-card-finance-value small, .am-home-cars .amui-card-finance-value small { color: #111 !important; font-size: 7px !important; font-weight: 800 !important; text-transform: uppercase !important; } .am-home-trucks .amui-card-finance-prefix, .am-home-cars .amui-card-finance-prefix { display: none !important; } /* ========================================================= DISCLAIMER ========================================================= */ .am-home-trucks .amui-card-finance-disclaimer, /* ========================================================= DISCLAIMER ========================================================= */ .am-home-cars .amui-card-finance-disclaimer { display: block !important; min-height: 0 !important; margin: 3px 4px 5px !important; padding: 0 !important; color: #00a957 !important; font-size: 7px !important; line-height: 1.2 !important; text-align: center !important; } /* ========================================================= VIEW DETAILS ========================================================= */ .am-home-trucks .amui-card-actions, /* ========================================================= VIEW DETAILS ========================================================= */ .am-home-cars .amui-card-actions { margin: 0 !important; padding: 0 !important; } .am-home-trucks .amui-card-view-button, .am-home-trucks .amui-card-view-button:link, .am-home-trucks .amui-card-view-button:visited, .am-home-trucks .amui-card-view-button:hover, .am-home-cars .amui-card-view-button, .am-home-cars .amui-card-view-button:link, .am-home-cars .amui-card-view-button:visited, .am-home-cars .amui-card-view-button:hover { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 10px !important; border-radius: 999px !important; background: #00bd63 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800 !important; text-decoration: none !important; } /* ========================================================= ASK DEALER SAME TWO-ROW HEIGHT AS PRICED CARD ========================================================= */ .am-home-trucks .amui-card-machinery-ask-dealer, /* ========================================================= ASK DEALER SAME TWO-ROW HEIGHT AS PRICED CARD ========================================================= */ .am-home-cars .amui-card-machinery-ask-dealer { position: relative !important; display: grid !important; grid-template-columns: 44px 1fr 44px !important; grid-template-rows: 49px 1px 49px !important; width: 100% !important; height: 99px !important; min-height: 99px !important; max-height: 99px !important; margin: 5px 0 0 !important; padding: 0 !important; overflow: hidden !important; background: #fff !important; border: 0 !important; border-radius: 0 !important; cursor: pointer !important; box-sizing: border-box !important; } .am-home-trucks .amui-card-machinery-ask-content, .am-home-cars .amui-card-machinery-ask-content { display: contents !important; } /* ASK DEALER */ .am-home-trucks .amui-card-machinery-ask-content strong, /* ASK DEALER */ .am-home-cars .amui-card-machinery-ask-content strong { grid-column: 1 / 4 !important; grid-row: 1 !important; align-self: center !important; justify-self: center !important; margin: 0 !important; color: #00bd63 !important; font-size: 19px !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; } /* DIVIDER */ .am-home-trucks .amui-card-machinery-ask-dealer::after, /* DIVIDER */ .am-home-cars .amui-card-machinery-ask-dealer::after { content: "" !important; display: block !important; position: absolute !important; left: 8px !important; right: 8px !important; top: 49px !important; height: 1px !important; background: #d8dfe0 !important; } /* EXPLORE FINANCE */ .am-home-trucks .amui-card-machinery-ask-content small, /* EXPLORE FINANCE */ .am-home-cars .amui-card-machinery-ask-content small { grid-column: 1 / 4 !important; grid-row: 3 !important; align-self: center !important; justify-self: center !important; padding-left: 34px !important; color: #f2b400 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 800 !important; text-transform: uppercase !important; white-space: nowrap !important; } /* GOLD LOGO */ .am-home-trucks .amui-card-machinery-ask-logo, /* GOLD LOGO */ .am-home-cars .amui-card-machinery-ask-logo { position: absolute !important; left: 34px !important; right: auto !important; top: 74px !important; width: 25px !important; height: 25px !important; min-width: 25px !important; max-width: 25px !important; max-height: 25px !important; transform: translateY(-50%) !important; object-fit: contain !important; } /* DEALER BADGE */ .am-home-trucks .amui-card-machinery-ask-dealer.is-dealer::before, /* DEALER BADGE */ .am-home-cars .amui-card-machinery-ask-dealer.is-dealer::before { left: 8px !important; top: 24px !important; width: 31px !important; height: 31px !important; min-width: 31px !important; max-width: 31px !important; max-height: 31px !important; transform: translateY(-50%) !important; background-size: contain !important; } /* ========================================================= ARROWS ========================================================= */ .am-home-trucks__arrow, /* ========================================================= ARROWS ========================================================= */ .am-home-cars__arrow { position: absolute !important; z-index: 30 !important; top: 46% !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.97) !important; box-shadow: 0 6px 20px rgba(0,0,0,.10) !important; color: #00bd63 !important; font-size: 38px !important; line-height: 1 !important; cursor: pointer !important; transform: translateY(-50%) !important; } .am-home-trucks__arrow--left, .am-home-cars__arrow--left { left: 3px !important; } .am-home-trucks__arrow--right, .am-home-cars__arrow--right { right: 3px !important; } .am-home-trucks__arrow.is-disabled, .am-home-cars__arrow.is-disabled { opacity: .2 !important; pointer-events: none !important; } /* ========================================================= SMALL DESKTOP — 3 ========================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { .am-home-trucks, .am-home-cars { width: 90% !important; } .am-home-trucks__slide, .am-home-cars__slide { flex: 0 0 calc((100% - 32px) / 3) !important; width: calc((100% - 32px) / 3) !important; min-width: calc((100% - 32px) / 3) !important; max-width: calc((100% - 32px) / 3) !important; } } /* ========================================================= TABLET — 2 ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .am-home-trucks, .am-home-cars { width: 94% !important; } .am-home-trucks__carousel, .am-home-cars__carousel { padding: 0 24px !important; } .am-home-trucks__slide, .am-home-cars__slide { flex: 0 0 calc((100% - 14px) / 2) !important; width: calc((100% - 14px) / 2) !important; min-width: calc((100% - 14px) / 2) !important; max-width: calc((100% - 14px) / 2) !important; } } /* ========================================================= MOBILE — 2 ========================================================= */ @media (max-width: 767px) { .am-home-trucks, .am-home-cars { width: 100% !important; margin: 32px 0 40px !important; overflow: hidden !important; } .am-home-trucks__header, .am-home-cars__header { padding: 0 16px !important; margin-bottom: 15px !important; } .am-home-trucks__header h2, .am-home-cars__header h2 { font-size: 22px !important; } .am-home-trucks__header h2 small, .am-home-cars__header h2 small { font-size: 13px !important; } .am-home-trucks__more, .am-home-cars__more { min-height: 32px !important; padding: 0 12px !important; font-size: 9px !important; } .am-home-trucks__carousel, .am-home-cars__carousel { padding: 0 16px !important; } .am-home-trucks__track, .am-home-cars__track { gap: 10px !important; } .am-home-trucks__slide, .am-home-cars__slide { flex: 0 0 calc((100% - 10px) / 2) !important; width: calc((100% - 10px) / 2) !important; min-width: calc((100% - 10px) / 2) !important; max-width: calc((100% - 10px) / 2) !important; } .am-home-trucks .amui-card-title, .am-home-cars .amui-card-title { font-size: 12px !important; } .am-home-trucks .amui-card-price, .am-home-cars .amui-card-price { font-size: 18px !important; } .am-home-trucks .amui-card-finance-value strong, .am-home-cars .amui-card-finance-value strong { font-size: 18px !important; } } /* ========================================================= HOMEPAGE CAROUSEL EDGE ALIGNMENT Cards line up exactly with section heading + sell banner ========================================================= */ @media (min-width: 1024px) { /* TRUCKS */ .am-home-trucks__carousel, /* TRUCKS */ .am-home-cars__carousel { padding-left: 0 !important; padding-right: 0 !important; } .am-home-trucks__track, .am-home-cars__track { padding-left: 0 !important; padding-right: 0 !important; } .am-home-trucks__header, .am-home-cars__header { padding-left: 0 !important; padding-right: 0 !important; } /* MACHINERY — match the same alignment above */ .am-home-machinery__carousel { padding-left: 0 !important; padding-right: 0 !important; } .am-home-machinery__track { padding-left: 0 !important; padding-right: 0 !important; } .am-home-machinery__header { padding-left: 0 !important; padding-right: 0 !important; } /* * Put arrows slightly outside the card edge * so they don't steal horizontal space. */ .am-home-trucks__arrow--left, .am-home-machinery__arrow--left, /* * Put arrows slightly outside the card edge * so they don't steal horizontal space. */ .am-home-cars__arrow--left { left: -24px !important; } .am-home-trucks__arrow--right, .am-home-machinery__arrow--right, .am-home-cars__arrow--right { right: -24px !important; } } /* ========================================================= HOMEPAGE MACHINERY + TRUCKS FINAL ARROW + PRICE DISCLOSURE POLISH ========================================================= */ /* ========================================================= 1. ALLOW ARROWS TO SIT OUTSIDE CARD ROW ========================================================= */ .am-home-machinery, .am-home-trucks, .am-home-cars { overflow: visible !important; } .am-home-machinery__carousel, .am-home-trucks__carousel, .am-home-cars__carousel { position: relative !important; width: 100% !important; /* * Cards themselves continue to start/end * exactly on the section edges. */ padding-left: 0 !important; padding-right: 0 !important; overflow: visible !important; } /* * Keep carousel track itself scrollable. */ .am-home-machinery__track, .am-home-trucks__track, .am-home-cars__track { overflow-x: auto !important; overflow-y: hidden !important; padding-left: 0 !important; padding-right: 0 !important; scrollbar-width: none !important; } .am-home-machinery__track::-webkit-scrollbar, .am-home-trucks__track::-webkit-scrollbar, .am-home-cars__track::-webkit-scrollbar { display: none !important; } /* ========================================================= 2. SHARED OUTSIDE ARROWS ========================================================= */ .am-home-machinery__arrow, .am-home-trucks__arrow, .am-home-cars__arrow { position: absolute !important; top: 50% !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 50% !important; background: #ffffff !important; color: #00bd63 !important; -webkit-text-fill-color: #00bd63 !important; box-shadow: 0 5px 20px rgba(0,0,0,.12) !important; font-size: 38px !important; font-weight: 400 !important; line-height: 1 !important; cursor: pointer !important; transform: translateY(-50%) !important; z-index: 50 !important; visibility: visible !important; } /* * LEFT ARROWS * Sit completely outside first card. */ .am-home-machinery__arrow--left, .am-home-trucks__arrow--left, .am-home-cars__arrow--left { left: -58px !important; } /* * RIGHT ARROWS * Sit completely outside last card. */ .am-home-machinery__arrow--right, .am-home-trucks__arrow--right, .am-home-cars__arrow--right { right: -58px !important; } /* * Disabled arrow stays visible but faint. * This means you can still SEE that it exists, * rather than it mysteriously disappearing. */ .am-home-machinery__arrow.is-disabled, .am-home-trucks__arrow.is-disabled, .am-home-cars__arrow.is-disabled { display: flex !important; visibility: visible !important; opacity: .18 !important; pointer-events: none !important; } /* ========================================================= 3. LARGE / NORMAL DESKTOP ARROW POSITION ========================================================= */ @media (min-width: 1200px) { .am-home-machinery__arrow--left, .am-home-trucks__arrow--left, .am-home-cars__arrow--left { left: -58px !important; } .am-home-machinery__arrow--right, .am-home-trucks__arrow--right, .am-home-cars__arrow--right { right: -58px !important; } } /* ========================================================= 4. SMALL DESKTOP ========================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { .am-home-machinery__arrow--left, .am-home-trucks__arrow--left, .am-home-cars__arrow--left { left: -48px !important; } .am-home-machinery__arrow--right, .am-home-trucks__arrow--right, .am-home-cars__arrow--right { right: -48px !important; } } /* ========================================================= 5. TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .am-home-machinery__arrow, .am-home-trucks__arrow, .am-home-cars__arrow { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; font-size: 33px !important; } .am-home-machinery__arrow--left, .am-home-trucks__arrow--left, .am-home-cars__arrow--left { left: -16px !important; } .am-home-machinery__arrow--right, .am-home-trucks__arrow--right, .am-home-cars__arrow--right { right: -16px !important; } } /* ========================================================= 6. MOBILE ========================================================= */ @media (max-width: 767px) { .am-home-machinery__arrow, .am-home-trucks__arrow, .am-home-cars__arrow { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; font-size: 28px !important; box-shadow: 0 4px 14px rgba(0,0,0,.10) !important; } .am-home-machinery__arrow--left, .am-home-trucks__arrow--left, .am-home-cars__arrow--left { left: -4px !important; } .am-home-machinery__arrow--right, .am-home-trucks__arrow--right, .am-home-cars__arrow--right { right: -4px !important; } } /* ========================================================= 7. PRICE AREA GREEN PRICE FIRST GST / EX GST DIRECTLY UNDERNEATH ========================================================= */ .am-home-machinery .amui-card-price-block, .am-home-trucks .amui-card-price-block, .am-home-cars .amui-card-price-block { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; position: relative !important; } /* * Green price. */ .am-home-machinery .amui-card-price, .am-home-trucks .amui-card-price, .am-home-cars .amui-card-price { order: 1 !important; display: block !important; margin: 0 !important; color: #00bd63 !important; text-align: center !important; } /* * GST INCLUSIVE / EX GST * This used to sit above the price. * * Now it sits immediately underneath it. */ .am-home-machinery .amui-card-price-disclosure, .am-home-trucks .amui-card-price-disclosure, .am-home-cars .amui-card-price-disclosure { order: 2 !important; position: static !important; display: block !important; width: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; margin: 2px 0 0 !important; padding: 0 !important; color: #111111 !important; font-size: 7px !important; line-height: 1 !important; font-weight: 800 !important; text-align: center !important; white-space: nowrap !important; } /* ========================================================= 8. DEALER BADGE KEEP IT LEFT OF PRICE AREA ========================================================= */ .am-home-machinery .amui-card-price-block.is-dealer, .am-home-trucks .amui-card-price-block.is-dealer, .am-home-cars .amui-card-price-block.is-dealer { padding-left: 48px !important; } /* ========================================================= MOBILE DISCLOSURE ========================================================= */ @media (max-width: 767px) { .am-home-machinery .amui-card-price-disclosure, .am-home-trucks .amui-card-price-disclosure, .am-home-cars .amui-card-price-disclosure { margin-top: 2px !important; font-size: 6px !important; } } /* ========================================================= FIVE WORLDS — MATCH MACHINERY SECTION WIDTH ========================================================= */ @media (min-width: 1200px) { .am-home-worlds { width: 80% !important; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; } /* * Turn the section into: * TITLE * CATEGORY STRIP */ .am-home-worlds__inner { display: flex !important; flex-direction: column !important; width: 100% !important; overflow: visible !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } /* * The text panel moves ABOVE the category images. */ .am-home-worlds__copy { order: -1 !important; width: 100% !important; max-width: none !important; min-height: 0 !important; padding: 0 !important; margin: 0 0 20px !important; background: transparent !important; text-align: left !important; } .am-home-worlds__copy h2 { margin: 0 0 8px !important; font-size: 31px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: -.7px !important; color: #111 !important; } .am-home-worlds__copy h2 span { color: #00bd63 !important; } .am-home-worlds__copy p { margin: 0 !important; color: #111 !important; font-size: 14px !important; line-height: 1.4 !important; max-width: 430px !important; } /* * Category strip now uses FULL available width. * Keep the actual cards/panels exactly as they are. */ .am-home-worlds__items { width: 100% !important; flex: 0 0 100% !important; border-radius: 20px !important; overflow: hidden !important; } } /* ========================================================= SMALL DESKTOP ========================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { .am-home-worlds { width: 90% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } .am-home-worlds__inner { display: flex !important; flex-direction: column !important; background: transparent !important; box-shadow: none !important; } .am-home-worlds__copy { order: -1 !important; width: 100% !important; padding: 0 !important; margin: 0 0 18px !important; background: transparent !important; } .am-home-worlds__items { width: 100% !important; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .am-home-worlds { width: 94% !important; margin-left: auto !important; margin-right: auto !important; } .am-home-worlds__inner { display: flex !important; flex-direction: column !important; background: transparent !important; box-shadow: none !important; } .am-home-worlds__copy { order: -1 !important; width: 100% !important; padding: 0 !important; margin: 0 0 16px !important; background: transparent !important; } .am-home-worlds__copy h2 { font-size: 27px !important; } .am-home-worlds__items { width: 100% !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .am-home-worlds { width: calc(100% - 24px) !important; margin-left: auto !important; margin-right: auto !important; } .am-home-worlds__inner { display: flex !important; flex-direction: column !important; background: transparent !important; box-shadow: none !important; } .am-home-worlds__copy { order: -1 !important; width: 100% !important; padding: 0 !important; margin: 0 0 14px !important; background: transparent !important; } .am-home-worlds__copy h2 { font-size: 24px !important; line-height: 1 !important; } .am-home-worlds__copy p { font-size: 12px !important; } .am-home-worlds__items { width: 100% !important; } } /* ========================================================= FIVE WORLDS — FINAL LAYOUT Match Just Landed section width ========================================================= */ /* ========================================================= DESKTOP / WIDESCREEN ========================================================= */ @media (min-width: 1200px) { /* SAME WIDTH AS JUST LANDED */ .am-worlds { width: 80% !important; max-width: 1600px !important; margin: 42px auto 48px !important; overflow: visible !important; } /* * Change: * [ IMAGES ][ COPY ] * * into: * * [ COPY ] * [ IMAGES ] */ .am-worlds .am-worlds__inner { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; gap: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ===================================================== HEADING ABOVE ====================================================== */ .am-worlds .am-worlds__copy { order: 1 !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; flex: none !important; margin: 0 0 20px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important; } /* * Make: * * ONE * MARKETPLACE. * FIVE WORLDS. * * become one clean heading. */ .am-worlds .am-worlds__copy h2 { display: block !important; margin: 0 0 8px !important; padding: 0 !important; color: #111111 !important; font-size: 31px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: -.7px !important; white-space: normal !important; } .am-worlds .am-worlds__copy h2 br { display: none !important; } .am-worlds .am-worlds__copy h2 span { display: inline !important; margin-left: 7px !important; color: #00bd63 !important; } .am-worlds .am-worlds__copy p { margin: 0 !important; padding: 0 !important; color: #111111 !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 400 !important; } .am-worlds .am-worlds__copy p br { display: none !important; } /* ===================================================== IMAGE CATEGORY STRIP ====================================================== */ .am-worlds .am-worlds__strip { order: 2 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; margin: 0 !important; /* * Preserve the current category card sizing/style. * We only make their container occupy the full * available width. */ overflow: hidden !important; border-radius: 22px !important; } /* * Remove any old space reserved for the copy panel. */ .am-worlds .am-world-card { height: auto; } } /* ========================================================= SMALL DESKTOP ========================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { .am-worlds { width: 90% !important; max-width: none !important; margin: 38px auto 45px !important; } .am-worlds .am-worlds__inner { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .am-worlds .am-worlds__copy { order: 1 !important; width: 100% !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: 0 0 18px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .am-worlds .am-worlds__copy h2 { margin: 0 0 7px !important; font-size: 29px !important; line-height: 1 !important; color: #111 !important; } .am-worlds .am-worlds__copy h2 br, .am-worlds .am-worlds__copy p br { display: none !important; } .am-worlds .am-worlds__copy h2 span { display: inline !important; margin-left: 6px !important; color: #00bd63 !important; } .am-worlds .am-worlds__strip { order: 2 !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; border-radius: 20px !important; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .am-worlds { width: 94% !important; margin: 34px auto 40px !important; } .am-worlds .am-worlds__inner { display: flex !important; flex-direction: column !important; background: transparent !important; box-shadow: none !important; } .am-worlds .am-worlds__copy { order: 1 !important; width: 100% !important; min-height: 0 !important; margin: 0 0 16px !important; padding: 0 !important; background: transparent !important; } .am-worlds .am-worlds__copy h2 { margin: 0 0 7px !important; font-size: 26px !important; line-height: 1 !important; } .am-worlds .am-worlds__copy h2 br, .am-worlds .am-worlds__copy p br { display: none !important; } .am-worlds .am-worlds__copy h2 span { display: inline !important; margin-left: 5px !important; } .am-worlds .am-worlds__strip { order: 2 !important; width: 100% !important; max-width: 100% !important; border-radius: 18px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .am-worlds { width: calc(100% - 24px) !important; margin: 28px auto 34px !important; } .am-worlds .am-worlds__inner { display: flex !important; flex-direction: column !important; width: 100% !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .am-worlds .am-worlds__copy { order: 1 !important; width: 100% !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: 0 0 14px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .am-worlds .am-worlds__copy h2 { margin: 0 0 7px !important; font-size: 23px !important; line-height: 1.02 !important; color: #111 !important; } .am-worlds .am-worlds__copy h2 br, .am-worlds .am-worlds__copy p br { display: none !important; } .am-worlds .am-worlds__copy h2 span { display: inline !important; margin-left: 5px !important; color: #00bd63 !important; } .am-worlds .am-worlds__copy p { margin: 0 !important; font-size: 12px !important; line-height: 1.4 !important; } .am-worlds .am-worlds__strip { order: 2 !important; width: 100% !important; max-width: 100% !important; border-radius: 16px !important; } } /* ========================================================= FIVE WORLDS — HEADING ONE LINE ========================================================= */ @media (min-width: 768px) { .am-worlds .am-worlds__copy { width: 100% !important; max-width: 100% !important; } .am-worlds .am-worlds__copy h2 { display: block !important; width: 100% !important; max-width: none !important; margin: 0 0 7px !important; font-size: 30px !important; line-height: 1.05 !important; font-weight: 900 !important; letter-spacing: -0.7px !important; white-space: nowrap !important; color: #111 !important; } /* Kill the original forced line breaks */ .am-worlds .am-worlds__copy h2 br { display: none !important; } /* Green FIVE WORLDS on same line */ .am-worlds .am-worlds__copy h2 span { display: inline !important; margin: 0 0 0 7px !important; padding: 0 !important; color: #00bd63 !important; white-space: nowrap !important; } .am-worlds .am-worlds__copy p { margin: 0 !important; font-size: 14px !important; line-height: 1.4 !important; } .am-worlds .am-worlds__copy p br { display: none !important; } } /* MOBILE — allow sensible wrapping if screen is too narrow */ @media (max-width: 767px) { .am-worlds .am-worlds__copy h2 { width: 100% !important; max-width: none !important; margin: 0 0 6px !important; font-size: 21px !important; line-height: 1.05 !important; letter-spacing: -0.4px !important; white-space: nowrap !important; } .am-worlds .am-worlds__copy h2 br { display: none !important; } .am-worlds .am-worlds__copy h2 span { display: inline !important; margin-left: 4px !important; white-space: nowrap !important; } } /* ========================================================= FIVE WORLDS — BODY COPY ONE LINE + REMOVE GREEN LINE ========================================================= */ .am-worlds .am-worlds__copy p { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.4 !important; white-space: nowrap !important; } /* Remove original forced line break */ .am-worlds .am-worlds__copy p br { display: none !important; } /* Remove any old decorative green divider */ .am-worlds .am-worlds__copy::before, .am-worlds .am-worlds__copy::after, .am-worlds .am-worlds__copy h2::before, .am-worlds .am-worlds__copy h2::after, .am-worlds .am-worlds__copy p::before, .am-worlds .am-worlds__copy p::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; border: 0 !important; background: none !important; } /* MOBILE */ @media (max-width: 767px) { .am-worlds .am-worlds__copy p { font-size: 12px !important; white-space: normal !important; } } /* ========================================================= HOMEPAGE STATS — MATCH CATEGORY WIDTH + CONDENSE ========================================================= */ @media (min-width: 1200px) { /* EXACT SAME OUTER WIDTH AS CATEGORIES / JUST LANDED */ .am-home-stats { width: 80% !important; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; } /* * LEFT CARD | MAP | RIGHT CARD * * Keep map central, but bring the two cards much * closer to it. */ .am-home-stats__inner { display: grid !important; grid-template-columns: minmax(0, 1fr) 330px minmax(0, 1fr) !important; align-items: center !important; column-gap: 24px !important; width: 100% !important; max-width: none !important; } /* ===================================================== LEFT WHITE CARD ====================================================== */ .am-home-stats__intro { width: 100% !important; max-width: none !important; min-height: 190px !important; padding: 30px 34px !important; box-sizing: border-box !important; } .am-home-stats__intro h2 { margin: 0 0 12px !important; font-size: 27px !important; line-height: .95 !important; letter-spacing: -.5px !important; } .am-home-stats__intro p { margin: 0 !important; font-size: 12px !important; line-height: 1.45 !important; } /* ===================================================== MAP KEEP VISUAL SIZE / STYLE ====================================================== */ .am-home-stats__map { width: 330px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } .am-home-stats__map img { /* Do not enlarge/crop/change map */ max-width: 100% !important; object-fit: contain !important; } /* ===================================================== METRICS ====================================================== */ .am-home-stats__metrics { gap: 22px !important; } .am-home-stat { gap: 11px !important; } .am-home-stat__icon { flex: 0 0 36px !important; width: 36px !important; height: 36px !important; } .am-home-stat strong { font-size: 25px !important; line-height: 1 !important; } .am-home-stat span { margin-top: 3px !important; font-size: 9px !important; line-height: 1.15 !important; } } /* ========================================================= SMALL DESKTOP ========================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { .am-home-stats { width: 90% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } .am-home-stats__inner { grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr) !important; column-gap: 18px !important; } .am-home-stats__map { width: 260px !important; } .am-home-stats__intro { padding: 25px 28px !important; } .am-home-stats__intro h2 { font-size: 24px !important; } .am-home-stat strong { font-size: 22px !important; } } /* ========================================================= HOMEPAGE AUSTRALIA STATS — FINAL 3-PART LAYOUT [ LEFT WHITE PANEL ] [ MAP ] [ RIGHT WHITE PANEL ] Uses existing HTML — no markup changes. ========================================================= */ @media (min-width: 1200px) { /* ===================================================== SAME WIDTH AS FIVE WORLDS + JUST LANDED ====================================================== */ .am-home-stats { width: 80% !important; max-width: 1600px !important; margin: 34px auto 42px !important; overflow: visible !important; } /* ===================================================== FIVE EXISTING CHILDREN ARRANGED ACROSS 3 VISUAL AREAS ====================================================== */ .am-home-stats__inner { position: relative !important; display: grid !important; grid-template-columns: minmax(240px, 1.15fr) minmax(145px, .72fr) 330px minmax(150px, .8fr) minmax(150px, .8fr) !important; grid-template-rows: 190px !important; align-items: center !important; column-gap: 14px !important; width: 100% !important; max-width: none !important; min-height: 190px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ===================================================== CREATE THE TWO WHITE BOXES BEHIND EXISTING CONTENT ====================================================== */ .am-home-stats__inner::before, .am-home-stats__inner::after { content: "" !important; display: block !important; align-self: stretch !important; margin: 0 !important; background: #ffffff !important; border: 0 !important; border-radius: 18px !important; box-shadow: 0 8px 28px rgba(0,0,0,.08) !important; z-index: 0 !important; pointer-events: none !important; } /* LEFT BOX — INTRO + 2 STATS */ .am-home-stats__inner::before { grid-column: 1 / 3 !important; grid-row: 1 !important; } /* RIGHT BOX — 4 STATS */ .am-home-stats__inner::after { grid-column: 4 / 6 !important; grid-row: 1 !important; } /* Keep real content above the background cards */ .am-home-stats__inner > * { position: relative !important; z-index: 2 !important; } /* ===================================================== LEFT INTRO ====================================================== */ .am-home-stats__intro { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; width: auto !important; max-width: none !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 25px 12px 25px 30px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .am-home-stats__intro h2 { margin: 0 0 11px !important; font-size: 25px !important; line-height: .96 !important; font-weight: 900 !important; letter-spacing: -.5px !important; } .am-home-stats__intro p { margin: 0 !important; font-size: 11px !important; line-height: 1.45 !important; white-space: nowrap !important; } /* * We don't need Explore Listings here anymore. */ .am-home-stats__cta { display: none !important; } /* ===================================================== LEFT METRICS CHILD 2 ====================================================== */ .am-home-stats__inner > .am-home-stats__metrics:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 25px !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 22px 22px 22px 5px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ===================================================== MAP — LEAVE VISUAL SIZE ALONE ====================================================== */ .am-home-stats__map { grid-column: 3 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 330px !important; max-width: 330px !important; height: 190px !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .am-home-stats__map img { display: block !important; max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; margin: auto !important; } /* ===================================================== RIGHT METRICS — FIRST COLUMN CHILD 4 ====================================================== */ .am-home-stats__inner > .am-home-stats__metrics:nth-child(4) { grid-column: 4 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 25px !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 22px 5px 22px 28px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ===================================================== RIGHT METRICS — FAR RIGHT COLUMN CHILD 5 ====================================================== */ .am-home-stats__inner > .am-home-stats__metrics:nth-child(5) { grid-column: 5 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 25px !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 22px 25px 22px 5px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ===================================================== INDIVIDUAL STAT ====================================================== */ .am-home-stats .am-home-stat { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .am-home-stats .am-home-stat__icon { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 34px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; margin: 0 !important; border-radius: 9px !important; font-size: 14px !important; } .am-home-stats .am-home-stat > div:last-child { min-width: 0 !important; } .am-home-stats .am-home-stat strong { display: block !important; margin: 0 !important; font-size: 22px !important; line-height: .95 !important; font-weight: 800 !important; white-space: nowrap !important; } .am-home-stats .am-home-stat span { display: block !important; margin: 3px 0 0 !important; font-size: 8px !important; line-height: 1.15 !important; font-weight: 600 !important; white-space: nowrap !important; } } /* ========================================================= SMALL DESKTOP ========================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { .am-home-stats { width: 90% !important; max-width: none !important; } .am-home-stats__inner { grid-template-columns: minmax(220px, 1.15fr) minmax(125px, .7fr) 260px minmax(130px, .8fr) minmax(130px, .8fr) !important; grid-template-rows: 180px !important; column-gap: 10px !important; } .am-home-stats__map { width: 260px !important; max-width: 260px !important; height: 180px !important; } .am-home-stats__intro { padding-left: 24px !important; } .am-home-stats__intro h2 { font-size: 22px !important; } .am-home-stats .am-home-stat strong { font-size: 19px !important; } } /* ========================================================= AUSTRALIA STATS — CORRECT FINAL DESKTOP LAYOUT ========================================================= */ @media (min-width: 1200px) { /* SAME OUTER WIDTH AS FIVE WORLDS / JUST LANDED */ .am-home-stats { width: 80% !important; max-width: 1600px !important; margin: 34px auto 42px !important; overflow: visible !important; } /* ----------------------------------------------------- FIVE EXISTING HTML COLUMNS intro | left stats | map | right stats | far right ----------------------------------------------------- */ .am-home-stats__inner { --am-stats-map: 300px; position: relative !important; display: grid !important; grid-template-columns: 1.18fr .72fr var(--am-stats-map) .82fr .82fr !important; grid-template-rows: 180px !important; align-items: center !important; column-gap: 18px !important; width: 100% !important; max-width: none !important; min-height: 180px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ----------------------------------------------------- ACTUAL SHARED WHITE BOXES Absolute so they sit BEHIND the content. ----------------------------------------------------- */ .am-home-stats__inner::before, .am-home-stats__inner::after { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; display: block !important; background: #fff !important; border: 0 !important; border-radius: 20px !important; box-shadow: 0 8px 28px rgba(0,0,0,.075) !important; pointer-events: none !important; z-index: 0 !important; } /* LEFT PANEL */ .am-home-stats__inner::before { left: 0 !important; width: calc( (100% - var(--am-stats-map) - 72px) / 2 ) !important; } /* RIGHT PANEL */ .am-home-stats__inner::after { right: 0 !important; width: calc( (100% - var(--am-stats-map) - 72px) / 2 ) !important; } /* REAL CONTENT ABOVE WHITE BOXES */ .am-home-stats__inner > * { position: relative !important; z-index: 2 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ===================================================== LEFT INTRO ====================================================== */ .am-home-stats__intro { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; width: 100% !important; max-width: none !important; height: 180px !important; min-height: 180px !important; box-sizing: border-box !important; margin: 0 !important; padding: 25px 8px 25px 28px !important; } .am-home-stats__intro h2 { margin: 0 0 11px !important; font-size: 25px !important; line-height: .95 !important; font-weight: 900 !important; letter-spacing: -.5px !important; } .am-home-stats__intro p { margin: 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 1.4 !important; white-space: nowrap !important; } .am-home-stats__cta { display: none !important; } /* ===================================================== LEFT TWO METRICS ====================================================== */ .am-home-stats__inner > .am-home-stats__metrics:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 25px !important; width: 100% !important; height: 180px !important; margin: 0 !important; padding: 22px 22px 22px 0 !important; box-sizing: border-box !important; } /* ===================================================== MAP — KEEP IT CENTRED ====================================================== */ .am-home-stats__map { grid-column: 3 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: var(--am-stats-map) !important; max-width: var(--am-stats-map) !important; height: 180px !important; margin: 0 auto !important; padding: 0 !important; } .am-home-stats__map img { display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 180px !important; margin: auto !important; object-fit: contain !important; } /* ===================================================== RIGHT METRIC COLUMN 1 ====================================================== */ .am-home-stats__inner > .am-home-stats__metrics:nth-child(4) { grid-column: 4 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 25px !important; width: 100% !important; height: 180px !important; margin: 0 !important; padding: 22px 0 22px 28px !important; box-sizing: border-box !important; } /* ===================================================== RIGHT METRIC COLUMN 2 ====================================================== */ .am-home-stats__inner > .am-home-stats__metrics:nth-child(5) { grid-column: 5 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 25px !important; width: 100% !important; height: 180px !important; margin: 0 !important; padding: 22px 22px 22px 0 !important; box-sizing: border-box !important; } /* ===================================================== INDIVIDUAL STATS — MORE COMPACT ====================================================== */ .am-home-stats .am-home-stat { display: flex !important; align-items: center !important; gap: 9px !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .am-home-stats .am-home-stat__icon { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 34px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; margin: 0 !important; font-size: 14px !important; } .am-home-stats .am-home-stat > div:last-child { min-width: 0 !important; } .am-home-stats .am-home-stat strong { display: block !important; margin: 0 !important; font-size: 21px !important; line-height: 1 !important; font-weight: 800 !important; white-space: nowrap !important; } .am-home-stats .am-home-stat span { display: block !important; margin: 2px 0 0 !important; font-size: 8px !important; line-height: 1.1 !important; font-weight: 600 !important; white-space: nowrap !important; } } /* ========================================================= SMALL DESKTOP ========================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { .am-home-stats { width: 90% !important; max-width: none !important; } .am-home-stats__inner { --am-stats-map: 245px; grid-template-columns: 1.15fr .68fr var(--am-stats-map) .8fr .8fr !important; column-gap: 12px !important; grid-template-rows: 170px !important; } .am-home-stats__inner::before, .am-home-stats__inner::after { width: calc( (100% - var(--am-stats-map) - 48px) / 2 ) !important; } .am-home-stats__intro, .am-home-stats__inner > .am-home-stats__metrics:nth-child(2), .am-home-stats__inner > .am-home-stats__metrics:nth-child(4), .am-home-stats__inner > .am-home-stats__metrics:nth-child(5), .am-home-stats__map { height: 170px !important; } .am-home-stats__intro h2 { font-size: 22px !important; } .am-home-stats .am-home-stat strong { font-size: 18px !important; } } /* ========================================================= AUSTRALIA STATS — CLEAN FINAL GROUPING [ LEFT PANEL ] [ MAP ] [ RIGHT PANEL ] ========================================================= */ @media (min-width: 1200px) { /* Same exact width as Five Worlds / Just Landed */ .am-home-stats { width: 80% !important; max-width: 1600px !important; margin: 30px auto 38px !important; } .am-home-stats__inner { display: grid !important; grid-template-columns: 1.15fr .72fr 300px .82fr .82fr !important; grid-template-rows: 175px !important; column-gap: 18px !important; align-items: center !important; width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; position: relative !important; } /* Kill old fake panels */ .am-home-stats__inner::before, .am-home-stats__inner::after { display: none !important; content: none !important; } /* ===================================================== LEFT WHITE PANEL Intro itself becomes the whole background panel spanning columns 1 + 2 ====================================================== */ .am-home-stats__intro { grid-column: 1 / 3 !important; grid-row: 1 !important; align-self: stretch !important; display: flex !important; flex-direction: column !important; justify-content: center !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; box-sizing: border-box !important; padding: 28px 48% 28px 30px !important; margin: 0 !important; background: #fff !important; border: 0 !important; border-radius: 20px !important; box-shadow: 0 8px 28px rgba(0,0,0,.075) !important; z-index: 1 !important; } .am-home-stats__intro h2 { margin: 0 0 11px !important; font-size: 24px !important; line-height: .96 !important; letter-spacing: -.45px !important; } .am-home-stats__intro p { margin: 0 !important; font-size: 11px !important; line-height: 1.45 !important; white-space: nowrap !important; } .am-home-stats__cta { display: none !important; } /* Left metrics sit ON TOP of left panel */ .am-home-stats__inner > .am-home-stats__metrics:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; z-index: 5 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 24px !important; height: 100% !important; width: 100% !important; padding: 20px 20px 20px 5px !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } /* ===================================================== MAP Leave sizing basically as-is ====================================================== */ .am-home-stats__map { grid-column: 3 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 300px !important; height: 175px !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; z-index: 2 !important; } .am-home-stats__map img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 175px !important; object-fit: contain !important; } /* ===================================================== RIGHT WHITE PANEL First right metrics block becomes background panel spanning columns 4 + 5 ====================================================== */ .am-home-stats__inner > .am-home-stats__metrics:nth-child(4) { grid-column: 4 / 6 !important; grid-row: 1 !important; align-self: stretch !important; z-index: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 24px !important; width: 100% !important; height: auto !important; box-sizing: border-box !important; /* leave right half free for verified/coverage */ padding: 26px 51% 26px 30px !important; margin: 0 !important; background: #fff !important; border: 0 !important; border-radius: 20px !important; box-shadow: 0 8px 28px rgba(0,0,0,.075) !important; } /* Far right metrics overlay same panel */ .am-home-stats__inner > .am-home-stats__metrics:nth-child(5) { grid-column: 5 !important; grid-row: 1 !important; z-index: 5 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 24px !important; width: 100% !important; height: 100% !important; padding: 20px 25px 20px 5px !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } /* ===================================================== COMPACT STATS ====================================================== */ .am-home-stats .am-home-stat { display: flex !important; align-items: center !important; gap: 9px !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .am-home-stats .am-home-stat__icon { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 34px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; margin: 0 !important; } .am-home-stats .am-home-stat strong { display: block !important; margin: 0 !important; font-size: 21px !important; line-height: 1 !important; white-space: nowrap !important; } .am-home-stats .am-home-stat span { display: block !important; margin-top: 2px !important; font-size: 8px !important; line-height: 1.15 !important; white-space: nowrap !important; } } /* ========================================================= SMALL DESKTOP ========================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { .am-home-stats { width: 90% !important; } .am-home-stats__inner { grid-template-columns: 1.15fr .7fr 245px .8fr .8fr !important; grid-template-rows: 165px !important; column-gap: 12px !important; } .am-home-stats__map { width: 245px !important; height: 165px !important; } .am-home-stats__map img { max-height: 165px !important; } .am-home-stats__intro { padding-left: 24px !important; } .am-home-stats__intro h2 { font-size: 21px !important; } .am-home-stats .am-home-stat strong { font-size: 18px !important; } } /* ========================================================= AUSTRALIA STATS FINAL 3-COLUMN LAYOUT [ LEFT PANEL ] [ MAP ] [ RIGHT PANEL ] ========================================================= */ @media (min-width: 1200px) { /* EXACT SAME WIDTH AS FIVE WORLDS */ .am-home-stats { width: 80% !important; max-width: 1600px !important; margin: 30px auto 42px !important; } /* ===================================================== MAIN 3-COLUMN GRID ====================================================== */ .am-home-stats__inner { display: grid !important; grid-template-columns: minmax(0, 1fr) 290px minmax(0, 1fr) !important; grid-template-rows: 170px !important; column-gap: 24px !important; align-items: center !important; width: 100% !important; max-width: none !important; height: 170px !important; min-height: 170px !important; margin: 0 !important; padding: 0 !important; position: relative !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ===================================================== TWO REAL SHADOW PANELS ====================================================== */ .am-home-stats__inner::before, .am-home-stats__inner::after { content: "" !important; grid-row: 1 !important; align-self: stretch !important; display: block !important; width: 100% !important; height: 100% !important; background: #fff !important; border: 0 !important; border-radius: 20px !important; box-shadow: 0 8px 28px rgba(0,0,0,.075) !important; z-index: 0 !important; pointer-events: none !important; } .am-home-stats__inner::before { grid-column: 1 !important; } .am-home-stats__inner::after { grid-column: 3 !important; } /* Kill ALL old individual white panels */ .am-home-stats__inner > * { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; z-index: 2 !important; } /* ===================================================== LEFT PANEL — INTRO ====================================================== */ .am-home-stats__intro { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; align-self: stretch !important; width: 55% !important; max-width: 55% !important; height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; box-sizing: border-box !important; margin: 0 !important; padding: 24px 8px 24px 28px !important; } .am-home-stats__intro h2 { margin: 0 0 11px !important; font-size: 24px !important; line-height: .96 !important; font-weight: 900 !important; letter-spacing: -.45px !important; } .am-home-stats__intro p { margin: 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 1.45 !important; white-space: nowrap !important; } .am-home-stats__cta { display: none !important; } /* ===================================================== LEFT PANEL — TOTAL + VISITS SAME GRID CELL AS INTRO ====================================================== */ .am-home-stats__inner > .am-home-stats__metrics:nth-child(2) { grid-column: 1 !important; grid-row: 1 !important; justify-self: end !important; align-self: stretch !important; width: 38% !important; max-width: 38% !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 24px !important; box-sizing: border-box !important; margin: 0 !important; padding: 20px 24px 20px 0 !important; } /* ===================================================== MAP ====================================================== */ .am-home-stats__map { grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; align-self: center !important; width: 290px !important; max-width: 290px !important; height: 170px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } .am-home-stats__map img { display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 170px !important; object-fit: contain !important; margin: auto !important; } /* ===================================================== RIGHT PANEL — SOLD + FUNDING SAME SINGLE PANEL ====================================================== */ .am-home-stats__inner > .am-home-stats__metrics:nth-child(4) { grid-column: 3 !important; grid-row: 1 !important; justify-self: start !important; align-self: stretch !important; width: 48% !important; max-width: 48% !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 24px !important; box-sizing: border-box !important; margin: 0 !important; padding: 20px 0 20px 30px !important; } /* ===================================================== RIGHT PANEL — DEALERS + COVERAGE SAME GRID CELL ====================================================== */ .am-home-stats__inner > .am-home-stats__metrics:nth-child(5) { grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; align-self: stretch !important; width: 43% !important; max-width: 43% !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 24px !important; box-sizing: border-box !important; margin: 0 !important; padding: 20px 28px 20px 0 !important; } /* ===================================================== COMPACT STAT STYLING ====================================================== */ .am-home-stats .am-home-stat { display: flex !important; align-items: center !important; gap: 9px !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .am-home-stats .am-home-stat__icon { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 34px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; margin: 0 !important; } .am-home-stats .am-home-stat > div:last-child { min-width: 0 !important; } .am-home-stats .am-home-stat strong { display: block !important; margin: 0 !important; font-size: 20px !important; line-height: 1 !important; font-weight: 800 !important; white-space: nowrap !important; } .am-home-stats .am-home-stat span { display: block !important; margin-top: 2px !important; font-size: 8px !important; line-height: 1.1 !important; font-weight: 600 !important; white-space: nowrap !important; } } /* ========================================================= SMALL DESKTOP ========================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { .am-home-stats { width: 90% !important; max-width: none !important; } .am-home-stats__inner { grid-template-columns: minmax(0,1fr) 235px minmax(0,1fr) !important; grid-template-rows: 160px !important; height: 160px !important; column-gap: 16px !important; } .am-home-stats__map { width: 235px !important; height: 160px !important; } .am-home-stats__map img { max-height: 160px !important; } .am-home-stats__intro { padding-left: 23px !important; } .am-home-stats__intro h2 { font-size: 21px !important; } .am-home-stats .am-home-stat strong { font-size: 18px !important; } } /* ========================================================= HOMEPAGE MAIN CATEGORY PANEL REMOVE BLACK BORDER + ADD SOFT SHADOW ========================================================= */ @media (min-width: 1024px) { .am-category-panel { border: 1px solid rgba(15, 23, 42, 0.06) !important; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12), 0 5px 16px rgba(15, 23, 42, 0.06) !important; } } /* ========================================================= HERO TRUST BAR — LARGE DESKTOP DESCRIPTION SIZE ========================================================= */ @media (min-width: 1200px) { .am-category-panel .am-trust-item small { font-size: 13px !important; line-height: 1.35 !important; font-weight: 500 !important; } .am-category-panel .am-trust-item small b { font-size: inherit !important; } } @media (min-width: 1600px) { .am-category-panel .am-trust-item small { font-size: 14px !important; } } /* ========================================================= HERO TRUST BAR — WIDE SCREEN TEXT FIX ========================================================= */ @media (min-width: 1600px) { .am-category-panel .am-trust-item small { font-size: 16px !important; line-height: 1.4 !important; font-weight: 500 !important; } .am-category-panel .am-trust-item small b { font-size: 16px !important; font-weight: 700 !important; } } /* ========================================================= POPULAR CATEGORIES — MOBILE / TABLET SCROLL ========================================================= */ @media (max-width: 1023px) { .am-truck-categories { display: block !important; width: 100% !important; max-width: none !important; margin: 34px 0 42px !important; overflow: hidden !important; box-sizing: border-box !important; } /* HEADING */ .am-truck-categories__heading { margin: 0 16px 16px !important; font-size: 22px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: -.4px !important; } .am-truck-categories__heading span { color: #00bd63 !important; } /* ===================================================== HORIZONTAL SCROLLER ====================================================== */ .am-truck-categories__grid { display: flex !important; grid-template-columns: none !important; gap: 10px !important; width: 100% !important; padding: 2px 16px 14px !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; } .am-truck-categories__grid::-webkit-scrollbar { display: none !important; } /* ===================================================== CARDS Approx 2 visible at once ====================================================== */ .am-truck-categories .am-truck-category-card { flex: 0 0 calc((100vw - 42px) / 2) !important; width: calc((100vw - 42px) / 2) !important; min-width: calc((100vw - 42px) / 2) !important; max-width: calc((100vw - 42px) / 2) !important; min-height: 150px !important; padding: 9px 8px !important; border-radius: 12px !important; scroll-snap-align: start !important; box-sizing: border-box !important; } /* IMAGE */ .am-truck-categories .am-category-image { height: 82px !important; } .am-truck-categories .am-category-image img { max-height: 78px !important; } /* TEXT */ .am-truck-categories .am-category-name, .am-truck-categories .am-category-title, .am-truck-categories .am-category-card strong { font-size: 11px !important; line-height: 1.1 !important; } .am-truck-categories .am-category-card small { font-size: 9px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 430px) { .am-truck-categories__heading { margin-left: 12px !important; margin-right: 12px !important; font-size: 20px !important; } .am-truck-categories__grid { padding-left: 12px !important; padding-right: 12px !important; } .am-truck-categories .am-truck-category-card { flex-basis: calc((100vw - 34px) / 2) !important; width: calc((100vw - 34px) / 2) !important; min-width: calc((100vw - 34px) / 2) !important; max-width: calc((100vw - 34px) / 2) !important; } } /* ========================================== TRUSTED DEALERS — SLOWER SCROLL ========================================== */ .am-trusted-dealers__track { animation-duration: 140s !important; } /* Tablet */ @media (min-width: 768px) and (max-width: 1023px) { .am-trusted-dealers__track { animation-duration: 125s !important; } } /* Mobile */ @media (max-width: 767px) { .am-trusted-dealers__track { animation-duration: 110s !important; } } /* ========================================================= FARMING CAROUSEL — OUTSIDE ARROWS ========================================================= */ .am-home-farming__carousel { position: relative !important; overflow: visible !important; } .am-home-farming__arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 50 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #ffffff !important; color: #00bd63 !important; box-shadow: 0 8px 24px rgba(15, 23, 42, .10) !important; font-size: 34px !important; line-height: 1 !important; cursor: pointer !important; } .am-home-farming__arrow--left { left: -54px !important; } .am-home-farming__arrow--right { right: -54px !important; } /* Disabled end arrow */ .am-home-farming__arrow.is-disabled { opacity: .22 !important; pointer-events: none !important; } /* TABLET */ @media (max-width: 1023px) { .am-home-farming__arrow { width: 40px !important; height: 40px !important; font-size: 30px !important; } .am-home-farming__arrow--left { left: -18px !important; } .am-home-farming__arrow--right { right: -18px !important; } } /* MOBILE */ @media (max-width: 767px) { .am-home-farming__arrow { width: 36px !important; height: 36px !important; font-size: 27px !important; } .am-home-farming__arrow--left { left: -8px !important; } .am-home-farming__arrow--right { right: -8px !important; } } /* ========================================================= HOME TEST HERO SEARCH - BLACK OUTER LINE ========================================================= */ .am-home-search input { border: 2px solid var(--am-green2) !important; box-shadow: 0 0 0 1px #111 !important; } @media (max-width: 767px) { .am-home-search input { border-width: 1.5px !important; box-shadow: 0 0 0 1px #111 !important; } } /* ========================================================= MACHINERY MOBILE POA — REMOVE GREEN BORDER ONLY ========================================================= */ @media (max-width: 767px) { .am-home-machinery .amui-card-machinery-ask-dealer, .am-home-machinery .amui-card-machinery-ask-content { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; } } /* ========================================================= MACHINERY MOBILE POA — RESTORE DIVIDER LINE ========================================================= */ @media (max-width: 767px) { .am-home-machinery .amui-card-machinery-ask-content strong { border-bottom: 1px solid #d7dfe1 !important; padding-bottom: 12px !important; margin-bottom: 6px !important; } } /* ========================================================= MACHINERY POA — FINAL DIVIDER + SMALL DESKTOP FINANCE FIX ========================================================= */ /* --------------------------------------------------------- ASK DEALER DIVIDER Full width + same visual level as normal price cards --------------------------------------------------------- */ .am-home-machinery .amui-card-machinery-ask-content strong { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 17px 0 15px !important; border-bottom: 1px solid #d7dfe1 !important; text-align: center !important; } /* Make sure parent isn't restricting divider width */ .am-home-machinery .amui-card-machinery-ask-content { width: 100% !important; } .am-home-machinery .amui-card-machinery-ask-dealer { box-sizing: border-box !important; } /* ========================================================= SMALL DESKTOP / LAPTOP Cog + EXPLORE FINANCE become one proper inline row ========================================================= */ @media (min-width: 768px) and (max-width: 1450px) { /* * Kill the old separately-positioned cog. */ .am-home-machinery .amui-card-machinery-ask-dealer::before { display: none !important; content: none !important; } /* * Finance wording becomes the flex row. */ .am-home-machinery .amui-card-machinery-ask-content small { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; align-self: center !important; width: auto !important; min-height: 34px !important; margin: 6px auto 3px !important; padding: 0 !important; gap: 6px !important; color: #f2b400 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 800 !important; white-space: nowrap !important; text-align: center !important; } /* * Cog is now physically inside the same flex row, * so it cannot overlap EXPLORE FINANCE. */ .am-home-machinery .amui-card-machinery-ask-content small::before { content: "" !important; position: static !important; display: block !important; width: 21px !important; height: 21px !important; min-width: 21px !important; min-height: 21px !important; max-width: 21px !important; max-height: 21px !important; flex: 0 0 21px !important; margin: 0 !important; padding: 0 !important; transform: none !important; background-image: url("https://anythingmarketplace.com.au/wp-content/uploads/2026/08/finance-icon.png") !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; } } /* ========================================================= MOBILE Keep divider full width and aligned lower ========================================================= */ @media (max-width: 767px) { .am-home-machinery .amui-card-machinery-ask-dealer { padding-left: 13px !important; padding-right: 13px !important; } .am-home-machinery .amui-card-machinery-ask-content strong { width: 100% !important; padding: 18px 0 15px !important; margin: 0 !important; border-bottom: 1px solid #d7dfe1 !important; } .am-home-machinery .amui-card-machinery-ask-content small { margin-top: 5px !important; } } /* ========================================================= MACHINERY POA — FINAL CENTRING / NO OVERLAP ========================================================= */ /* ========================================================= SMALL DESKTOP / LAPTOP ========================================================= */ @media (min-width: 768px) and (max-width: 1450px) { /* KILL ALL OLD FLOATING COGS */ .am-home-machinery .amui-card-machinery-ask-dealer::before, .am-home-machinery .amui-card-machinery-ask-dealer::after { display: none !important; content: none !important; } /* ASK DEALER */ .am-home-machinery .amui-card-machinery-ask-content strong { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 14px 0 !important; overflow: visible !important; color: #00bd63 !important; font-size: 18px !important; line-height: 1.1 !important; font-weight: 600 !important; text-align: center !important; white-space: nowrap !important; border-bottom: 1px solid #d7dfe1 !important; } /* EXPLORE FINANCE ROW */ .am-home-machinery .amui-card-machinery-ask-content small { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-height: 38px !important; box-sizing: border-box !important; margin: 5px 0 2px !important; padding: 0 8px !important; gap: 9px !important; overflow: visible !important; color: #f2b400 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 800 !important; text-align: center !important; white-space: nowrap !important; } /* ONE COG ONLY */ .am-home-machinery .amui-card-machinery-ask-content small::before { content: "" !important; position: static !important; display: block !important; width: 19px !important; height: 19px !important; min-width: 19px !important; min-height: 19px !important; max-width: 19px !important; max-height: 19px !important; flex: 0 0 19px !important; margin: 0 !important; padding: 0 !important; transform: none !important; background-image: url("https://anythingmarketplace.com.au/wp-content/uploads/2026/08/finance-icon.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { /* kill any rogue parent cog */ .am-home-machinery .amui-card-machinery-ask-dealer::before, .am-home-machinery .amui-card-machinery-ask-dealer::after { display: none !important; content: none !important; } /* ASK DEALER — +2PX */ .am-home-machinery .amui-card-machinery-ask-content strong { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 17px 0 14px !important; overflow: visible !important; color: #00bd63 !important; font-size: 22px !important; line-height: 1.1 !important; font-weight: 600 !important; text-align: center !important; white-space: nowrap !important; border-bottom: 1px solid #d7dfe1 !important; } /* EXPLORE FINANCE — +2PX */ .am-home-machinery .amui-card-machinery-ask-content small { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-height: 42px !important; box-sizing: border-box !important; margin: 5px 0 2px !important; padding: 0 10px !important; gap: 9px !important; overflow: visible !important; color: #f2b400 !important; font-size: 14px !important; line-height: 1 !important; font-weight: 800 !important; text-align: center !important; white-space: nowrap !important; } /* ONE SMALL COG, DIRECTLY LEFT OF TEXT */ .am-home-machinery .amui-card-machinery-ask-content small::before { content: "" !important; position: static !important; display: block !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important; flex: 0 0 20px !important; margin: 0 !important; padding: 0 !important; transform: none !important; background-image: url("https://anythingmarketplace.com.au/wp-content/uploads/2026/08/finance-icon.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } } /* ========================================================= VERY SMALL PHONE ========================================================= */ @media (max-width: 390px) {edia (max-width: 390px) { .am-home-machinery .amui-card-machinery-ask-content strong { font-size .am-home-machinery .amui-card-machinery-ask-content small { font-size: 13px !important; gap: 7px !important; padding-left: 6px !important; padding-right: 6px !important; } .am-home-machinery .amui-card-machinery-ask-content small::before { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; flex-basis: 18px !important; } } /* ========================================================= MACHINERY POA — FINAL RESPONSIVE MATCH ========================================================= */ /* --------------------------------------------------------- DEALER BADGE + ASK DEALER ROW --------------------------------------------------------- */ .am-home-machinery .am-machinery-poa-ask-row { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; gap: 10px !important; margin: 0 !important; padding: 11px 0 12px !important; border-bottom: 1px solid #d7dfe1 !important; overflow: visible !important; } .am-home-machinery .am-machinery-poa-ask-row .am-machinery-poa-dealer-badge { position: static !important; display: block !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; transform: none !important; } /* * ASK DEALER itself no longer owns * padding/divider. */ .am-home-machinery .am-machinery-poa-ask-row > strong { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: #00bd63 !important; font-weight: 600 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; } /* Remove excess space from POA wrapper */ .am-home-machinery .amui-card-machinery-ask-dealer { margin-top: 3px !important; } /* ========================================================= SMALL DESKTOP / LAPTOP ========================================================= */ @media (min-width: 768px) and (max-width: 1450px) { /* * Kill old separately-positioned cog. */ .am-home-machinery .amui-card-machinery-ask-dealer::before, .am-home-machinery .amui-card-machinery-ask-dealer::after { display: none !important; content: none !important; } .am-home-machinery .am-machinery-poa-ask-row { padding: 9px 4px 11px !important; gap: 7px !important; } .am-home-machinery .am-machinery-poa-ask-row > strong { font-size: 16px !important; line-height: 1.05 !important; } /* * EXPLORE FINANCE becomes one true row. */ .am-home-machinery .amui-card-machinery-ask-content > small { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; align-self: center !important; width: auto !important; max-width: 100% !important; min-height: 34px !important; box-sizing: border-box !important; margin: 4px auto 2px !important; padding: 0 6px !important; gap: 7px !important; color: #f2b400 !important; font-size: 10px !important; line-height: 1 !important; font-weight: 800 !important; white-space: nowrap !important; overflow: visible !important; } .am-home-machinery .amui-card-machinery-ask-content > small::before { content: "" !important; position: static !important; display: block !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; flex: 0 0 18px !important; margin: 0 !important; padding: 0 !important; transform: none !important; background-image: url("https://anythingmarketplace.com.au/wp-content/uploads/2026/08/finance-icon.png") !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; } } /* ========================================================= ACTUAL MOBILE ========================================================= */ @media (max-width: 767px) { /* * Absolutely no old floating cog. */ .am-home-machinery .amui-card-machinery-ask-dealer::before, .am-home-machinery .amui-card-machinery-ask-dealer::after { display: none !important; content: none !important; } /* * Less space above ASK DEALER. */ .am-home-machinery .amui-card-machinery-ask-dealer { margin-top: 0 !important; padding: 0 13px !important; } .am-home-machinery .am-machinery-poa-ask-row { min-height: 48px !important; padding: 7px 0 9px !important; gap: 7px !important; } /* * Smaller than previous version so it fits * cleanly beside Dealer Verified badge. */ .am-home-machinery .am-machinery-poa-ask-row > strong { font-size: 18px !important; line-height: 1.05 !important; font-weight: 600 !important; } /* * Badge same rendered size as priced card. */ .am-home-machinery .am-machinery-poa-dealer-badge { flex-shrink: 0 !important; } /* * EXPLORE FINANCE: * smaller, no clipping, icon physically * beside wording. */ .am-home-machinery .amui-card-machinery-ask-content > small { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; align-self: center !important; width: auto !important; max-width: calc(100% - 8px) !important; min-height: 32px !important; margin: 4px auto 1px !important; padding: 0 3px !important; box-sizing: border-box !important; gap: 6px !important; color: #f2b400 !important; font-size: 10.5px !important; line-height: 1 !important; font-weight: 800 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; } .am-home-machinery .amui-card-machinery-ask-content > small::before { content: "" !important; position: static !important; display: block !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; flex: 0 0 18px !important; margin: 0 !important; padding: 0 !important; transform: none !important; background-image: url("https://anythingmarketplace.com.au/wp-content/uploads/2026/08/finance-icon.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } } /* Narrow iPhones */ @media (max-width: 390px) { .am-home-machinery .am-machinery-poa-ask-row { gap: 5px !important; } .am-home-machinery .am-machinery-poa-ask-row > strong { font-size: 17px !important; } .am-home-machinery .amui-card-machinery-ask-content > small { font-size: 9.5px !important; gap: 5px !important; } .am-home-machinery .amui-card-machinery-ask-content > small::before { width: 17px !important; height: 17px !important; min-width: 17px !important; min-height: 17px !important; max-width: 17px !important; max-height: 17px !important; flex-basis: 17px !important; } } /* ========================================================= HOME MACHINERY MOBILE USE CORE INVENTORY CARD LAYOUT DO NOT CUSTOM-DESIGN CARD INTERNALS ========================================================= */ @media (max-width: 767px) { /* ===================================================== REMOVE HOMEPAGE-SPECIFIC POA CONTAINER STYLING ===================================================== */ .am-home-machinery .amui-card-machinery-ask-dealer { position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Kill every fake/added cog */ .am-home-machinery .amui-card-machinery-ask-dealer::before, .am-home-machinery .amui-card-machinery-ask-dealer::after, .am-home-machinery .amui-card-machinery-ask-content small::before, .am-home-machinery .amui-card-machinery-ask-content small::after { display: none !important; content: none !important; } /* Remove JS-added experimental wrappers/badges */ .am-home-machinery .am-machinery-poa-ask-row { display: contents !important; } .am-home-machinery .am-machinery-poa-dealer-badge { display: none !important; } /* ===================================================== LET CORE ASK DEALER CONTENT BREATHE NATURALLY ===================================================== */ .am-home-machinery .amui-card-machinery-ask-content { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: normal !important; text-align: center !important; overflow: visible !important; } /* ASK DEALER — same simple inventory-style row */ .am-home-machinery .amui-card-machinery-ask-content strong { display: flex !important; align-items: center !important; justify-content: center !important; width: calc(100% - 24px) !important; min-height: 52px !important; margin: 0 auto !important; padding: 8px 0 !important; box-sizing: border-box !important; color: #00bd63 !important; font-size: 18px !important; line-height: 1.1 !important; font-weight: 600 !important; white-space: nowrap !important; border: 0 !important; border-bottom: 1px solid #d7dfe1 !important; } /* ===================================================== EXPLORE FINANCE NO CUSTOM COG. USE TEXT CLEANLY. ===================================================== */ .am-home-machinery .amui-card-machinery-ask-content small { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 42px !important; margin: 0 !important; padding: 8px 8px 5px !important; box-sizing: border-box !important; color: #f2b400 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 800 !important; white-space: nowrap !important; overflow: visible !important; transform: none !important; } /* ===================================================== CORE FINANCE AREA THESE ARE THE SAME CLASSES THE INVENTORY PAGE USES ===================================================== */ .am-home-machinery .amui-card-price-finance { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; min-height: 0 !important; margin: 5px 0 0 !important; padding: 0 !important; border: 0 !important; } .am-home-machinery .amui-card-price-block { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 50px !important; margin: 0 !important; padding: 5px 7px !important; box-sizing: border-box !important; border-bottom: 1px solid #d7dfe1 !important; } .am-home-machinery .amui-card-price-block.is-dealer { padding-left: 48px !important; } .am-home-machinery .amui-card-finance { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 48px !important; height: 48px !important; margin: 0 !important; padding: 3px 6px !important; box-sizing: border-box !important; border: 0 !important; background: transparent !important; } .am-home-machinery .amui-card-finance-logo { width: 26px !important; height: 26px !important; max-width: 26px !important; max-height: 26px !important; margin: 0 7px 0 0 !important; object-fit: contain !important; } .am-home-machinery .amui-card-finance-value { display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 3px !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== DISCLAIMER + BUTTON ===================================================== */ .am-home-machinery .amui-card-finance-disclaimer { display: block !important; width: calc(100% - 18px) !important; margin: 2px auto 6px !important; padding: 0 !important; text-align: center !important; } .am-home-machinery .amui-card-actions { width: 100% !important; margin-top: auto !important; } .am-home-machinery .amui-card-view-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; color: #fff !important; background: #00bd63 !important; } } /* ========================================================= MARKET STATS V2 — LARGER CLEAN ICONS Remove old icon boxes + enlarge PNGs ========================================================= */ .am-market-stats-v2__icon { width: 42px !important; height: 42px !important; min-width: 42px !important; flex: 0 0 42px !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .am-market-stats-v2__icon img, .am-market-stats-v2__icon img.am-real-stat-icon { display: block !important; width: 34px !important; height: 34px !important; max-width: 34px !important; max-height: 34px !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* SMALL LAPTOP */ @media (min-width: 1024px) and (max-width: 1499px) { .am-market-stats-v2__icon { width: 38px !important; height: 38px !important; min-width: 38px !important; flex-basis: 38px !important; } .am-market-stats-v2__icon img, .am-market-stats-v2__icon img.am-real-stat-icon { width: 31px !important; height: 31px !important; max-width: 31px !important; max-height: 31px !important; } } /* ========================================================= 24 AUG 2026 TRUCKS — DEFINITIVE MACHINERY MATCH IMPORTANT: This is intentionally at the END of am-home-machinery-sizing.css because older truck rules in this file were overriding the PHP/plugin styles. ========================================================= */ /* ========================================================= SHARED DESKTOP BASE ========================================================= */ @media (min-width: 1024px) { /* ----------------------------------------- SECTION WIDTH / ALIGNMENT ----------------------------------------- */ .am-home-trucks { width: 86% !important; max-width: 1500px !important; margin-left: auto !important; margin-right: auto !important; } /* ----------------------------------------- HEADER ----------------------------------------- */ .am-home-trucks__header { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 20px !important; padding-left: 0 !important; padding-right: 0 !important; } .am-home-trucks__header h2 { margin: 0 !important; font-size: 28px !important; line-height: 1.08 !important; font-weight: 600 !important; letter-spacing: -.025em !important; text-transform: none !important; } .am-home-trucks__header h2 span { color: #00bf66 !important; font-size: inherit !important; line-height: inherit !important; font-weight: 600 !important; text-transform: none !important; } .am-home-trucks__header h2 small { color: #000 !important; font-size: 20px !important; line-height: 1 !important; font-weight: 600 !important; text-transform: none !important; } /* ----------------------------------------- BROWSE BUTTON ----------------------------------------- */ .am-home-trucks__more { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 38px !important; padding: 0 19px !important; border-radius: 999px !important; font-size: 13px !important; line-height: 1 !important; font-weight: 600 !important; text-transform: none !important; white-space: nowrap !important; } .am-home-trucks__more span { margin-left: 7px !important; font-size: 15px !important; line-height: 1 !important; } /* ----------------------------------------- CAROUSEL ----------------------------------------- */ .am-home-trucks__carousel { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .am-home-trucks__track { display: flex !important; width: 100% !important; gap: 16px !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; } /* ----------------------------------------- FIVE CARDS — SAME AS MACHINERY ----------------------------------------- */ .am-home-trucks__slide { flex: 0 0 calc((100% - 64px) / 5) !important; width: calc((100% - 64px) / 5) !important; min-width: calc((100% - 64px) / 5) !important; max-width: calc((100% - 64px) / 5) !important; scroll-snap-align: start !important; } .am-home-trucks__slide > .amui-card { width: 100% !important; height: 100% !important; margin: 0 !important; } /* ----------------------------------------- LISTING TITLE Same paragraph scale as Machinery, semi-bold. ----------------------------------------- */ .am-home-trucks__slide .amui-card-title { min-height: 40px !important; font-size: 15px !important; line-height: 1.25 !important; font-weight: 600 !important; text-transform: none !important; } /* ----------------------------------------- SPECS Same size as title/body but normal weight ----------------------------------------- */ .am-home-trucks__slide .amui-card-spec, .am-home-trucks__slide .amui-card-spec span, .am-home-trucks__slide .amui-card-specs, .am-home-trucks__slide .amui-card-specs span, .am-home-trucks__slide [class*="spec"] { font-size: 15px !important; line-height: 1.25 !important; font-weight: 400 !important; } /* ----------------------------------------- DISCLAIMER ----------------------------------------- */ .am-home-trucks__slide .amui-card-disclaimer, .am-home-trucks__slide [class*="disclaimer"], .am-home-trucks__slide [class*="indicative"], .am-home-trucks__slide [class*="finance-note"] { position: relative !important; top: -2px !important; font-size: 11px !important; line-height: 1.25 !important; font-weight: 400 !important; } } /* ========================================================= NORMAL LAPTOP ========================================================= */ @media (min-width: 1200px) and (max-width: 1366px) { .am-home-trucks { width: 88% !important; max-width: 1320px !important; } .am-home-trucks__header h2 { font-size: 25px !important; } .am-home-trucks__header h2 small { font-size: 18px !important; } .am-home-trucks__more { min-height: 36px !important; padding: 0 17px !important; font-size: 13px !important; } .am-home-trucks__slide .amui-card-title, .am-home-trucks__slide .amui-card-spec, .am-home-trucks__slide .amui-card-spec span, .am-home-trucks__slide .amui-card-specs, .am-home-trucks__slide .amui-card-specs span, .am-home-trucks__slide [class*="spec"] { font-size: 13px !important; } .am-home-trucks__slide .amui-card-disclaimer, .am-home-trucks__slide [class*="disclaimer"], .am-home-trucks__slide [class*="indicative"], .am-home-trucks__slide [class*="finance-note"] { font-size: 10px !important; } } /* ========================================================= SMALL LAPTOP ========================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { .am-home-trucks { width: 87% !important; max-width: none !important; } .am-home-trucks__header { margin-bottom: 15px !important; } .am-home-trucks__header h2 { font-size: 23px !important; } .am-home-trucks__header h2 small { font-size: 16px !important; } .am-home-trucks__more { min-height: 34px !important; padding: 0 14px !important; font-size: 12px !important; } .am-home-trucks__slide .amui-card-title, .am-home-trucks__slide .amui-card-spec, .am-home-trucks__slide .amui-card-spec span, .am-home-trucks__slide .amui-card-specs, .am-home-trucks__slide .amui-card-specs span, .am-home-trucks__slide [class*="spec"] { font-size: 12px !important; } .am-home-trucks__slide .amui-card-disclaimer, .am-home-trucks__slide [class*="disclaimer"], .am-home-trucks__slide [class*="indicative"], .am-home-trucks__slide [class*="finance-note"] { font-size: 9px !important; } } /* ========================================================= TRUCK TYPOGRAPHY — EXACT MACHINERY MATCH 24 AUG FINAL ========================================================= */ /* --------------------------------------------------------- FONT + WEIGHTS — ALL DESKTOP SIZES --------------------------------------------------------- */ @media (min-width: 1024px) { /* JUST LANDED IN TRUCKS */ .am-home-trucks__header h2, .am-home-trucks__header h2 span, .am-home-trucks__header h2 small { font-family: Inter, Arial, sans-serif !important; font-weight: 600 !important; line-height: 1.08 !important; text-transform: none !important; } /* "in trucks" SAME SIZE as heading */ .am-home-trucks__header h2 small { font-size: inherit !important; } /* GREEN LANDED */ .am-home-trucks__header h2 span { font-size: inherit !important; } /* BROWSE BUTTON */ .am-home-trucks__more { font-family: Inter, Arial, sans-serif !important; font-weight: 600 !important; text-transform: none !important; } /* LISTING HEADING */ .am-home-trucks__slide .amui-card-title { font-family: Inter, Arial, sans-serif !important; font-weight: 600 !important; line-height: 1.25 !important; } /* SPECS */ .am-home-trucks__slide .amui-card-spec, .am-home-trucks__slide .amui-card-spec-item, .am-home-trucks__slide .amui-card-specs, .am-home-trucks__slide .amui-card-spec span, .am-home-trucks__slide .amui-card-spec-item span, .am-home-trucks__slide .amui-card-specs span, .am-home-trucks__slide [class*="spec"] { font-family: Inter, Arial, sans-serif !important; font-weight: 400 !important; line-height: 1.25 !important; } } /* ========================================================= WIDE DESKTOP Machinery: Heading 28 Button 15 Card title 15 Specs 15 ========================================================= */ @media (min-width: 1367px) { .am-home-trucks__header h2 { font-size: 28px !important; } .am-home-trucks__more { font-size: 15px !important; } .am-home-trucks__slide .amui-card-title { font-size: 15px !important; } .am-home-trucks__slide .amui-card-spec, .am-home-trucks__slide .amui-card-spec-item, .am-home-trucks__slide .amui-card-specs, .am-home-trucks__slide .amui-card-spec span, .am-home-trucks__slide .amui-card-spec-item span, .am-home-trucks__slide .amui-card-specs span, .am-home-trucks__slide [class*="spec"] { font-size: 15px !important; } } /* ========================================================= DESKTOP / LAPTOP Machinery: Heading 25 Button 13 Card title 13 Specs 13 ========================================================= */ @media (min-width: 1200px) and (max-width: 1366px) { .am-home-trucks__header h2 { font-size: 25px !important; } .am-home-trucks__more { font-size: 13px !important; } .am-home-trucks__slide .amui-card-title { font-size: 13px !important; } .am-home-trucks__slide .amui-card-spec, .am-home-trucks__slide .amui-card-spec-item, .am-home-trucks__slide .amui-card-specs, .am-home-trucks__slide .amui-card-spec span, .am-home-trucks__slide .amui-card-spec-item span, .am-home-trucks__slide .amui-card-specs span, .am-home-trucks__slide [class*="spec"] { font-size: 13px !important; } } /* ========================================================= SMALL LAPTOP Machinery: Heading 23 Button 12 Card title 12 Specs 12 ========================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { .am-home-trucks__header h2 { font-size: 23px !important; } .am-home-trucks__more { font-size: 12px !important; } .am-home-trucks__slide .amui-card-title { font-size: 12px !important; } .am-home-trucks__slide .amui-card-spec, .am-home-trucks__slide .amui-card-spec-item, .am-home-trucks__slide .amui-card-specs, .am-home-trucks__slide .amui-card-spec span, .am-home-trucks__slide .amui-card-spec-item span, .am-home-trucks__slide .amui-card-specs span, .am-home-trucks__slide [class*="spec"] { font-size: 12px !important; } } /* ========================================================= TRUCKS — EXACT COPY OF CURRENT MACHINERY CSS AUTO GENERATED 24 AUG 2026 Do not manually approximate these values. This block is copied directly from the working Machinery homepage styling. ========================================================= */ /* ========================================================= SECTION ========================================================= */ .am-home-trucks { width: calc(100% - 70px); max-width: 1820px; margin: 48px auto 55px; font-family: Inter, Arial, sans-serif; } /* ========================================================= HEADER ========================================================= */ .am-home-trucks__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 22px; padding: 0 16px; } .am-home-trucks__header h2 { margin: 0; color: #111; font-size: 31px; line-height: 1; font-weight: 900; letter-spacing: -.8px; } .am-home-trucks__header h2 > span { color: #05bd64; } .am-home-trucks__header h2 small { display: inline; color: #111; font-size: .72em; line-height: 1; font-weight: 700; letter-spacing: 0; } .am-home-trucks__more { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 19px; background: #06bd64; border-radius: 999px; color: #fff; font-size: 12px; line-height: 1; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .am-home-trucks__more:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(0, 189, 100, .18); } /* ========================================================= CAROUSEL AREA ========================================================= */ .am-home-trucks__carousel { position: relative; width: 100%; padding: 0 30px; box-sizing: border-box; } .am-home-trucks__track { display: flex; align-items: stretch; gap: 14px; width: 100%; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 16px; box-sizing: border-box; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .am-home-trucks__track::-webkit-scrollbar { display: none; } /* ========================================================= EACH SLIDE Large desktop: approximately 6–7 cards visible. ========================================================= */ .am-home-trucks__slide { flex: 0 0 calc((100% - 84px) / 7); min-width: 0; scroll-snap-align: start; box-sizing: border-box; } /* ========================================================= USE EXISTING INVENTORY CARD ========================================================= */ .am-home-trucks__slide > .amui-card { width: 100% !important; height: 100% !important; margin: 0 !important; box-sizing: border-box !important; } /* * The real card CSS already does almost everything. * These rules only allow it to behave nicely in a narrow * homepage carousel slot. */ .am-home-trucks__slide .amui-card-title { min-height: 40px; } .am-home-trucks__slide .amui-card-image-wrap { width: 100%; } .am-home-trucks__slide .amui-card-image { width: 100%; object-fit: cover; } /* ========================================================= SIDE ARROWS ========================================================= */ .am-home-trucks__arrow { position: absolute; z-index: 20; top: 46%; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: rgba(255,255,255,.96); border-radius: 50%; box-shadow: 0 6px 20px rgba(0,0,0,.10); color: #16bb63; font-family: Arial, sans-serif; font-size: 40px; line-height: 1; cursor: pointer; transform: translateY(-50%); transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; } .am-home-trucks__arrow:hover { transform: translateY(-50%) scale(1.05); box-shadow: 0 8px 24px rgba(0,0,0,.14); } .am-home-trucks__arrow--left { left: 2px; } .am-home-trucks__arrow--right { right: 2px; } .am-home-trucks__arrow.is-disabled { opacity: .2; pointer-events: none; } /* ========================================================= NORMAL DESKTOP ========================================================= */ @media (min-width: 1451px) and (max-width: 1750px) { .am-home-trucks__slide { flex-basis: calc((100% - 70px) / 6); } } /* ========================================================= SMALL LAPTOP ========================================================= */ @media (min-width: 1024px) and (max-width: 1450px) { .am-home-trucks { width: calc(100% - 50px); margin-top: 38px; } .am-home-trucks__slide { flex-basis: calc((100% - 56px) / 5); } .am-home-trucks__header h2 { font-size: 26px; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .am-home-trucks { width: calc(100% - 32px); margin: 34px auto 42px; } .am-home-trucks__slide { flex-basis: calc((100% - 28px) / 3); } .am-home-trucks__carousel { padding: 0 20px; } .am-home-trucks__header { padding: 0 6px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .am-home-trucks { width: 100%; margin: 30px 0 38px; overflow: hidden; } .am-home-trucks__header { align-items: center; margin-bottom: 15px; padding: 0 18px; } .am-home-trucks__header h2 { font-size: 22px; } .am-home-trucks__header h2 small { font-size: 13px; } .am-home-trucks__more { min-height: 32px; padding: 0 12px; font-size: 9px; } .am-home-trucks__carousel { padding: 0 15px; } /* * About 1.2 cards visible so it is obvious * that the section can be swiped. */ .am-home-trucks__slide { flex: 0 0 82%; min-width: 82%; } .am-home-trucks__track { gap: 12px; padding-bottom: 10px; } .am-home-trucks__arrow { width: 38px; height: 38px; font-size: 32px; } .am-home-trucks__arrow--left { left: 1px; } .am-home-trucks__arrow--right { right: 1px; } } /* ========================================================= MACHINERY FINAL TYPOGRAPHY / MOBILE HEADER POLISH ========================================================= */ /* --------------------------------------------------------- JUST LANDED HEADING — SEMI BOLD --------------------------------------------------------- */ .am-home-trucks__header h2 { font-weight: 600 !important; } .am-home-trucks__header h2 span { font-weight: 600 !important; } .am-home-trucks__header h2 small { font-weight: 600 !important; } /* --------------------------------------------------------- CARD TITLE — LESS HEAVY --------------------------------------------------------- */ .am-home-trucks .amui-card-title, .am-home-trucks .amui-card-title a, .am-home-trucks .amui-card h3, .am-home-trucks .amui-card h3 a { font-weight: 600 !important; } /* --------------------------------------------------------- SPECS — 2–3PX BIGGER --------------------------------------------------------- */ .am-home-trucks .amui-card-spec { font-size: 13px !important; } .am-home-trucks .amui-card-spec-value { font-size: 13px !important; font-weight: 600 !important; line-height: 1.15 !important; } .am-home-trucks .amui-card-spec-icon { width: 18px !important; height: 18px !important; } /* --------------------------------------------------------- DYNAMIC SHOP BUTTON --------------------------------------------------------- */ .am-home-trucks__more { white-space: nowrap !important; font-weight: 600 !important; padding: 0 22px !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { /* * Header stacks: * * JUST LANDED in trucks * [ Shop over XXXX+ Machinery Items ] */ .am-home-trucks__header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 14px !important; } .am-home-trucks__header h2 { width: 100% !important; margin: 0 !important; font-weight: 600 !important; } .am-home-trucks__header h2 span, .am-home-trucks__header h2 small { font-weight: 600 !important; } .am-home-trucks__more { width: auto !important; min-height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 14px !important; font-size: 10px !important; line-height: 1 !important; font-weight: 600 !important; white-space: nowrap !important; } /* * Mobile card title: * still readable but not super heavy. */ .am-home-trucks .amui-card-title, .am-home-trucks .amui-card-title a, .am-home-trucks .amui-card h3, .am-home-trucks .amui-card h3 a { font-weight: 600 !important; } /* * Specs bigger but lighter than desktop. */ .am-home-trucks .amui-card-spec { font-size: 11px !important; } .am-home-trucks .amui-card-spec-value { font-size: 11px !important; font-weight: 500 !important; line-height: 1.1 !important; } .am-home-trucks .amui-card-spec-icon { width: 16px !important; height: 16px !important; } } /* Narrow phones */ @media (max-width: 390px) { .am-home-trucks__more { font-size: 9px !important; padding: 0 12px !important; } .am-home-trucks .amui-card-spec, .am-home-trucks .amui-card-spec-value { font-size: 10.5px !important; } } /* ========================================================= MACHINERY MOBILE HEADER FINAL CLEAN POA CARDS USE ORIGINAL CORE CARD STYLING ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------- CENTRE HEADING + BUTTON ----------------------------------------- */ .am-home-trucks__header { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; gap: 10px !important; margin-bottom: 16px !important; text-align: center !important; } .am-home-trucks__header h2 { width: 100% !important; margin: 0 !important; text-align: center !important; font-weight: 600 !important; } .am-home-trucks__header h2 span, .am-home-trucks__header h2 small { font-weight: 600 !important; } /* ----------------------------------------- DYNAMIC MACHINERY BUTTON ----------------------------------------- */ .am-home-trucks__more { width: auto !important; min-height: 38px !important; align-self: center !important; margin: 0 auto !important; padding: 0 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; line-height: 1.1 !important; font-weight: 600 !important; text-align: center !important; white-space: nowrap !important; } /* ----------------------------------------- CARD TITLE ----------------------------------------- */ .am-home-trucks .amui-card-title, .am-home-trucks .amui-card-title a, .am-home-trucks .amui-card h3, .am-home-trucks .amui-card h3 a { font-weight: 600 !important; } /* ----------------------------------------- SPECS Slightly larger, less bold ----------------------------------------- */ .am-home-trucks .amui-card-spec { font-size: 11.5px !important; } .am-home-trucks .amui-card-spec-value { font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.1 !important; } } @media (max-width: 390px) { .am-home-trucks__more { font-size: 11.5px !important; padding: 0 16px !important; } .am-home-trucks .amui-card-spec, .am-home-trucks .amui-card-spec-value { font-size: 11px !important; } } /* ========================================================= TRUCKS — FINAL TYPOGRAPHY OVERRIDES ========================================================= */ .am-home-trucks, .am-home-trucks * { font-family: Inter, Arial, sans-serif; } /* Heading */ .am-home-trucks__header h2, .am-home-trucks__header h2 span, .am-home-trucks__header h2 small { font-weight: 600 !important; text-transform: none !important; } /* * IMPORTANT: * Machinery treats "in machinery" as part of the heading. * Do the same for Trucks. */ .am-home-trucks__header h2 small { font-size: inherit !important; line-height: inherit !important; font-weight: 600 !important; } /* Green word */ .am-home-trucks__header h2 span { font-size: inherit !important; line-height: inherit !important; font-weight: 600 !important; } /* Top right button */ .am-home-trucks__more { font-weight: 600 !important; text-transform: none !important; } /* Listing names */ .am-home-trucks__slide .amui-card-title { font-weight: 600 !important; text-transform: none !important; } /* Specs — THIS is a big visual difference */ .am-home-trucks__slide .amui-card-spec, .am-home-trucks__slide .amui-card-spec *, .am-home-trucks__slide .amui-card-spec-item, .am-home-trucks__slide .amui-card-spec-item *, .am-home-trucks__slide .amui-card-specs, .am-home-trucks__slide .amui-card-specs *, .am-home-trucks__slide [class*="spec"], .am-home-trucks__slide [class*="spec"] * { font-weight: 400 !important; } /* Disclaimer same treatment as Machinery */ .am-home-trucks__slide .amui-card-disclaimer, .am-home-trucks__slide [class*="disclaimer"], .am-home-trucks__slide [class*="indicative"], .am-home-trucks__slide [class*="finance-note"] { font-weight: 400 !important; } /* View button typography only */ .am-home-trucks__slide .amui-card-view-button { font-weight: 600 !important; } /* Machinery browse button — match Trucks */ .am-home-machinery__more span { margin-left: 7px !important; font-size: 1.15em !important; line-height: 1 !important; }