/* iParts4U site CSS - served from Cloudflare (/ip-assets/site.css) by worker iparts4u-site-code. Migrated from Journal's Custom CSS box on 12 Sep 2026. Loaded as the last stylesheet in . Maintained by Claude. */ /* ---------- Global layout / forms ---------- */ select.form-control { width: auto; } .row > div { padding-left: 10px; padding-right: 10px; } html:not(.popup) .page-title { background: #0a0a0a; } /* ---------- Header & search ---------- */ .desktop-header-active .header .top-bar { max-width: 99999px !important; } .header-search .search-button { background: #fff; min-width: 45px; padding-left: 30px; padding-right: 30px; font-size: 12px; font-weight: 800; margin-left: 15px; } .desktop-header-active .header-search .search-button { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .desktop-header-active .header-search > input:first-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .full-search .header-search { box-shadow: 0 0 20px 15px #0000007a; } /* ---------- Main menu ---------- */ /* Divider between the catalogue rows and the info links in the mobile drawer. Targeted by link, not by position, so it survives rows being added or reordered. */ .mobile-main-menu-wrapper .main-menu > ul.j-menu > li.main-menu-item:has(> a[href*="route=product/new"]) { padding-top: 20px; } .mobile-main-menu-wrapper .main-menu > ul.j-menu > li.main-menu-item:has(> a[href$="/mobile-phone-tools"]) { border-style: solid; border-width: 0 0 1px 0; border-color: #b1b1b1; padding-bottom: 20px; } .main-menu > .j-menu > li > a { flex-direction: inherit; } .desktop-main-menu-wrapper .main-menu .mega-menu .mega-menu-content { border-radius: 10px; } div.links-menu .menu-item:hover { border-radius: 10px; } /* Scrollable dropdown menu columns */ .subitems { overflow: auto; max-height: 400px; } div.links-menu-268 .module-body, div.links-menu-326 .module-body, div.links-menu-336 .module-body, div.links-menu-337 .module-body, div.links-menu-339 .module-body, div.links-menu-340 .module-body, div.links-menu-341 .module-body, div.links-menu-343 .module-body, div.links-menu-344 .module-body, div.links-menu-345 .module-body, div.links-menu-346 .module-body, div.links-menu-347 .module-body, div.links-menu-348 .module-body, div.links-menu-349 .module-body, div.links-menu-352 .module-body, div.links-menu-354 .module-body, div.links-menu-370 .module-body, div.links-menu-595 .module-body { overflow: auto; max-height: 400px; } div.links-menu-356 .module-body, div.links-menu-357 .module-body, div.links-menu-368 .module-body, div.links-menu-369 .module-body, div.links-menu-714 .module-body { overflow: auto; max-height: 500px; } /* ---------- Icons menu ---------- */ .icons-menu.icons-menu-254 { overflow: auto; } .icons-menu > ul > .menu-item > a .links-text { margin: 19px 0 -3px 0; } /* ---------- Category filters (refine cards) ---------- */ .refine-items { justify-content: center; } .refine-item .refine-name { background-color: #fff; border: 1px solid; border-radius: 10px; } @media (max-width: 760px) { .refine-item .refine-name { background: none !important; border: none !important; } } .reset-filter.btn { width: 100%; } .mobile-filter-trigger.btn { left: 0; bottom: 0; font-size: 18px; padding: 20px; margin-bottom: 60px; } /* ---------- Product grid ---------- */ .main-products.product-grid .product-thumb .image img { background: transparent; } .main-products.product-grid .product-thumb .cart-group { display: block; } .main-products.product-grid .out-of-stock .product-thumb .cart-group { display: flex; flex-wrap: wrap; } .main-products.product-grid .product-thumb .btn-cart.btn { width: 100%; } .main-products.product-grid .product-thumb .stepper { width: 100%; } .product-label-diagonal.product-label-573 { z-index: 5; } /* Underline on Add to Cart / extra buttons */ .module-products-234 .product-grid .product-thumb .extra-group .btn:first-child .btn-text, .product-info .button-group-page .extra-group .btn:first-child .btn-text { padding-bottom: 4px; border-bottom: 2px solid; } .module-products-234 .product-grid .product-thumb .btn-cart .btn-text, .module-products-82 .product-grid .product-thumb .btn-cart .btn-text, .route-product-product:not(.popup) .product-info .button-group-page .btn-cart .btn-text, .main-products.product-grid .product-thumb .btn-cart .btn-text { padding-bottom: 4px; border-bottom: 2px solid #c7d530; } @media (max-width: 470px) { .main-products.product-grid .product-thumb .btn-cart .btn-text { display: inline-block; padding: 0 0 4px; } } .module-products-234 .product-grid .product-thumb .product-img { border-radius: 5px; } .module-products-234 .product-grid .product-thumb .extra-group .btn.btn { min-width: 99%; } /* ---------- Product page ---------- */ .product-info .product-stats li { padding-bottom: 10px; } #ip9-ultra-extended-warranty { scroll-margin-top: 80px; /* match header height */ } /* ---------- Side products / titles / info blocks ---------- */ .module-side_products-200 .side-product .name a { color: #444; } .module.title-module.module-title-445 a, h3.title.module-title.closed a { color: #000; } img.info-block-img { align-self: center; } .module-info_blocks-309 .module-item:not(.swiper-slide) { padding-left: 0; } .module-info_blocks-438 .module-item:not(.swiper-slide) { padding-right: 0; } /* ---------- Home page grid & banners ---------- */ .module-blocks-104 .module-item-1 .block-content:not(.block-html):not(.block-text) { height: 100%; } .grid-item-content-top-2-2-1 { width: 100%; height: 100%; } .blocks-grid .module-body { display: block; } .grid-col-top-9-3, .grid-col-top-11-2 { border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .grid-col-top-9-4, .grid-col-top-11-3 { border-top-right-radius: 20px; border-bottom-right-radius: 20px; } .module-banners-377 .banner-caption span, .module-banners-430 .banner-caption-2 span, .module-banners-431 .banner-caption span { box-shadow: 0 5px 11px 5px #0000007a; } .module-newsletter-67 .input-group-btn .btn { transform: translateX(80px); } /* ---------- Delivery panels (Royal Mail / DPD / DHL / UK / EU) ---------- */ .module-item.module-item-1.panel .panel-heading { background-color: #060a09; } .module-item.module-item-2.panel .panel-heading { background-color: #cf0000; background-image: url(/image/catalog/graphics/icons/rm-icon.png); background-repeat: no-repeat; background-size: contain; background-position: 95% 0%; } .module-item.module-item-2.panel .panel-heading a { color: #ffcc00; } .module-item.module-item-3.panel .panel-heading { background-color: #31b1f0; background-image: url(/image/catalog/graphics/icons/dpd-icon.png); background-repeat: no-repeat; background-size: contain; background-position: 95% 0%; } .module-item.module-item-4.panel .panel-heading { background-color: #ffcc00; background-image: url(/image/catalog/graphics/icons/dhl-icon.png); background-repeat: no-repeat; background-size: contain; background-position: 95% 0%; } .module-item.module-item-4.panel .panel-heading a { color: #cf0000; } .module-item.module-item-5.panel .panel-heading { background-color: #00247d; background-image: url(/image/catalog/graphics/icons/uk-flag.png); background-repeat: no-repeat; background-size: contain; background-position: 95% 0%; } .module-item.module-item-6.panel .panel-heading { background-color: #003399; background-image: url(/image/catalog/graphics/icons/eu-icon.png); background-repeat: no-repeat; background-size: contain; background-position: 95% 0%; } .module-item.module-item-6.panel .panel-heading a { color: #ffcc00; } .deltimernotimsg { width: 100%; } /* ---------- Returns / credit system ---------- */ .bg-primary { background-color: #575757; } .text-info { color: #575757; } div#credittotal { text-align: center; padding: 20px; border: 2px solid; font-size: larger; } /* ---------- Smooth scrolling (respects reduced-motion) ---------- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ---------- TMD GDPR cookie button — bottom centre ---------- */ #cookiestoggler { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; bottom: 20px !important; z-index: 9998 !important; } @media (max-width: 767px) { #cookiestoggler { bottom: 70px !important; /* clear sticky footers on mobile */ } } /* ---------- New In (723) + Recently Viewed (724) carousels ---------- */ .module-products-723, .module-products-724, #column-content-top .module-products-723, #column-content-top .module-products-724 { max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } .module-products-723 .module-body, .module-products-724 .module-body, .module-products-723 .swiper-container, .module-products-724 .swiper-container, .module-products-723 .swiper, .module-products-724 .swiper { max-width: 100% !important; overflow: hidden !important; } /* Clamp long product names to two lines */ .module-products-723 .product-thumb .name a, .module-products-724 .product-thumb .name a, .module-products-723 .product-thumb h4 a, .module-products-724 .product-thumb h4 a { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.35 !important; min-height: 2.7em !important; max-height: 2.7em !important; } /* Review forms: place the plain-text note under the textarea as a caption */ form[id^="form-review"] .form-group .help-block { flex-basis: 100%; width: 100%; margin-top: 6px; font-size: 12px; color: #767676; } /* Review forms: place the plain-text note under the textarea as a caption */ form[id^="form-review"] .form-group .help-block { flex-basis: 100%; width: 100%; margin-top: 6px; font-size: 12px; color: #767676; } /* Review page star rating: brand lime fill for selected stars */ .rating-symbol .rating-symbol-foreground .star-style { color: #c7d530 !important; } /* Product page review form: star rating replaces Bad/Good radios */ #form-review .rate.js-stars-on > span:not(.js-star-rating), #form-review .rate.js-stars-on > input[name="rating"] { display: none; } #form-review .js-star-rating { font-size: 28px; line-height: 1; cursor: pointer; user-select: none; display: inline-block; } #form-review .js-star { color: #cfcfcf; padding-right: 6px; display: inline-block; transition: color .1s; } #form-review .js-star.is-filled { color: #c7d530; } /* ===================================================================== iParts4U - funnel tap targets (mobile only) Added Sep 2026. Checkout shipping, payment and address rows were 20px tall with 8px gaps and 13x13 inputs; the compulsory Terms checkbox was the same. Apple and Google both put the minimum touch target at 44px, and a fingertip is about 40-45px of screen. Basket remove was 14x21 and the update/remove buttons 35x35. Scoped to .mobile-header-active, which Journal sets server-side from the user agent, so desktop is untouched and there is no flash on load. ===================================================================== */ .mobile-header-active.route-checkout-checkout .section-body .radio label, .mobile-header-active.route-checkout-checkout .section-body .checkbox label { display: flex !important; align-items: center; min-height: 46px; padding: 12px 12px 12px 38px !important; margin: 0 0 8px !important; border: 1px solid #e2e3dc; border-radius: 8px; background: #fff; line-height: 1.35; } .mobile-header-active.route-checkout-checkout .section-body .radio label input, .mobile-header-active.route-checkout-checkout .section-body .checkbox label input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0 0 0 -26px !important; accent-color: #c4d42e; } /* make the chosen option obvious once it is tapped */ .mobile-header-active.route-checkout-checkout .section-body .radio label:has(input:checked) { border-color: #c4d42e; box-shadow: inset 0 0 0 1px #c4d42e; } /* ---------- Basket ---------- */ .mobile-header-active.route-checkout-cart .btn-update, .mobile-header-active.route-checkout-cart .btn-remove { width: 44px !important; height: 44px !important; } .mobile-header-active.route-checkout-cart input[name^="quantity"] { height: 44px !important; font-size: 16px; } /* Grow the hit area of alert dismiss crosses without moving anything: the pseudo-element is absolutely positioned so layout is unaffected. */ .mobile-header-active .alert .close { position: relative; } .mobile-header-active .alert .close::after { content: ""; position: absolute; top: -12px; right: -12px; bottom: -12px; left: -12px; } /* ===================================================================== iParts4U - basket as cards on mobile Added Sep 2026. The basket line-item table is 671px wide inside a 408px scrolling container, so on a phone the Price and Total columns start off screen and have to be swiped to. This restacks each line as a card with everything visible at once, and labels Price and Total since the table header is hidden on mobile. Note: only the cells we actually place are set to display:block. A blanket "td { display:block }" resurrects .td-model, which the theme deliberately hides, and it lands outside the card. ===================================================================== */ .mobile-header-active.route-checkout-cart .cart-table .table-responsive { overflow-x: visible; border: 0; } .mobile-header-active.route-checkout-cart .cart-table table { display: block; width: 100%; border: 0; margin: 0; } .mobile-header-active.route-checkout-cart .cart-table thead { display: none; } .mobile-header-active.route-checkout-cart .cart-table tbody { display: block; width: 100%; } .mobile-header-active.route-checkout-cart .cart-table tbody tr { display: grid; grid-template-columns: 62px 1fr auto; grid-template-areas: "img name name" "img price total" "qty qty qty"; column-gap: 12px; row-gap: 8px; align-items: start; border: 1px solid #e2e3dc; border-radius: 10px; padding: 12px; margin: 0 0 12px; background: #fff; } .mobile-header-active.route-checkout-cart .cart-table tbody td { border: 0; padding: 0; } .mobile-header-active.route-checkout-cart .cart-table .td-image, .mobile-header-active.route-checkout-cart .cart-table .td-name, .mobile-header-active.route-checkout-cart .cart-table .td-price, .mobile-header-active.route-checkout-cart .cart-table .td-total, .mobile-header-active.route-checkout-cart .cart-table .td-qty { display: block; width: auto; } .mobile-header-active.route-checkout-cart .cart-table .td-image { grid-area: img; max-width: 62px; } .mobile-header-active.route-checkout-cart .cart-table .td-image img { width: 62px; height: auto; border-radius: 6px; } .mobile-header-active.route-checkout-cart .cart-table .td-image a { display: block; } .mobile-header-active.route-checkout-cart .cart-table .td-name { grid-area: name; text-align: left; line-height: 1.35; } .mobile-header-active.route-checkout-cart .cart-table .td-price { grid-area: price; text-align: left; } .mobile-header-active.route-checkout-cart .cart-table .td-total { grid-area: total; text-align: right; font-weight: 700; } .mobile-header-active.route-checkout-cart .cart-table .td-qty { grid-area: qty; text-align: left; margin-top: 4px; } .mobile-header-active.route-checkout-cart .cart-table .td-price::before, .mobile-header-active.route-checkout-cart .cart-table .td-total::before { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #74786c; margin-bottom: 2px; } .mobile-header-active.route-checkout-cart .cart-table .td-price::before { content: "Price"; } .mobile-header-active.route-checkout-cart .cart-table .td-total::before { content: "Total"; } /* Remaining sub-44px controls on the basket */ .mobile-header-active.route-checkout-cart .panel-title .accordion-toggle { min-height: 44px; align-items: center; padding: 10px 12px; } .mobile-header-active.route-checkout-cart .buttons .btn { min-height: 44px; align-items: center; justify-content: center; } /* ===================================================================== iParts4U - trade account CTA at the top of the mobile menu drawer Added Sep 2026. The menu item itself lives in Journal (Main Menu - Mobile, item "Trade Account CTA", guests only). It is created last in the module, so it is pulled to the top here with flex order rather than by dragging it in the admin list. IMPORTANT: target it by href, never by .main-menu-item-NN. Those numbers are the position of the RENDERED item, so item 22 is this CTA for a guest but Logout for a logged-in customer - styling the class would turn everyone's Logout into a lime trade banner. Background and text-transform need !important: Journal's own menu link styles win otherwise. ===================================================================== */ .mobile-header-active .mobile-main-menu-wrapper > .main-menu > ul.j-menu { display: flex; flex-direction: column; } .mobile-header-active .mobile-main-menu-wrapper > .main-menu > ul.j-menu > li:has(> a[href*="/trade-account"]) { order: -1; } .mobile-header-active .mobile-main-menu-wrapper li > a[href*="/trade-account"] { display: block !important; background: #c4d42e !important; color: #14150f !important; border: 0; border-radius: 10px; margin: 12px 12px 16px; padding: 14px 44px 14px 16px; position: relative; text-transform: none !important; } .mobile-header-active .mobile-main-menu-wrapper li > a[href*="/trade-account"] .links-text { font-size: 16px !important; font-weight: 800 !important; line-height: 1.25; letter-spacing: 0; text-transform: none !important; color: #14150f !important; } .mobile-header-active .mobile-main-menu-wrapper li > a[href*="/trade-account"]::after { content: "Trade pricing, exclusive stock and a dedicated account manager"; display: block; margin-top: 5px; font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: 0; opacity: .75; color: #14150f; text-transform: none !important; } .mobile-header-active .mobile-main-menu-wrapper li > a[href*="/trade-account"]::before { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid #14150f; border-top: 2px solid #14150f; transform: translateY(-50%) rotate(45deg); } /* ===================================================================== iParts4U - category controls and confirmation toast (mobile only) Added Sep 2026. ===================================================================== */ /* Sort and per-page controls were 100x26 and 49x26 */ .mobile-header-active.route-product-category #input-sort, .mobile-header-active.route-product-category #input-limit { min-height: 44px !important; font-size: 15px; } /* The mobile home page module's section headings were rendering at 40px against a 26px H1, so every section looked bigger than the page title. .hp-m only exists on the mobile home page module. */ .mobile-header-active .hp-m h2 { font-size: clamp(21px, 5.4vw, 23px) !important; line-height: 1.2; } /* Add-to-cart confirmation opened at the top of the screen, roughly 700px from the button the customer had just tapped. Bring it down to the thumb. The close button normally overhangs the notification's box (top:0;right:0 with a negative margin). That is fine at the top of the screen, but once the toast sits over page content the overhanging part stops being hit-testable, because the wrapper above it is pointer-events:none. So the close is pulled fully inside the box and given room via padding-top. */ .mobile-header-active .notification-wrapper { justify-content: flex-end !important; padding-bottom: 90px; } .mobile-header-active .notification { padding-top: 30px !important; } .mobile-header-active .notification .notification-close { top: 4px !important; right: 4px !important; margin: 0 !important; width: 40px !important; height: 40px !important; display: flex !important; align-items: center; justify-content: center; } .mobile-header-active .notification .btn:not(.notification-close) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ===================================================================== iParts4U - Fix 10: hide the floating widgets while the mobile drawer is open, so they cannot sit on top of the menu rows. Journal puts .mobile-main-menu-container-open on while the drawer is open. Neither widget sets visibility inline, so CSS can do this one. ===================================================================== */ html.mobile-main-menu-container-open #google-merchantwidget-iframe-wrapper, html.mobile-main-menu-container-open #sf-digi iframe { visibility: hidden !important; } /* ===================================================================== iParts4U - Fix 11: "Search model" box above the model grid on family category pages (built by the matching block in Custom JS). ===================================================================== */ .ip-ms { margin: 0 0 16px; } .ip-ms-row { display: flex; gap: 8px; align-items: stretch; } .ip-ms-input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px; border: 2px solid #d6d7cf; border-radius: 10px; background: #fff; font-size: 16px; /* 16px stops iOS zooming the page on focus */ -webkit-appearance: none; appearance: none; } .ip-ms-input:focus { outline: none; border-color: #c4d42e; box-shadow: 0 0 0 3px rgba(196, 212, 46, .35); } .ip-ms-select { flex: 0 0 auto; max-width: min(42%, 260px); height: 46px; padding: 0 10px; border: 2px solid #d6d7cf; border-radius: 10px; background: #fff; font-size: 15px; color: #14150f; } .ip-ms-count { font-size: 13px; color: #666; margin: 6px 2px 0; } .ip-ms-empty { display: none; margin-top: 8px; padding: 14px; border: 1px dashed #cfd0c8; border-radius: 10px; color: #444; font-size: 14px; } .ip-ms-empty.is-on { display: block; } .refine-categories .refine-item.ip-ms-hide { display: none !important; } /* ===================================================================== iParts4U - Fix 12: model tile grid on phones - iPhone Parts (category-14) mobile: the series accordion module was retired, so the empty category description block is collapsed and the tiles follow the "Choose your iPhone model" heading directly. - All family pages on phones: three model tiles per row instead of two, so the current line-up fits the first screens. ===================================================================== */ .mobile-header-active.category-14 #content > .category-description, .mobile-header-active.category-14 #content > .category-text { display: none; } .mobile-header-active .refine-grid .refine-item { width: 33.333% !important; } .mobile-header-active .refine-grid .refine-item > a { padding: 6px; } .mobile-header-active .refine-grid .refine-name .links-text { font-size: 12px; line-height: 1.2; } /* ===================================================================== iParts4U - Fix 13: product page quick wins on phones - The sticky Add to Cart button was icon-only (Journal hides .btn-text on mobile); show the label so the primary action reads as one. - Journal back-to-top button removed on phones: it stacked on top of the Salesfire bubble at bottom-left and the header is pinned anyway. - Description / Specifications / Reviews accordion headers raised from 36px to 44px. ===================================================================== */ .mobile-header-active .button-group-page #button-cart .btn-text { display: inline !important; margin-left: 8px; font-size: 15px; font-weight: 800; letter-spacing: .02em; } .mobile-header-active .scroll-top { display: none !important; } .mobile-header-active .product_extra .panel-heading .panel-title > a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; } /* ===================================================================== iParts4U - Fix 14: "Search these parts" box on mobile category pages (built by the matching block in Custom JS). Phones only. ===================================================================== */ .ip-ps { margin: 0 0 14px; } .ip-ps-input { display: block; width: 100%; height: 48px; padding: 0 14px; border: 2px solid #d6d7cf; border-radius: 10px; background: #fff; font-size: 16px; /* 16px stops iOS zooming the page on focus */ -webkit-appearance: none; appearance: none; box-sizing: border-box; } .ip-ps-input:focus { outline: none; border-color: #c4d42e; box-shadow: 0 0 0 3px rgba(196, 212, 46, .35); } .ip-ps-count { font-size: 13px; color: #666; margin: 6px 2px 0; } .ip-ps-empty { display: none; margin-top: 8px; padding: 14px; border: 1px dashed #cfd0c8; border-radius: 10px; color: #444; font-size: 14px; } .ip-ps-empty.is-on { display: block; } .main-products .product-layout.ip-ps-hide { display: none !important; } /* ===================================================================== iParts4U - Fix 15: shrink the mobile "Filter Products" button Was a 227x60 lime slab pinned bottom-left over the product content. Now a small centred pill above the bottom bar, clear of the Salesfire bubble and Google badge. Same element and icomoon icon; the filter drawer still opens. ===================================================================== */ .mobile-header-active .mobile-filter-trigger.btn { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; bottom: 62px !important; margin-bottom: 0 !important; width: auto !important; min-width: 0 !important; height: 44px !important; padding: 0 20px !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 14px !important; font-weight: 700; line-height: 1; border-radius: 999px !important; box-shadow: 0 3px 12px rgba(0, 0, 0, .22); z-index: 95 !important; } /* ===================================================================== iParts4U - Fix 16: repair the mobile filter drawer layout The Journal filter module is display:flex (a desktop sidebar layout). In the full-width mobile drawer its content stuck at ~167px, leaving the right half blank and the "RESET FILTER" button wrapping into a second column off-screen. Stack it as blocks so each part fills the drawer; keep the group list a flex column so Model / Quality / Availability order is preserved. Seen on /iphone-screens, /iphone-battery. ===================================================================== */ .mobile-header-active .mobile-filter-container .module-filter { display: block !important; } .mobile-header-active .mobile-filter-container .module-body { display: block !important; width: 100% !important; } .mobile-header-active .mobile-filter-container .panel-group { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; width: 100% !important; } .mobile-header-active .mobile-filter-container .reset-filter.btn { display: block !important; width: 100% !important; margin: 12px 0 0 !important; } /* ===================================================================== iParts4U - Fix 10b: hide the floating widgets and the VAT pill during ANY mobile drawer. Journal sets html.mobile-overlay whenever a mobile drawer/overlay is open (burger menu, filter drawer, etc). Extends Fix 10, which only covered the burger menu. ===================================================================== */ html.mobile-overlay #google-merchantwidget-iframe-wrapper, html.mobile-overlay #sf-digi iframe, html.mobile-overlay #vat-toggle { visibility: hidden !important; } /* Fix 16 (cont.) - filter list bodies are capped at height:400px with overflow:visible, so a long model list overflowed its box and painted over the groups below it. Uncap on mobile so each list expands fully and the drawer scrolls as one. The .panel-collapse wrapper still handles show/hide, so the accordion toggle is unaffected. */ .mobile-header-active .mobile-filter-container .panel-body { height: auto !important; max-height: none !important; overflow: visible !important; } /* ===================================================================== iParts4U - Fix 14b: the parts search now runs on desktop as well as phones (the mobile-only guard was removed and its rules unscoped). Both search inputs are capped so they don't stretch the full content column on wide screens - the model search input was 1212px on desktop. ===================================================================== */ .ip-ms-row { max-width: 680px; } .ip-ps-input, .ip-ps-empty { max-width: 420px; } /* ===================================================================== iParts4U - Fix 14c: centre the search boxes on desktop. Left-aligned in a wide content column they looked stray, and the page headings are centred, so the boxes now match. Mobile is untouched - there the boxes are full width and the caps never bite. ===================================================================== */ .desktop-header-active .ip-ms-row, .desktop-header-active .ip-ps-input, .desktop-header-active .ip-ps-empty { margin-left: auto; margin-right: auto; } .desktop-header-active .ip-ms-count, .desktop-header-active .ip-ps-count { text-align: center; } /* ===================================================================== iParts4U - Fix 10c: hide the VAT pill while the header search is open. The pill is fixed top-right and the search field opens directly under the header, so they overlapped (field x0-305, pill x280-420). Two states are covered: the moment the field opens (Journal puts .open on the search dropdown) and once the Salesfire overlay takes over (html.sf-search-open). Kept as two separate rules so a browser without :has() still gets the Salesfire case rather than dropping both. ===================================================================== */ html.sf-search-open #vat-toggle { visibility: hidden !important; } html:has(.mobile-header .mobile-search-wrapper .dropdown.open) #vat-toggle { visibility: hidden !important; } /* ===================================================================== iParts4U - Fix 18: "Notify Me When Available!" button text overflow The out-of-stock button on product cards is locked to height:40px by .product-thumb .cart-group button.button-notify-me { height:40px } but the label wraps to two or three lines inside it, so the words painted above and below the lime box. Let the button grow to fit its label, with a 50px floor so it lines up with ADD TO CART on the cards beside it. Mobile and desktop - a one-line label still renders at 50px, so nothing changes where it already fitted. ===================================================================== */ .product-thumb .cart-group button.button-notify-me { height: auto !important; min-height: 50px !important; padding: 8px 10px !important; line-height: 1.2 !important; font-size: 13px !important; white-space: normal !important; text-align: center !important; gap: 6px !important; } .product-thumb .cart-group button.button-notify-me .fa { flex: 0 0 auto; } /* Same button on the product page itself was 288x38 - the label fits on one line there, but 38px is under the 44px tap target we have used for every other control on phones. */ .mobile-header-active button.button-notify-me.btn-block { height: auto !important; min-height: 44px !important; } /* ===================================================================== iParts4U - Fix 19: the live chat bubble owns the bottom-right corner HubSpot pins its launcher (#hubspot-messages-iframe-container, 100x96, z-index 2147483647) hard into the bottom-right corner, exactly on top of the Contact item in the mobile bottom bar - so during office hours the Contact button could not be tapped at all. HubSpot only shows the launcher when chat is actually staffed, so the matching JS block watches for it: while chat is live the last bar slot becomes "Live Chat" and the floating bubble is hidden; when chat goes offline the bubble disappears on its own and the slot is plain Contact again. Contact Us also lives in the burger menu, so it is never lost. ===================================================================== */ /* Chat is live: the bar slot is the launcher, so hide HubSpot's bubble. HubSpot puts .hs-messages-widget-open on while the panel is open, and the JS adds .ip-chat-open from the moment of the tap, so the panel itself is always visible - only the idle bubble is hidden. */ html.mobile-header-active.ip-chat-live #hubspot-messages-iframe-container { visibility: hidden !important; } html.mobile-header-active.ip-chat-live.hs-messages-widget-open #hubspot-messages-iframe-container, html.mobile-header-active.ip-chat-live.ip-chat-open #hubspot-messages-iframe-container { visibility: visible !important; } /* Swap the Contact icon for a speech bubble while the slot is Live Chat. Journal draws these icons as an icomoon glyph in ::before; the glyph is blanked and an inline SVG mask is painted in its place, at the same 22px size and #d2d2d2 as every other icon in the bar. */ html.ip-chat-live .bottom-menu .bottom-menu-item.ip-chat-item > a:before { content: "" !important; width: 22px !important; height: 22px !important; background-color: #d2d2d2; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 2H4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h3v4l5.2-4H20a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 2H4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h3v4l5.2-4H20a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") no-repeat center; -webkit-mask-size: 22px 22px; mask-size: 22px 22px; } /* ===================================================================== iParts4U - Fix 20: mobile checkout (Quick Checkout one-page) Walked end to end on a 430px iPhone, order #261571. The order summary inside the checkout is a six-column table (.section-body > .table-responsive > table.table-bordered) that renders 658px wide inside a 380px column, so it side-scrolls: the customer sees the picture and the name, and has to swipe sideways to find quantity, unit price and line total. The basket page was restacked as cards back in Fix 04, but that was scoped to .route-checkout-cart .cart-table and this table has entirely different markup, so it was never covered. Restacked here as the same kind of card, plus the 44px tap targets that the rest of the mobile site already uses. ===================================================================== */ /* --- the order summary table becomes a stack of cards ---------------- */ .mobile-header-active.route-checkout-checkout .section-body .table-responsive { overflow-x: visible !important; width: 100% !important; } .mobile-header-active.route-checkout-checkout .section-body .table-responsive > table, .mobile-header-active.route-checkout-checkout .section-body .table-responsive > table > tbody { display: block !important; width: 100% !important; border: 0 !important; } .mobile-header-active.route-checkout-checkout .section-body .table-responsive > table > thead { display: none !important; /* IMAGE / PRODUCT NAME / MODEL ... */ } .mobile-header-active.route-checkout-checkout .section-body .table-responsive > table > tbody > tr { display: grid !important; grid-template-columns: 76px 1fr auto; grid-template-areas: "img name name" "img price total" "qty qty qty"; gap: 6px 12px; align-items: center; width: 100% !important; padding: 12px 10px !important; margin: 0 0 10px !important; border: 1px solid #e2e3dc !important; border-radius: 10px; background: #fff; } .mobile-header-active.route-checkout-checkout .section-body .table-responsive > table > tbody > tr > td { display: block !important; width: auto !important; border: 0 !important; padding: 0 !important; text-align: left !important; vertical-align: middle; } .mobile-header-active.route-checkout-checkout .section-body .td-image { grid-area: img; } .mobile-header-active.route-checkout-checkout .section-body .td-product { grid-area: name; font-weight: 700; line-height: 1.3; } .mobile-header-active.route-checkout-checkout .section-body .td-price { grid-area: price; color: #666; } .mobile-header-active.route-checkout-checkout .section-body .td-qty { grid-area: qty; } .mobile-header-active.route-checkout-checkout .section-body .td-total { grid-area: total; text-align: right !important; font-weight: 700; } /* The model column is the internal code (iPh 11) - not for customers. Matched at the same depth as the display:block rule above, or that one wins on specificity and the code reappears as a stray grid row. */ .mobile-header-active.route-checkout-checkout .section-body .table-responsive > table > tbody > tr > td.td-model { display: none !important; } /* Label the two bare numbers, which lose their column headings once the row is stacked. */ .mobile-header-active.route-checkout-checkout .section-body .td-price:before { content: "Each "; } .mobile-header-active.route-checkout-checkout .section-body .td-total:before { content: "Total "; font-weight: 400; color: #666; } .mobile-header-active.route-checkout-checkout .section-body .td-image img { width: 76px; height: auto; border-radius: 6px; } /* --- 44px tap targets ------------------------------------------------ */ /* NOTE: these controls ignore `height`, even inline and !important - the theme clamps them. `height:auto` plus `min-height` is what actually takes, so every size below is written that way. Address picker was 380x34; every new-address field was 34px too. */ .mobile-header-active.route-checkout-checkout #input-payment-address, .mobile-header-active.route-checkout-checkout .section-body select.form-control, .mobile-header-active.route-checkout-checkout .section-body input.form-control { height: auto !important; min-height: 44px !important; font-size: 16px !important; /* 16px stops iOS zooming on focus */ } /* Quantity stepper: the field was 48x28 with two 35x35 buttons. */ .mobile-header-active.route-checkout-checkout .section-body .table-responsive > table > tbody > tr > td.td-qty input.form-control { width: 56px !important; min-width: 56px !important; text-align: center; display: inline-block; vertical-align: middle; } .mobile-header-active.route-checkout-checkout .td-qty .btn { width: 44px !important; height: auto !important; min-height: 44px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; vertical-align: middle; } /* The primary CTA was 410x40. */ .mobile-header-active.route-checkout-checkout #quick-checkout-button-confirm { height: auto !important; min-height: 50px !important; font-size: 16px !important; font-weight: 700; } /* ========================================================================= Fix 22 - Product page: focus, and trust up where the decision is made ------------------------------------------------------------------------- 1. Internal model shorthand ("Compatible with: iPh 11P") off the product page. It is our picking code, not customer information - a retail buyer cannot decode it and it adds a line of noise beside the price. Product page only; the category cards are left alone for now. 2. Trust block (Free Shipping / Returns / Same Day Dispatch) lifted from ~1,100px below the price to directly under it, and re-laid as three icon-left rows so it costs ~215px instead of ~410px. 3. Journal "Recommended" carousel (module 239) dropped on mobile - it was ~430px of scroll between the buyer and the description. Desktop is untouched apart from (1). ========================================================================= */ /* --- 1. internal model code ---------------------------------------- */ .route-product-product .product-stats li.product-model { display: none !important; } /* Same code on the product cards (category, search, brand, carousels). Journal numbers the card stats in the order they are configured under Product Stats - .stat-1 is the model, .stat-2 is the SKU. If that order is ever changed in the theme settings, this selector needs changing with it. */ .product-thumb .stats .stat-1 { display: none !important; } /* --- 2. trust block up under the price ----------------------------- */ .mobile-header-active.route-product-product .product-blocks-324 { order: -1 !important; margin: 0 0 16px !important; } .mobile-header-active.route-product-product .module-info_blocks-325 .module-body { display: block !important; } .mobile-header-active.route-product-product .module-info_blocks-325 .module-item { padding: 0 !important; width: 100% !important; max-width: none !important; flex: none !important; } .mobile-header-active.route-product-product .module-info_blocks-325 .info-block { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 9px 12px !important; width: 100% !important; max-width: none !important; text-align: left !important; border-bottom: 1px solid #eceded; } /* the icon is a :before on .info-block - stop it stretching the row */ .mobile-header-active.route-product-product .module-info_blocks-325 .info-block:before { flex: 0 0 auto !important; margin: 0 !important; } .mobile-header-active.route-product-product .module-info_blocks-325 .module-item:last-child .info-block { border-bottom: 0; } .mobile-header-active.route-product-product .module-info_blocks-325 .info-block-content { flex: 1 1 auto !important; padding: 0 !important; display: block !important; text-align: left !important; max-width: none !important; } .mobile-header-active.route-product-product .module-info_blocks-325 .info-block-title { font-size: 13px !important; line-height: 1.3 !important; margin: 0 0 1px !important; } .mobile-header-active.route-product-product .module-info_blocks-325 .info-block-text { font-size: 12px !important; line-height: 1.35 !important; color: #666 !important; } /* the theme centres these; left-aligned scans better beside an icon */ .mobile-header-active.route-product-product .module-info_blocks-325 .info-block-title, .mobile-header-active.route-product-product .module-info_blocks-325 .info-block-text { text-align: left !important; } /* --- 3. recommendations carousel off on mobile --------------------- */ .mobile-header-active.route-product-product .module-products-239 { display: none !important; } /* --------------------- Clearpay placement card (10 Sep 2026) --------------------- Styles Clearpay's own placement widget as a card. The wording and badge are still drawn by their script - only the container and type size are ours. Only rendered for guests / retail; trade accounts never receive the element. */ .product-price-group:has(afterpay-placement) { flex-wrap: wrap; } .product-price-group:has(afterpay-placement) .price-wrapper { flex: 0 0 auto; } .product-price-group:has(afterpay-placement) .product-stats { flex: 1 0 100%; margin-top: 4px; } .product-price-group afterpay-placement { display: block; flex: 1 0 100%; width: 100%; min-width: 260px; box-sizing: border-box; background: #f2fffa; color: #12332a; border: 1px solid #b2fce4; border-radius: 10px; padding: 14px 16px; margin: 14px 0 2px; --messaging-font-size: 15px; --messaging-line-height: 1.45; --messaging-margin-block-start: 0px; --messaging-margin-block-end: 0px; --logo-badge-width: 118px; } @media (max-width: 480px) { .product-price-group afterpay-placement { padding: 12px 13px; --messaging-font-size: 14px; --logo-badge-width: 104px; } } /* ============================================================================ Fix 23 - mobile product page redesign (10 Sep 2026) Scoped to phones only. Desktop is untouched. Builds on Fix 22, which already hides the model code sitewide, pulls the Product USP trust block up under the price and drops the Recommended carousel on mobile. ========================================================================== */ /* --- 1. Stack the page and let the title sit above the gallery ----------- */ .mobile-header-active.route-product-product .product-info { display: flex; flex-direction: column; } .mobile-header-active.route-product-product .product-info .ip-head { order: 1; width: 100%; } .mobile-header-active.route-product-product .product-info .product-left { order: 2; } .mobile-header-active.route-product-product .product-info .product-right { order: 3; } .mobile-header-active.route-product-product .ip-head .title.page-title { font-size: 19px; line-height: 1.3; margin: 10px 0 6px; } .mobile-header-active.route-product-product .ip-head .rating.rating-page { margin: 0 0 10px; } .mobile-header-active.route-product-product .ip-head .rating-stars { font-size: 14px; } .mobile-header-active.route-product-product .ip-review-link { font-size: 12px; color: #4e5c10; text-decoration: underline; margin-left: 6px; } /* --- 2. Cap the gallery so Add to Cart is reachable ---------------------- */ .mobile-header-active.route-product-product .product-left .product-image { max-height: 44vh; } .mobile-header-active.route-product-product .product-left .product-image img { max-height: 44vh; width: auto; max-width: 100%; object-fit: contain; margin-left: auto; margin-right: auto; } /* --- 3. Price hierarchy. html.ip-trade is set by Fix 23 JS for trade customer groups only - guests and retail keep the inc-VAT price leading, as the Price Marking Order requires. */ .mobile-header-active.route-product-product.ip-trade .price-wrapper { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; } .mobile-header-active.route-product-product.ip-trade .price-wrapper .product-tax { order: 1; font-size: 26px; font-weight: 800; color: #2d2a2b; letter-spacing: -0.02em; margin: 0; } .mobile-header-active.route-product-product.ip-trade .price-wrapper .price-group { order: 2; } .mobile-header-active.route-product-product.ip-trade .price-wrapper .price-group .product-price { font-size: 14px; font-weight: 400; color: #8b8b8b; } .mobile-header-active.route-product-product .ip-vat-note { display: inline-block; font-size: 11px; color: #4e5c10; background: #eef3d8; border-radius: 3px; padding: 2px 6px; margin: 8px 0 0; } /* --- 4. Points line out of the decision block --------------------------- */ .mobile-header-active.route-product-product .price-wrapper .product-points { display: none !important; } /* --- 5. Stock / brand / SKU become one chip row -------------------------- */ .mobile-header-active.route-product-product .product-stats ul.list-unstyled { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; } .mobile-header-active.route-product-product .product-stats ul.list-unstyled li { font-size: 11.5px; line-height: 1.3; padding: 5px 9px; margin: 0; border: 1px solid #e3e3e0; border-radius: 20px; background: #fafaf7; color: #6b6b6b; } .mobile-header-active.route-product-product .product-stats ul.list-unstyled li b { font-weight: 400; } .mobile-header-active.route-product-product .product-stats li.product-stock.in-stock { border-color: #bcd36a; background: #f2f7df; color: #4e5c10; font-weight: 600; } .mobile-header-active.route-product-product .product-stats li.product-stock.in-stock b { font-weight: 600; } /* --- 6. Quantity stepper to a proper tap size --------------------------- */ .mobile-header-active.route-product-product .stepper-group .stepper input#product-quantity { height: auto; min-height: 46px; font-size: 15px; } .mobile-header-active.route-product-product .stepper-group .stepper span i { min-height: 23px; line-height: 23px; } /* --- 7. Warranty / USP tiles, built by Fix 23 JS ------------------------ */ .mobile-header-active.route-product-product .ip-usp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 4px; } .mobile-header-active.route-product-product .ip-usp .ip-usp-item { font-size: 11.5px; line-height: 1.35; background: #f6f6f1; border-radius: 6px; padding: 9px 10px; color: #2d2a2b; text-decoration: none; display: block; } .mobile-header-active.route-product-product .ip-usp .ip-usp-item strong { display: block; font-size: 11.5px; margin-bottom: 1px; } .mobile-header-active.route-product-product .ip-usp .ip-usp-warranty { background: #eef3d8; color: #3f4a0d; } .mobile-header-active.route-product-product .ip-usp .ip-usp-item.ip-usp-wide { grid-column: 1 / -1; } /* ============================================================================ Fix 23a - phone corrections, 10 Sep 2026 Reported from a real handset: the Clearpay card was wider than the screen, which gave the whole page horizontal overflow and pushed the price off to the left. Everything here is containment - nothing new is added. ========================================================================== */ /* Nothing in the price block may exceed the screen */ .mobile-header-active.route-product-product .product-price-group, .mobile-header-active.route-product-product .price-wrapper, .mobile-header-active.route-product-product .price-group, .mobile-header-active.route-product-product .product-stats { max-width: 100%; min-width: 0; } /* flex: 1 0 100% refused to shrink, so the card could not fit a 393px screen. 1 1 100% with min-width 0 lets it. */ .mobile-header-active.route-product-product .product-price-group afterpay-placement { flex: 1 1 100%; width: auto; min-width: 0; max-width: 100%; } /* Price stays hard left, so an overflow elsewhere can never clip it */ .mobile-header-active.route-product-product .product-price-group { justify-content: flex-start; text-align: left; } .mobile-header-active.route-product-product .price-wrapper, .mobile-header-active.route-product-product .ip-head .title.page-title, .mobile-header-active.route-product-product .ip-head .rating.rating-page { text-align: left; } /* Chips were rendering as full-width stacked bars - Journal gives the li display:block. Make them shrink-wrap so they sit in a row. */ .mobile-header-active.route-product-product .product-stats ul.list-unstyled li { display: inline-flex; align-items: center; flex: 0 0 auto; width: auto; max-width: 100%; } /* The 44vh cap was not biting - the image is inside the lightgallery wrapper, not only .product-image. */ .mobile-header-active.route-product-product .product-left .product-image, .mobile-header-active.route-product-product .product-left .product-image > *, .mobile-header-active.route-product-product .product-left .swiper-slide { max-height: 46vh; } .mobile-header-active.route-product-product .product-left img { max-height: 46vh; width: auto; max-width: 100%; object-fit: contain; } /* ============================================================================ Fix 23b - phone corrections round 2, 10 Sep 2026 (verified on an emulated iPhone at 430px) ========================================================================== */ /* .product-price-group is a nowrap flex row, so on a trade page - where there is no Clearpay card to trigger the :has() wrap - the chips were squeezed into a 103px column beside the price. Block layout removes the problem for both cases. */ .mobile-header-active.route-product-product .product-price-group { display: block !important; } .mobile-header-active.route-product-product .product-stats { width: 100% !important; margin-top: 6px; } /* Journal sets an explicit width on these list items, which beat width:auto and left the chips as full-width stacked bars. */ .mobile-header-active.route-product-product .product-stats ul.list-unstyled li { width: auto !important; flex-basis: auto !important; } /* --- Fix 23c ------------------------------------------------------------ Journal sets flex-direction: column on the product stats list, which is why the chips stayed as full-width stacked bars however narrow the items were told to be. */ .mobile-header-active.route-product-product .product-stats ul.list-unstyled { flex-direction: row !important; align-items: flex-start !important; } /* ============================================================================ Fix 23d - USP tiles and white page, 10 Sep 2026 Restyles the Journal Product Page USP info blocks (module 325) from an icon-and-row list into the 2-up tile grid from the mockup, and takes the grey page background to white on phone product pages. The block's own customer-group targeting still decides which tiles a visitor sees. ========================================================================== */ html.mobile-header-active.route-product-product body { background: #fff !important; } .mobile-header-active.route-product-product .module-info_blocks-325 .module-body { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; } .mobile-header-active.route-product-product .module-info_blocks-325 .module-item { padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; flex: none !important; } .mobile-header-active.route-product-product .module-info_blocks-325 .info-block { display: block !important; background: #f6f6f1 !important; border: 0 !important; border-radius: 6px !important; padding: 9px 10px !important; width: auto !important; max-width: none !important; text-align: left !important; } /* the icon is a :before on .info-block */ .mobile-header-active.route-product-product .module-info_blocks-325 .info-block:before { display: none !important; } .mobile-header-active.route-product-product .module-info_blocks-325 .info-block-title { font-size: 11.5px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 0 1px !important; color: #2d2a2b !important; } .mobile-header-active.route-product-product .module-info_blocks-325 .info-block-text { font-size: 11.5px !important; line-height: 1.35 !important; white-space: normal !important; color: #2d2a2b !important; } /* warranty tile, injected by Fix 23 JS into the same grid */ .mobile-header-active.route-product-product .module-info_blocks-325 .ip-warranty-item .info-block { background: #eef3d8 !important; } .mobile-header-active.route-product-product .module-info_blocks-325 .ip-warranty-item .info-block-title, .mobile-header-active.route-product-product .module-info_blocks-325 .ip-warranty-item .info-block-text { color: #3f4a0d !important; } /* --- Fix 23e ------------------------------------------------------------- Salesfire "You may also like" recommendations unit off on phone product pages - it was a 527px block of scroll between the description and the rest of the page. It is an iframe Salesfire injects client-side (id starts sf_recs_) inside a generated product_tabs- wrapper, which is why hiding Journal's own Recommended carousel never touched it. NOTE: this hides it, it does not stop it loading. To stop the request (and any impression counting) the placement has to be switched off for mobile in the Salesfire dashboard. */ /* CORRECTED 10 Sep 2026: the wrapper this iframe sits in IS the Description tab pane, so hiding it hid the whole description. Only the iframe is hidden now. */ .mobile-header-active.route-product-product iframe[id^="sf_recs_"] { display: none !important; } /* --- Fix 23f ------------------------------------------------------------- Description, specification and review copy was set to margin:0 on every paragraph and list item with a 1.43 line-height, so it read as a wall of text. Gives the prose the spacing the mockup had. */ .mobile-header-active.route-product-product .product_extra .block-content { font-size: 14px !important; line-height: 1.65 !important; } .mobile-header-active.route-product-product .product_extra .block-content p { margin: 0 0 14px !important; } .mobile-header-active.route-product-product .product_extra .block-content p:last-child { margin-bottom: 0 !important; } .mobile-header-active.route-product-product .product_extra .block-content ul, .mobile-header-active.route-product-product .product_extra .block-content ol { margin: 0 0 14px !important; padding-left: 20px !important; } .mobile-header-active.route-product-product .product_extra .block-content li { margin: 0 0 6px !important; } .mobile-header-active.route-product-product .product_extra .block-content h2, .mobile-header-active.route-product-product .product_extra .block-content h3, .mobile-header-active.route-product-product .product_extra .block-content h4 { font-size: 15px !important; margin: 18px 0 8px !important; } /* --- Fix 23g ------------------------------------------------------------- Hairlines between the Description / Specifications / Reviews accordion rows, and enough bottom padding that the last row can be scrolled clear of the 66px fixed buy bar. */ .mobile-header-active.route-product-product .product_extra .panel { border-top: 1px solid #e3e3e0 !important; } .mobile-header-active.route-product-product .product_extra .panel:last-child { border-bottom: 1px solid #e3e3e0 !important; } .mobile-header-active.route-product-product body { padding-bottom: 130px !important; } /* --- Fix 23h ------------------------------------------------------------- Gallery: .product-left carried 30px side padding and the .main-image swiper had a 1px black border with a 10px radius, so the photo sat in a small outlined box. Full-bleed and unboxed, capped at 46vh. Swiper sets its slide widths from the container at init, so removing the padding in CSS (before init) is what lets the slide fill the width - do NOT force a width on .swiper-slide, that breaks the carousel maths. */ .mobile-header-active.route-product-product .product-left { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 12px !important; } .mobile-header-active.route-product-product .product-left .product-image .main-image { border: 0 !important; border-radius: 0 !important; } .mobile-header-active.route-product-product .product-left .product-image img { width: 100% !important; height: auto !important; /* 34vh keeps the picture inside the swiper's own 323px box - 46vh overflowed it and the bottom of the image was being clipped. */ max-height: 34vh !important; object-fit: contain !important; display: block !important; } .mobile-header-active.route-product-product .product-left .additional-images { padding: 8px 12px 0 !important; } /* ==== iParts4U - Fix SS1: desktop 'EU site' / 'UK site' pill sized to match the VAT toggle (26px, 12px/600) ==== */ .top-bar .third-menu .j-menu > li.ip-ss-li{display:flex !important;align-items:center !important;padding:0 14px 0 0 !important} .top-bar .third-menu .j-menu > li.ip-ss-li > a.ip-ss-pill{display:inline-flex !important;align-items:center !important;gap:6px !important;height:26px !important;padding:0 12px !important;margin:0 !important;background:#2d2a2b !important;color:#fff !important;border:1px solid #2d2a2b !important;border-radius:999px !important;font-size:12px !important;font-weight:600 !important;line-height:1 !important;text-transform:none !important;letter-spacing:0 !important;box-sizing:border-box !important} .top-bar .third-menu .j-menu > li.ip-ss-li > a.ip-ss-pill:hover{background:#c7d530 !important;color:#2d2a2b !important;border-color:#2d2a2b !important} .top-bar .third-menu .j-menu > li.ip-ss-li > a.ip-ss-pill svg{width:13px !important;height:13px !important} /* ===== Fix 28 — out-of-stock products in the mobile sticky bar (14 Sep 2026) ===== HuntBee's stock-notify module inserts its "not available" note and the Notify Me button INSIDE the quantity box (.stepper) and restyles that box as a wide panel. Fix 24 pins .stepper to a narrow column of the one-row bar, so on phones the panel was squeezed into ~60px, overflowed upward over the description, and Buy Now sat on top of the notify button. On phones the bar for an out-of-stock product is now a single full-width "Notify Me When Available!" button; the note paragraph (which has no room in a fixed bar) is hidden, as are Add to Cart and Buy Now. */ html.mobile-header-active body[data-out-of-stock] .product-info.out-of-stock .button-group-page .stepper-group.cart-group { display: block !important; } html.mobile-header-active body[data-out-of-stock] .product-info.out-of-stock .button-group-page .stepper { display: block !important; flex: none !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; } html.mobile-header-active body[data-out-of-stock] .product-info.out-of-stock .button-group-page .stepper > label, html.mobile-header-active body[data-out-of-stock] .product-info.out-of-stock .button-group-page .stepper > input, html.mobile-header-active body[data-out-of-stock] .product-info.out-of-stock .button-group-page .stepper > span, html.mobile-header-active body[data-out-of-stock] .product-info.out-of-stock .button-group-page .stepper .note-notify-me, html.mobile-header-active body[data-out-of-stock] .product-info.out-of-stock .button-group-page #button-cart, html.mobile-header-active body[data-out-of-stock] .product-info.out-of-stock .button-group-page .extra-group { display: none !important; } html.mobile-header-active body[data-out-of-stock] .product-info.out-of-stock .button-group-page .stepper .note-notify-me::before { content: none !important; } html.mobile-header-active body[data-out-of-stock] .product-info.out-of-stock .button-group-page .button-notify-me { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 50px !important; margin: 0 !important; padding: 8px 12px !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; border-radius: 6px !important; background-color: #c4d42e !important; color: #0a0a0a !important; white-space: normal !important; } /* HuntBee's out-of-stock list is cached, so a part that has just come back into stock can still be flagged by it while Journal (live stock) says in stock. Trust Journal: hide the stale notify elements and keep Add to Cart usable. */ html.mobile-header-active body[data-out-of-stock] .product-info:not(.out-of-stock) .button-group-page .note-notify-me, html.mobile-header-active body[data-out-of-stock] .product-info:not(.out-of-stock) .button-group-page .button-notify-me { display: none !important; } html.mobile-header-active body[data-out-of-stock] .product-info:not(.out-of-stock) .button-group-page #button-cart { display: flex !important; } /* ===== Fix 29 — checkout shipping options as tidy rows (14 Sep 2026) ===== */ label:has(> .shipping-quote-title.ip-ship) { display: flex !important; align-items: flex-start; gap: 8px; width: 100%; } label:has(> .shipping-quote-title.ip-ship) input { margin-top: 4px; flex: none; } .shipping-quote-title.ip-ship { display: flex !important; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; align-items: baseline; column-gap: 8px; line-height: 1.3; } .ip-ship-name { display: inline !important; flex: 1 1 auto !important; width: auto !important; font-weight: 600; } .ip-ship-price { display: inline !important; flex: none !important; width: auto !important; margin-left: auto; font-weight: 700; white-space: nowrap; } .ip-ship-eta { flex-basis: 100%; font-size: 12px; color: #6b6b6b; } /* ===== Fix 30 — delivery teaser + dispatch countdown (14 Sep 2026) ===== */ #ip-strip { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 40px 6px 12px; background: #0a0a0a; color: #fff; font-size: 13px; line-height: 1.3; position: relative; z-index: 5; text-align: center; } #ip-strip b { color: #c4d42e; font-weight: 700; } #ip-strip .ip-strip-icon { font-size: 15px; line-height: 1; } #ip-strip .ip-strip-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #999; font-size: 20px; line-height: 1; padding: 4px 8px; cursor: pointer; } #ip-strip .ip-strip-x:hover { color: #fff; } html.mobile-header-active #ip-strip { font-size: 12px; padding: 5px 34px 5px 10px; } .ip-teaser-line { margin: 6px 0 4px; font-size: 13px; color: #333; } .ip-teaser-line b { color: #7a8a1c; } .ip-teaser { margin: 0 0 12px; padding: 10px 12px; background: #f6f6f1; border-left: 4px solid #c4d42e; border-radius: 4px; font-size: 13px; line-height: 1.4; color: #222; } .ip-teaser .ip-teaser-step { font-weight: 600; } .ip-teaser .ip-teaser-step-next { font-weight: 400; color: #555; margin-top: 2px; } .ip-teaser .ip-teaser-ok { color: #4f6b00; font-weight: 600; } .ip-teaser .ip-teaser-credit { margin-top: 6px; color: #444; } .ip-teaser .ip-teaser-credit a { color: #7a8a1c; font-weight: 600; text-decoration: underline; white-space: nowrap; } .ip-teaser .ip-teaser-bar { height: 5px; border-radius: 3px; background: #e6e6df; margin: 7px 0 4px; overflow: hidden; } .ip-teaser .ip-teaser-bar span { display: block; height: 100%; background: #c4d42e; border-radius: 3px; } .ip-teaser .ip-teaser-of { font-size: 12px; color: #666; } .ip-teaser .ip-teaser-cd { margin-top: 6px; font-size: 12px; color: #666; } .ip-teaser .ip-teaser-cd b { color: #222; } .ip-teaser-compact { margin: 0; padding: 8px 10px; font-size: 12px; border-radius: 0; } #ip-teaser-mini-li { list-style: none; padding: 0 !important; } #ip-teaser-checkout { margin-bottom: 14px; } /* mobile: small greys are hard to read on a phone */ @media (max-width: 767px) { /* on mobile the section behind it is the same tone, so the teaser needs to read as its own card */ .ip-teaser { font-size: 14px; line-height: 1.45; padding: 12px 13px; background: #fff; border: 1px solid #e2e3dc; border-left: 4px solid #c4d42e; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .ip-teaser .ip-teaser-step-next { color: #444; } .ip-teaser .ip-teaser-cd { font-size: 13px; color: #555; } .ip-teaser .ip-teaser-of { font-size: 13px; color: #555; } .ip-teaser .ip-teaser-credit { font-size: 13px; } .ip-teaser-line { font-size: 14px; } } /* ===== Fix 31 — checkout customs compliance + ship-separately heading (15 Sep 2026) ===== */ #ip-compliance { margin: 12px 0 16px; } .ip-cc { padding: 12px 14px; border-radius: 4px; font-size: 13px; line-height: 1.45; color: #222; background: #f6f6f1; border-left: 4px solid #c4d42e; } .ip-cc p { margin: 6px 0 10px; } .ip-cc b { font-weight: 700; } .ip-cc-ok { display: flex; gap: 10px; align-items: flex-start; background: #f3f8e6; border-left-color: #7a8a1c; } .ip-cc-warn { display: flex; gap: 10px; align-items: flex-start; background: #fff6e5; border-left-color: #e0a300; } .ip-cc-need { background: #fdf3f3; border-left-color: #c0392b; } .ip-cc-icon { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #7a8a1c; color: #fff; font-weight: 700; text-align: center; line-height: 22px; font-size: 13px; } .ip-cc-warn .ip-cc-icon { background: #e0a300; } .ip-cc-link, .ip-cc-more { color: #7a8a1c; font-weight: 600; text-decoration: underline; margin-left: 6px; white-space: nowrap; } .ip-cc-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; } .ip-cc-row .form-control { flex: 1 1 220px; min-height: 40px; font-size: 13px; } .ip-cc-row .btn { flex: 0 0 auto; min-height: 40px; padding: 0 18px; } .ip-cc-or { text-align: center; margin: 10px 0; color: #777; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } .ip-cc-accept { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; cursor: pointer; margin: 0; padding: 10px; background: #fff; border: 1px solid #e5c8c8; border-radius: 4px; } .ip-cc-accept input { margin: 3px 0 0; flex: 0 0 auto; width: 18px; height: 18px; } .ip-cc-err { color: #c0392b; font-weight: 600; margin-top: 6px; min-height: 0; } .ip-cc-err:empty { display: none; } .ip-cc-shake { animation: ip-cc-shake .4s; } @keyframes ip-cc-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } #quick-checkout-button-confirm.ip-cc-locked, #button-confirm.ip-cc-locked { opacity: .45; cursor: not-allowed; } #ip-cc-locknote { clear: both; margin-top: 8px; font-size: 12px; color: #c0392b; text-align: right; } .ip-ship-sep { margin: 12px 0 6px; padding: 8px 0 4px; border-top: 1px dashed #ccc; font-size: 13px; font-weight: 700; color: #222; } .ip-ship-sep span { display: block; font-weight: 400; color: #666; font-size: 12px; margin-top: 2px; } html.mobile-header-active .ip-cc-row .btn { flex: 1 1 100%; } .ip-cc-addr { margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(0,0,0,.15); font-size: 12px; color: #555; } .ip-cc-addr b { color: #222; } .ip-cc-addr-warn { color: #7a5a00; } .ip-cc-addr-warn b { color: #7a5a00; } /* ===== Fix 32 — top up to free delivery (16 Sep 2026, v2: link + pop-up) ===== */ .ip-topup { margin: -10px 0 12px; padding: 0 12px 0 16px; font-size: 13px; } #ip-topup-checkout:not(.ip-topup-in) { margin: -12px 0 14px; } .ip-topup-link { background: none; border: 0; padding: 4px 0; color: #7a8a1c; font-weight: 600; font-size: 12.5px; text-decoration: underline; cursor: pointer; } .ip-topup-link:hover { color: #4f6b00; } /* the call to action sits inside the teaser box, as a button rather than a link */ .ip-topup-in { margin: 9px 0 1px; padding: 0; } .ip-topup-in .ip-topup-link { display: inline-flex; align-items: center; gap: 6px; background: #c4d42e; color: #2d2a2b; border-radius: 4px; padding: 8px 13px; font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; box-shadow: 0 1px 0 rgba(0,0,0,.08); } .ip-topup-in .ip-topup-link:hover { background: #b3c221; color: #000; text-decoration: none; } html.ip-topup-lock { overflow: hidden; } #ip-topup-modal { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.45); padding: 16px; align-items: center; justify-content: center; } #ip-topup-modal.ip-topup-open { display: flex; } .ip-topup-box { position: relative; width: 100%; max-width: 620px; max-height: 85vh; overflow: auto; background: #fff; border-radius: 8px; padding: 18px 18px 12px; box-shadow: 0 16px 48px rgba(0,0,0,.25); font-size: 13px; color: #222; } .ip-topup-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 26px; line-height: 1; color: #888; cursor: pointer; padding: 4px 8px; } .ip-topup-x:hover { color: #000; } .ip-topup-box .ip-topup-head { margin: 0 28px 10px 0; line-height: 1.35; } .ip-topup-box .ip-topup-head b { display: block; font-size: 15px; margin-bottom: 2px; } .ip-topup-box .ip-topup-head span { color: #555; } .ip-topup-list { display: flex; flex-direction: column; } .ip-topup-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #ececea; min-width: 0; } .ip-topup-item:first-child { border-top: 0; } .ip-topup-thumb { flex: 0 0 52px; width: 52px; height: 52px; background: #fff; border: 1px solid #ececea; border-radius: 4px; overflow: hidden; } .ip-topup-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .ip-topup-mid { flex: 1 1 auto; min-width: 0; } .ip-topup-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.3; color: #222; text-decoration: none; } .ip-topup-name:hover { text-decoration: underline; color: #222; } .ip-topup-why { margin-top: 2px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: #888; font-weight: 600; } .ip-topup-why-bought { color: #7a8a1c; } .ip-topup-price { flex: 0 0 auto; font-weight: 700; font-size: 13px; white-space: nowrap; } .ip-topup-add { flex: 0 0 auto; background: #2d2a2b; color: #fff; border: 0; border-radius: 4px; font-size: 12px; font-weight: 600; padding: 7px 12px; cursor: pointer; } .ip-topup-add:hover { background: #000; } .ip-topup-add:disabled { background: #888; cursor: default; } @media (max-width: 767px) { .ip-topup { font-size: 14px; } .ip-topup-link { font-size: 14px; padding: 6px 0; } .ip-topup-in .ip-topup-link { font-size: 14px; padding: 10px 14px; width: 100%; justify-content: center; } .ip-topup-name { font-size: 13.5px; } .ip-topup-why { font-size: 11px; color: #777; } /* room at the foot for the floating chat bubble, which sits over the last row otherwise */ #ip-topup-modal { padding: 10px 10px 84px; align-items: flex-start; } .ip-topup-box { max-height: 72vh; padding: 14px 12px 10px; } .ip-topup-item { flex-wrap: wrap; gap: 8px; } .ip-topup-mid { flex-basis: calc(100% - 62px); } .ip-topup-price { margin-left: 62px; } .ip-topup-add { margin-left: auto; } } /* Fix 29 tweak: keep the delivery price near the option name instead of hugging the far edge */ .shipping-quote-title.ip-ship { max-width: 520px; } /* ===== Fix 33 — delivery note for the courier (16 Sep 2026) ===== */ /* Journal fixes the order-comments textarea at 650px inside a 981px block; match it to the delivery-note field */ .section-comments textarea, #quick-checkout .section-comments textarea { width: 100% !important; max-width: none !important; } #ip-dnote { display: block; width: 100%; flex: 0 0 100%; margin: 10px 0 6px; } #ip-dnote .ip-dn-row { display: block; width: 100%; } #ip-dnote .ip-dn-row input { display: block; width: 100%; max-width: none; } .ip-dn-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #222; } .ip-dn-opt { font-weight: 400; color: #888; } .ip-dn-what { background: none; border: 0; padding: 0 0 0 4px; color: #7a8a1c; font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; } .ip-dn-what:hover { color: #4f6b00; } /* what they accept by ticking "leave in a safe place" - only in the DOM while it is ticked */ #ip-dnote .ip-dn-consent { display: flex !important; flex-wrap: nowrap !important; flex-direction: row !important; align-items: flex-start; gap: 9px; margin: 7px 0 0; padding: 9px 11px; background: #fbf9ec; border: 1px solid #e8e3c2; border-left: 3px solid #c4d42e; border-radius: 4px; font-size: 12px; line-height: 1.45; color: #4a4733; } #ip-dnote .ip-dn-consent > svg { flex: 0 0 15px !important; width: 15px !important; height: 15px !important; max-width: 15px !important; min-width: 15px !important; margin: 1px 0 0 !important; display: block !important; } #ip-dnote .ip-dn-consent > div { flex: 1 1 auto; min-width: 0; } .ip-dn-row { position: relative; } .ip-dn-row input { padding-right: 42px; } .ip-dn-count { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #999; pointer-events: none; } .ip-dn-count-low { color: #c0392b; font-weight: 700; } .ip-dn-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 0 0 7px; font-size: 12px; color: #555; } .ip-dn-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 8px; font-size: 12px; color: #555; } .ip-dn-opts label, .ip-dn-foot label { font-weight: 400; margin: 0; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; } .ip-dn-opts input[type="checkbox"], .ip-dn-foot input[type="checkbox"] { position: static; margin: 0; flex: 0 0 16px; width: 16px; height: 16px; accent-color: #c4d42e; } .ip-dn-w3w { color: #7a8a1c; font-weight: 600; text-decoration: underline; white-space: nowrap; } .ip-dn-state { color: #4f6b00; font-weight: 600; } .ip-dn-state.ip-dn-err { color: #c0392b; } html.ip-dn-lock { overflow: hidden; } #ip-dn-modal { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.45); padding: 16px; align-items: center; justify-content: center; } #ip-dn-modal.ip-dn-open { display: flex; } .ip-dn-box { position: relative; width: 100%; max-width: 520px; max-height: 85vh; overflow: auto; background: #fff; border-radius: 8px; padding: 20px 20px 16px; box-shadow: 0 16px 48px rgba(0,0,0,.25); font-size: 13px; line-height: 1.5; color: #222; } .ip-dn-box h4 { margin: 0 28px 10px 0; font-size: 16px; font-weight: 700; } .ip-dn-box p { margin: 0 0 10px; } .ip-dn-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 26px; line-height: 1; color: #888; cursor: pointer; padding: 4px 8px; } .ip-dn-x:hover { color: #000; } .ip-dn-actions { margin-top: 4px; } @media (max-width: 767px) { .ip-dn-label { font-size: 14px; } .ip-dn-what { font-size: 13px; } .ip-dn-opts { gap: 6px 16px; font-size: 13px; color: #444; } .ip-dn-foot { gap: 8px 16px; font-size: 13px; color: #444; } .ip-dn-w3w { font-size: 13px; } #ip-dnote .ip-dn-consent { font-size: 13px; } /* sit the pop-up near the top: bottom-anchored it lands under the floating chat bubble */ #ip-dn-modal { align-items: flex-start; padding: 10px 10px 84px; } .ip-dn-box { max-height: 72vh; } } /* ===== Fix 34 — default delivery option (16 Sep 2026) ===== */ .ip-pref { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid #f0f0ee; font-size: 12px; color: #666; } .ip-pref-btn { background: none; border: 0; padding: 0; color: #7a8a1c; font-weight: 600; font-size: 12px; text-decoration: underline; cursor: pointer; text-align: left; } .ip-pref-btn:hover { color: #4f6b00; } .ip-pref-ok { color: #4f6b00; font-weight: 600; } .ip-pref-now b { color: #222; } .ip-pref-hint { color: #999; } .ip-pref-busy { opacity: .5; pointer-events: none; } /* mobile: 12px greys are hard to read on a phone, so lift the size and the contrast */ @media (max-width: 767px) { .ip-pref { display: block; font-size: 14px; line-height: 1.45; color: #444; margin-top: 10px; padding-top: 10px; } .ip-pref-btn { display: block; font-size: 14px; line-height: 1.45; padding: 2px 0; } .ip-pref-hint { display: block; color: #666; font-size: 13px; margin-top: 2px; } .ip-pref-now, .ip-pref-ok { display: block; } } /* ===== Fix 35 — terms checkbox sits inside its box (16 Sep 2026) ===== Journal absolutely positions the checkout checkboxes at margin-left:-20px, so the Terms box hangs outside the row instead of sitting in it. The mobile tap-target rules already fix this for phones (.mobile-header-active…, higher specificity, untouched here); this does the same for every other width. */ .route-checkout-checkout .section-body .checkbox label, #quick-checkout .checkbox label { display: flex !important; align-items: center; gap: 9px; padding-left: 0 !important; line-height: 1.35; } .route-checkout-checkout .section-body .checkbox label input[type="checkbox"], #quick-checkout .checkbox label input[type="checkbox"] { position: static !important; margin: 0 !important; flex: 0 0 16px; width: 16px; height: 16px; accent-color: #c4d42e; } /* ===== Fix 36 — account dashboard tiles (17 Sep 2026) ===== The tile row is a fixed grid, so adding "My deliveries" left one tile stranded on a row of its own. Flex with stretching tiles fills every row whatever the count and whatever the screen width. */ .ip-acct-grid { display: flex !important; flex-wrap: wrap; gap: 8px; } .ip-acct-grid > a { flex: 1 1 110px; min-width: 110px; }