/* ADN stock search — styles for the shared module (assets/js/adn-search.js). Every selector is scoped to .adn-search so the homepage's own catalogue styles (same class names, slightly different sizes) are left alone; the colour/gearbox dropdown panels are appended to and stay unscoped. */ /* ---------- Favorites ---------- */ /* Same circle/heart proportions as the header's favorites button (38px / 18px), matching index.html. The ".car-media" prefix guards the size against any generic ".car-media svg" rule, and pointer-events:none makes the button itself the click target so a click can never land on the icon instead. */ .adn-search .car-fav-toggle{position:absolute;top:10px;left:10px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.45);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease;} .adn-search .car-fav-toggle:hover{background:rgba(0,0,0,.65);} .adn-search .car-fav-toggle svg,.adn-search .car-media .car-fav-toggle svg{position:static;top:auto;left:auto;transform:none;width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;pointer-events:none;} .adn-search .car-fav-toggle.active svg,.adn-search .car-media .car-fav-toggle.active svg{fill:var(--red);stroke:var(--red);} .adn-search .modal-fav-btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);} .adn-search .modal-fav-btn svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;} .adn-search .modal-fav-btn.active svg{fill:var(--red);stroke:var(--red);} .adn-search .favorites-panel-inner{padding:28px 28px 32px;} .adn-search .favorites-panel-inner h3{font-family:var(--font-display);font-size:20px;margin:0 0 18px;} .adn-search .favorites-list{display:flex;flex-direction:column;gap:12px;} .adn-search .favorites-item{display:flex;align-items:center;gap:14px;padding:10px;border:1px solid var(--line);border-radius:var(--radius-sm);} .adn-search .favorites-item.sold,.adn-search .favorites-item.error{opacity:.65;} .adn-search .fav-thumb{position:relative;width:72px;height:72px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-soft);} .adn-search .fav-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .adn-search .fav-sold-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,15,17,.55);color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;text-align:center;padding:4px;} .adn-search .fav-info{flex:1;min-width:0;} .adn-search .fav-title{font-weight:700;font-size:14px;color:var(--ink);} .adn-search .fav-specs{font-size:12.5px;color:var(--gray);margin-top:2px;} .adn-search .fav-sub{font-size:12.5px;color:var(--ink-50);margin-top:2px;} .adn-search .favorites-item .fav-view{flex-shrink:0;padding:8px 16px;font-size:12.5px;} .adn-search .fav-remove{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:none;background:var(--paper-soft);color:var(--ink-50);cursor:pointer;font-size:13px;} .adn-search .fav-remove:hover{background:var(--red-soft);color:var(--red);} @media (max-width:520px){ .adn-search .favorites-item{flex-wrap:wrap;} .adn-search .fav-info{min-width:150px;} } /* Keeps the page's one

for SEO/screen readers without the visible banner text that used to sit above the search — the filter bar is the first thing anyone actually sees now. / .adn-search .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .adn-search .search-top{padding-top:32px;} .adn-search .filter-bar{background:var(--paper-soft);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end;} .adn-search .filter-field label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-50);margin-bottom:6px;} .adn-search .filter-field label .grade-info-btn{width:14px;height:14px;margin-left:4px;vertical-align:-3px;} .adn-search .filter-field select,.adn-search .filter-field input{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:13.5px;} .adn-search .filter-field select:disabled{background:var(--paper-soft);color:var(--ink-50);} .adn-search .filter-actions{display:flex;gap:8px;grid-column:span 2;} .adn-search .promo-status{display:block;font-size:12.5px;font-weight:700;white-space:normal;word-break:break-word;margin-top:8px;} .adn-search .promo-status.valid{color:#1a9e5c;} .adn-search .promo-status.invalid{color:var(--red);} .adn-search .strike{text-decoration:line-through;color:var(--ink-50);font-weight:600;margin-right:6px;opacity:.7;} .adn-search .price-new{color:#1a9e5c;font-weight:700;} .adn-search .modal-coupon-box{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);} .adn-search .modal-coupon-box label{display:block;font-size:11px;font-weight:700;color:var(--ink-70);margin-bottom:6px;} .adn-search .modal-coupon-box input{width:100%;padding:9px 12px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:13px;text-transform:uppercase;} .adn-search .modal-coupon-box input:focus{outline:none;border-color:var(--red);} / iOS Safari auto-zooms the page on focus for any input under 16px — this field is 13px for the compact look, so on phone widths it gets bumped back up to 16px just to stop the zoom-in/zoom-out jump while typing a coupon code. Desktop and tablet keep the smaller size. / @media (max-width:600px){ .adn-search .modal-coupon-box input{font-size:16px;} } .adn-search .filter-actions .btn{flex:1;padding:10px 14px;font-size:13px;} / Multi-select checkbox dropdown (used for Auction grade). The panel lives directly under (see JS) rather than nested in .filter-bar, so it is never clipped by the filter bar's own overflow:auto when it's the auto-hide sheet. / .adn-search .ms-dropdown{position:relative;} .adn-search .ms-dropdown-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:13.5px;text-align:left;cursor:pointer;color:var(--ink);font-family:inherit;} .adn-search .ms-dropdown-trigger:disabled{background:var(--paper-soft);color:var(--ink-50);cursor:not-allowed;} .adn-search .ms-dropdown-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .adn-search .ms-dropdown-trigger svg{width:14px;height:14px;flex-shrink:0;transition:transform .15s ease;color:var(--ink-50);} .adn-search .ms-dropdown-trigger.open svg{transform:rotate(180deg);} .adn-search .ms-dropdown-panel{display:none;position:fixed;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-sm);box-shadow:0 16px 36px rgba(15,15,17,.18);z-index:500;padding:6px;} / Tall enough that all sixteen colours fit without scrolling — the list still scrolls, but only on a screen too short to show them. / .adn-search .ms-dropdown-panel.open{display:flex;flex-direction:column;max-height:min(420px,70vh);} .ms-list{overflow-y:auto;min-height:0;} / Without a way to say "done", the only way out of the panel is a tap on empty space — which is not obvious, and on a phone there often is no empty space in reach. The button is how ASNET's own colour picker ends, and it is what makes the panel feel finished rather than stuck. / .adn-search .ms-confirm{flex:0 0 auto;margin-top:6px;padding-top:6px;border-top:1px solid var(--line);} .adn-search .ms-confirm button{width:100%;padding:9px 12px;border:0;border-radius:var(--radius-sm);background:var(--ink);color:#fff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;} .adn-search .ms-confirm button:hover{background:var(--red);} .ms-option{display:flex;align-items:center;gap:9px;padding:8px 8px;font-size:13px;border-radius:6px;cursor:pointer;color:var(--ink);} .ms-option:hover{background:var(--paper-soft);} .ms-option input{width:15px;height:15px;flex-shrink:0;accent-color:var(--red);cursor:pointer;margin:0;} .ms-option .ms-count{color:var(--ink-50);margin-left:auto;font-size:12px;} / The colour picker shows the paint next to its name — at a glance that is the whole point of a colour filter. Pale swatches get a ring so white and pearl stay visible against the panel; "other" is a colour wheel, because it is every paint we could not put a name to. / .ms-swatch{width:14px;height:14px;border-radius:50%;flex-shrink:0;display:inline-block;} .ms-swatch.ring{box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);} .ms-swatch.conic{background:conic-gradient(#e01b24,#f2d024,#159b4b,#1436c8,#8b1fa9,#e01b24);} .adn-search .ms-dropdown-panel.ms-grid{width:auto;min-width:330px;max-width:min(420px,calc(100vw - 24px));} .adn-search .ms-dropdown-panel.ms-grid .ms-list{display:grid;grid-template-columns:1fr 1fr;gap:0 4px;} .adn-search .ms-dropdown-panel.ms-grid .ms-empty{grid-column:1/-1;} @media (max-width:480px){ .adn-search .ms-dropdown-panel.ms-grid{min-width:0;width:calc(100vw - 24px);} .adn-search .ms-dropdown-panel.ms-grid .ms-list{grid-template-columns:1fr;} } .ms-empty{padding:10px 8px;font-size:12.5px;color:var(--ink-50);} / Filter bar auto-hides on scroll and re-appears as a panel dropping down from the top of the screen, opened via the floating "Filters" pill button (which itself stays put near the bottom) — same mechanic on desktop and mobile, only the field grid density differs (see the 520px breakpoint below). / .adn-search .filter-bar.collapsed{position:fixed; left:12px;right:12px;top:0;bottom:auto; max-width:1180px;margin:0 auto; max-height:78vh; overflow-y:auto; border-radius:0 0 16px 16px; transform:translateY(-115%); transition:transform .28s ease; z-index:200; box-shadow:0 10px 30px rgba(15,15,17,.25);} .adn-search .filter-bar.collapsed.open{transform:translateY(0);} / Holds open the space the filter bar used to occupy in normal flow once it switches to position:fixed — otherwise the results grid jumps up to fill that gap the instant the bar collapses. Height is set in JS to exactly match the bar's footprint (including its own margin). / .adn-search #filterBarSpacer{height:0;} .adn-search .filter-fab{display:none; position:fixed; bottom:24px;left:50%; transform:translateX(-50%); z-index:150; background:var(--red);color:#fff;border:none;border-radius:999px; padding:13px 24px;font-size:14.5px;font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,.28); align-items:center;gap:8px; font-family:inherit; cursor:pointer;} .adn-search .filter-fab svg{width:16px;height:16px;flex-shrink:0;} .adn-search .filter-fab.show{display:flex;} .adn-search .filter-backdrop{display:none;position:fixed;inset:0;background:rgba(15,15,17,.42);z-index:190;} .adn-search .filter-backdrop.open{display:block;} / Pinned so sort/notify/view stay reachable while scrolling a long results list — and, in List view, so the column labels below it (.list-header) stay pinned too. top is a CSS var rather than a fixed px: it has to equal the sticky header's real height on desktop but 0 once the header itself un-sticks on mobile (600px breakpoint below), so JS measures it instead of guessing two numbers that have to be kept in sync by hand. / .adn-search .results-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px;font-size:13px;color:var(--gray);position:sticky;top:var(--sticky-top-1, 0px);z-index:80;background:var(--paper);padding:10px 0;border-bottom:1px solid var(--line);} .adn-search .sort-field{display:flex;align-items:center;gap:8px;} .adn-search .sort-field label{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-50);white-space:nowrap;} .adn-search .sort-field select{padding:7px 10px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:12.5px;color:var(--ink);} .adn-search .catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;min-height:120px;} .adn-search .car-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease, transform .2s ease;cursor:pointer;} .adn-search .car-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);} .adn-search .car-media{background:var(--ink);aspect-ratio:1/1;position:relative;overflow:hidden;} .adn-search .car-media img{width:100%;height:100%;object-fit:cover;display:block;} .adn-search .car-carousel-track{display:flex;width:100%;height:100%;transition:transform .3s ease;} .adn-search .car-carousel-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block;} .adn-search .car-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.45);border:none;color:#fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease,background .2s ease;z-index:2;} @media (hover:hover){ .adn-search .car-media:hover .car-carousel-arrow{opacity:1;} } / No hover on touch screens: iOS would spend the first tap on the hover state (arrows fading in) and swallow the click, so the share/favorite buttons on a card needed two taps. Arrows are simply always visible. / @media (hover:none){ .adn-search .car-carousel-arrow{opacity:.85;} } .adn-search .car-carousel-arrow:hover{background:rgba(0,0,0,.7);} .adn-search .car-carousel-prev{left:6px;} .adn-search .car-carousel-next{right:6px;} .adn-search .car-carousel-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2;} .adn-search .car-carousel-dots .dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:background .2s ease,transform .2s ease;} .adn-search .car-carousel-dots .dot.active{background:#fff;transform:scale(1.3);} .adn-search .car-status{position:absolute;top:10px;right:58px;z-index:2;font-family:var(--font-mono);font-size:10px;font-weight:700;padding:4px 10px;border-radius:100px;letter-spacing:.03em;text-transform:uppercase;background:#fff;color:var(--ink);} .adn-search .car-body{padding:16px 16px 18px;flex:1;display:flex;flex-direction:column;} .adn-search .car-body h4{font-size:15.5px;margin-bottom:2px;} .adn-search .car-body .grade{font-size:12px;color:var(--gray);margin-bottom:12px;min-height:15px;} / The auction-grade explainer trigger. Drawn as one icon (circle + question mark in a single path) rather than a text "?" inside a CSS circle, so the mark is geometrically centred in every font and at every size. / .grade-info-btn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:5px;border:0;border-radius:50%;background:none;color:var(--red);line-height:0;cursor:pointer;opacity:1;vertical-align:middle;padding:0;flex-shrink:0;} .grade-info-btn svg{display:block;width:100%;height:100%;} .grade-info-btn:hover,.grade-info-btn:focus-visible{color:var(--red-dark);outline:none;} / The spec cell that carries the "?" button: label on its own line, then the grade value and the button centred on one axis so the circle sits level with the digits instead of hanging off the baseline. / .adn-search .car-specs .spec-grade,.adn-search .modal-specs .spec-grade{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;} .adn-search .car-specs .spec-grade>span,.adn-search .modal-specs .spec-grade>span{flex:0 0 100%;} .adn-search .car-specs .spec-grade .grade-info-btn,.adn-search .modal-specs .spec-grade .grade-info-btn{margin-left:6px;flex-shrink:0;} / List view: the grade pill holds the value and the "?" side by side. / .adn-search .lot-score{display:flex;align-items:center;justify-content:center;gap:4px;} .adn-search .lot-score .grade-info-btn{margin-left:0;width:14px;height:14px;} .grade-info-popover{position:absolute;z-index:9999;max-width:300px;width:max-content;background:#fff;color:var(--ink,#1a1a1a);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.22);padding:14px 16px;font-size:13px;line-height:1.5;display:none;} .grade-info-popover.open{display:block;} .grade-info-close{position:absolute;top:6px;right:8px;cursor:pointer;font-size:12px;opacity:.5;} .grade-info-close:hover{opacity:1;} .grade-info-title{font-weight:700;margin:0 20px 6px 0;} .grade-info-text b{font-weight:700;} .grade-info-text a{color:var(--red);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(228,23,78,.35);} .grade-info-text a:hover{border-bottom-color:var(--red);} .adn-search .car-share-btn{position:absolute;top:10px;right:10px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.45);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease;padding:0;} .adn-search .car-share-btn:hover{background:rgba(0,0,0,.65);} .adn-search .car-share-btn svg{width:17px;height:17px;fill:#fff;pointer-events:none;} .adn-search .btn-share{background:#fff;color:var(--ink);border:1.5px solid var(--line);} .adn-search .btn-share:hover{background:var(--paper-soft);} .adn-search .btn-share svg{width:16px;height:16px;flex-shrink:0;fill:var(--ink);} .adn-search .btn-pdf{background:#fff;color:var(--ink);border:1.5px solid var(--line);text-decoration:none;} .adn-search .btn-pdf:hover{border-color:var(--ink);} .adn-search .btn-pdf svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .adn-search .lot-share-btn{background:none;border:1px solid var(--line);border-radius:6px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-left:6px;padding:0;vertical-align:middle;flex:0 0 auto;} .adn-search .lot-share-btn svg{width:14px;height:14px;fill:var(--ink-70);} .share-menu-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;} .share-menu-item{display:block;width:100%;box-sizing:border-box;text-align:left;padding:8px 10px;border-radius:8px;border:1px solid var(--line,#e5e5e5);background:#fff;color:inherit;text-decoration:none;font-size:13px;font-family:inherit;cursor:pointer;} .share-menu-item:hover{background:var(--paper-soft,#f7f7f7);} .adn-search .share-copied-note{font-weight:700;font-size:13px;white-space:nowrap;} .adn-search .share-copied-note::before{content:'\2713';margin-right:6px;color:var(--red);} .adn-search .car-specs{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:11.5px;color:var(--ink-70);margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed var(--line);} .adn-search .car-specs span{color:var(--ink-50);display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.03em;} .adn-search .car-price{font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--red);margin-bottom:2px;} .adn-search .car-price small{font-family:var(--font-body);font-weight:500;font-size:11px;color:var(--gray);margin-left:4px;} .adn-search .car-price-jpy{font-size:11px;color:var(--ink-50);margin-bottom:12px;} .adn-search .car-cta{margin-top:auto;padding-top:8px;} .adn-search .car-cta .btn{width:100%;padding:10px;font-size:12.5px;} / ---------- LIVE STOCK: Cards/List view toggle ---------- / .adn-search .results-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .adn-search .view-toggle{display:inline-flex;background:var(--paper-soft);border:1px solid var(--line);border-radius:100px;padding:3px;gap:2px;} .adn-search .view-toggle button{display:flex;align-items:center;gap:6px;border:none;background:transparent;padding:7px 13px;border-radius:100px;font-size:12px;font-weight:600;color:var(--ink-70);cursor:pointer;font-family:inherit;transition:background .15s ease,color .15s ease;} .adn-search .view-toggle button svg{width:13px;height:13px;flex-shrink:0;} .adn-search .view-toggle button.active{background:var(--red);color:#fff;} .adn-search .view-toggle button:not(.active):hover{color:var(--ink);} / No overflow:hidden here (used to be how the rounded corners got clipped): an overflow:hidden ancestor becomes .list-header's sticky containing block, and since this box never scrolls internally, that traps the sticky column headers in place instead of letting them stick to the viewport as the window scrolls. The rounded corners are recreated below by rounding the top/bottom edge pieces themselves instead. / .adn-search .catalog-grid.view-list{display:block;border:1px solid var(--line);border-radius:var(--radius);background:#fff;} / Sticks right below the pinned .results-meta row (top adds that row's own measured height to the same header offset — see the JS that sets both vars) so the Vehicle/Year/Engine/Mileage/Auction grade/Price column labels stay visible for however long the results list scrolls by. / .adn-search .list-header{display:grid;grid-template-columns:64px minmax(160px,1.6fr) 56px 84px 92px 66px 128px max-content;column-gap:12px;align-items:center;padding:12px 16px;background:var(--paper-soft);font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-50);border-bottom:1px solid var(--line);position:sticky;top:var(--sticky-top-2, 0px);z-index:75;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);} .adn-search .list-header div:nth-child(n+3){text-align:right;} / The last header cell is an invisible copy of a row's action buttons, so its max-content column is exactly as wide as the rows' and the labels line up. / .adn-search .list-header-actions{visibility:hidden;height:0;overflow:hidden;font-family:var(--font-body);text-transform:none;letter-spacing:0;} .adn-search .lot-row{display:grid;grid-template-columns:64px minmax(160px,1.6fr) 56px 84px 92px 66px 128px max-content;column-gap:12px;align-items:center;padding:10px 16px;border:none;border-bottom:1px solid var(--line);border-radius:0;background:#fff;overflow:visible;} .adn-search .lot-row:last-child{border-bottom:none;border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);} .adn-search .lot-row:hover{background:var(--paper-soft);box-shadow:none;transform:none;} .adn-search .lot-thumb{width:64px;height:44px;border-radius:8px;overflow:hidden;background:var(--ink);flex-shrink:0;} .adn-search .lot-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .adn-search .lot-title{min-width:0;} .adn-search .lot-title .name{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .adn-search .lot-title .grade{font-size:11.5px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .adn-search .lot-year,.adn-search .lot-engine,.adn-search .lot-mileage{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink-70);text-align:right;} .adn-search .lot-score{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--red);background:var(--red-soft);border-radius:100px;padding:4px 0;text-align:center;} .adn-search .lot-price{text-align:right;} .adn-search .lot-price .amount{display:block;font-family:var(--font-display);font-weight:800;font-size:14.5px;color:var(--red);} .adn-search .lot-price .jpy{display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-70);margin-bottom:2px;} .adn-search .lot-price .place{display:block;font-size:9.5px;color:var(--ink-50);font-weight:400;} .adn-search .lot-details-btn{padding:8px 14px;font-size:11.5px;white-space:nowrap;} .adn-search .lot-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end;} .adn-search .lot-specs-mobile{display:none;} @media (max-width:700px){ .adn-search .list-header{display:none;} .adn-search .lot-row{grid-template-columns:64px 1fr;column-gap:12px;row-gap:4px;padding:12px 14px;} .adn-search .lot-year,.adn-search .lot-engine,.adn-search .lot-mileage,.adn-search .lot-score{display:none;} .adn-search .lot-thumb{grid-row:1/4;width:64px;height:56px;} .adn-search .lot-specs-mobile{display:block;font-size:11px;color:var(--ink-70);} .adn-search .lot-price{text-align:left;} .adn-search .lot-price .amount{display:inline;} .adn-search .lot-price .place{display:inline;margin-left:6px;} .adn-search .lot-price .jpy{display:block;} .adn-search .lot-details-btn{width:max-content;padding:7px 12px;} .adn-search .lot-actions{justify-content:flex-start;} } .adn-search .empty-state,.adn-search .error-state,.adn-search .loading-state{text-align:center;padding:60px 20px;color:var(--gray);font-size:14px;} .adn-search .error-state{color:var(--red);} .adn-search .spinner{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--red);border-radius:50%;margin:0 auto 14px;animation:spin .8s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} .adn-search .pagination{display:flex;justify-content:center;gap:6px;margin:36px 0 0;flex-wrap:wrap;} .adn-search .pagination button{padding:8px 13px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:13px;font-weight:600;cursor:pointer;} .adn-search .pagination button.active{background:var(--red);border-color:var(--red);color:#fff;} .adn-search .pagination button:disabled{opacity:.4;cursor:not-allowed;} / ---------- "Didn't find the right car?" bottom CTA ---------- / .adn-search .order-cta{background:var(--paper-soft);border:1px solid var(--line);border-radius:var(--radius);padding:44px 32px;text-align:center;margin-top:40px;} .adn-search .order-cta h3{font-size:22px;margin-bottom:10px;} .adn-search .order-cta p{color:var(--ink-70);max-width:560px;margin:0 auto 24px;font-size:15px;} / ---------- Detail modal ---------- / .adn-search .modal-overlay{position:fixed;inset:0;background:rgba(15,15,17,.7);z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:32px 16px;overflow-y:auto;} .adn-search .modal-overlay.open{display:flex;} .adn-search .modal-panel{background:#fff;border-radius:var(--radius);max-width:920px;width:100%;margin-top:20px;overflow:hidden;} .adn-search .modal-close{position:absolute;top:20px;right:max(20px, calc(50vw - 460px + 20px));width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.5);border:none;color:#fff;font-size:18px;cursor:pointer;z-index:1001;} .adn-search .modal-gallery{display:flex;gap:2px;overflow-x:auto;background:var(--ink);} .adn-search .modal-gallery img{height:260px;width:auto;flex-shrink:0;object-fit:cover;cursor:zoom-in;} .adn-search .modal-body{padding:26px 28px 30px;} .adn-search .modal-body h3{font-size:22px;margin-bottom:4px;} .adn-search .modal-body .grade{color:var(--gray);font-size:13.5px;margin-bottom:2px;} .adn-search .modal-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;} .adn-search .modal-title-main{min-width:0;} .adn-search .modal-title-side{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;} .adn-search .modal-fav-hint{font-size:9.5px;color:var(--ink-50);text-transform:uppercase;letter-spacing:.03em;text-align:center;max-width:68px;line-height:1.25;} .adn-search .modal-price-top{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--red);white-space:nowrap;text-align:left;margin:16px 0;} .adn-search .modal-price-top small{display:block;font-family:var(--font-body);font-weight:500;font-size:10px;color:var(--gray);white-space:nowrap;} .adn-search .modal-refine-row{margin-bottom:16px;} .adn-search .modal-chat-prompt{font-size:13px;color:var(--ink-70);text-align:center;margin-bottom:12px;line-height:1.5;} .adn-search .modal-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 16px;font-size:12.5px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px dashed var(--line);} .adn-search .modal-specs span{color:var(--ink-50);display:block;font-size:10px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px;} .adn-search .modal-info{font-size:12.5px;color:var(--ink-70);background:var(--paper-soft);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:22px;line-height:1.6;} .adn-search .modal-info .lbl{font-weight:700;color:var(--ink);display:block;margin-bottom:4px;font-size:11px;text-transform:uppercase;letter-spacing:.03em;} .adn-search .modal-actions{display:flex;gap:10px;flex-wrap:wrap;} .adn-search .modal-actions .btn{flex:1;min-width:180px;} .adn-search .btn-whatsapp{background:#25D366;color:#fff;} .adn-search .btn-whatsapp:hover{background:#1EBE5A;} .adn-search .btn-whatsapp svg{width:16px;height:16px;flex-shrink:0;} .adn-search .btn-telegram{background:#229ED9;color:#fff;} .adn-search .btn-telegram:hover{background:#1B87BD;} .adn-search .btn-telegram svg{width:16px;height:16px;flex-shrink:0;} .adn-search .modal-calc{background:var(--paper-soft);border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:16px;} .adn-search .modal-calc-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font-size:12.5px;color:var(--ink-70);border-bottom:1px dashed var(--line);gap:10px;} / Marks the freight row when the lot is electric, so the higher container figure reads as deliberate rather than as a glitch. / .adn-search .calc-ev-tag{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:4px;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.4px;vertical-align:middle;cursor:help;} .adn-search .calc-m3{color:var(--gray,#7a7a80);font-size:11px;font-weight:400;white-space:nowrap;} / The left label wraps freely (it's the long text - "Registration expenses (MOT, SVA, ...)" etc.) but must not shrink the right-hand amount's own space: without min-width:0 on the label and flex-shrink:0 + white-space: nowrap on the amount, a long label on a narrow (mobile) screen squeezed the amount's own span so far that "€ 1,810" itself wrapped onto two lines, splitting the currency sign from the number. / .adn-search .modal-calc-row>span:first-child{flex:1 1 auto;min-width:0;} .adn-search .modal-calc-row>span:last-child{flex:0 0 auto;white-space:nowrap;} .adn-search .modal-calc-row:last-of-type{border-bottom:none;} .adn-search .modal-calc-row .yen{color:var(--gray);font-weight:400;font-size:11.5px;} / Desktop: the yen and the euro each sit in their own right-aligned column, so the figures line up down the four Japan-side rows. / .adn-search .modal-calc-row>span:last-child:has(.yen){display:inline-flex;justify-content:flex-end;align-items:baseline;gap:14px;} .adn-search .modal-calc-row .yen{min-width:11ch;text-align:right;} .adn-search .modal-calc-row .eur{min-width:8ch;text-align:right;} .adn-search .modal-calc-row .yen-sep{display:none;} / Phone: the yen in small print on top, the euro under it, both flush right. / @media (max-width:600px){.adn-search .modal-calc-row>span:last-child:has(.yen){display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:0;line-height:1.25;}.adn-search .modal-calc-row .yen-sep{display:none;}.adn-search .modal-calc-row .yen,.adn-search .modal-calc-row .eur{min-width:0;}} .adn-search .modal-calc-row.total{padding-top:12px;margin-top:4px;border-top:1.5px solid var(--ink);border-bottom:none;font-size:15px;font-weight:800;color:var(--ink);} .adn-search .modal-calc-row.total span:last-child{color:var(--red);font-family:var(--font-display);} / CIF terms: the invoice is in yen, so the total carries its yen in small print. / .adn-search .modal-calc-row.total .total-yen{display:block;font-family:var(--font-body);font-size:11.5px;font-weight:400;color:var(--gray);text-align:right;line-height:1.3;} .adn-search .modal-calc-row .yen .strike{color:var(--gray);opacity:.7;margin-right:4px;} / The zero on the duty line is the single largest saving in the whole breakdown, and "€ 0" is exactly the kind of line an eye slides past. A wash and a red bar stop it there, and the (?) next to the label says where the zero comes from. The row is marked ONLY when the duty really is zero: a car that does pay the 10% gets an ordinary row, with the same (?) explaining why it does not qualify. The wash bleeds out to the edges of its container (26px of padding in the calculator, 18px in the car modal) so it reads as a highlighted line rather than a stray box. / .adn-search .calc-row.duty-zero,.adn-search .modal-calc-row.duty-zero{position:relative;} .adn-search .calc-row.duty-zero>span,.adn-search .modal-calc-row.duty-zero>span{position:relative;z-index:1;} .adn-search .calc-row.duty-zero::before,.adn-search .modal-calc-row.duty-zero::before{content:'';position:absolute;top:0;bottom:0;background:rgba(228,23,78,.07);border-left:3px solid var(--red);pointer-events:none;} .adn-search .calc-row.duty-zero::before{left:-26px;right:-26px;} .adn-search .modal-calc-row.duty-zero::before{left:-18px;right:-18px;} / Centre the (?) on the CAP-HEIGHT band of the label — what the eye reads as the middle of the line — rather than on the line box, which includes the descender space below the baseline and leaves the icon sitting visibly high. The icon is a fixed 16px circle, so the offset cannot simply scale with the text: putting its centre at (baseline - capHeight/2) means the box bottom lands at capHeight/2 - 8px below the baseline. Montserrat's cap height is ~0.715em, hence 0.357em. Works out to -3px in the calculator (14px text) and -3.5px in the car modal (12.5px). / .adn-search .calc-row .grade-info-btn,.adn-search .modal-calc-row .grade-info-btn{margin-left:5px;vertical-align:calc(0.357em - 8px);} .adn-search .modal-calc-note{font-size:11px;color:var(--ink-50);margin-top:10px;line-height:1.5;} / CIF coupon: the quote ends at the port, and the note under the total says so. / .adn-search .modal-calc-cif{font-size:12px;color:var(--ink-70);margin-top:8px;padding:10px 12px;background:var(--paper-soft);border-radius:8px;} .adn-search .modal-refine-link{font-size:12px;color:var(--red);text-decoration:underline;text-decoration-color:rgba(228,23,78,.35);text-underline-offset:2px;} .adn-search .modal-refine-link:hover{color:var(--red-dark);} .adn-search .lightbox{position:fixed;inset:0;background:rgba(15,15,17,.95);z-index:1100; display:none;align-items:center;justify-content:center;padding:32px;} .adn-search .lightbox.open{display:flex;} .adn-search .lightbox img{max-width:min(92vw,1000px);max-height:88vh;border-radius:8px;box-shadow:0 30px 70px rgba(0,0,0,.5);} .adn-search .lightbox-close{position:absolute;top:22px;right:28px;width:42px;height:42px;border-radius:50%; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff; font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;} .adn-search .lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff; font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1101;} .adn-search .lightbox-arrow:hover{background:rgba(255,255,255,.2);} .adn-search .lightbox-prev{left:20px;} .adn-search .lightbox-next{right:20px;} / ---------- "Price on request" ---------- Deliberately quieter than a real price: it is the absence of a number, and styling it like one invites the same misreading we are fixing. / .adn-search .price-ask{color:var(--ink-70);font-weight:700;} .adn-search .car-price.price-ask{font-size:19px;} .adn-search .lot-price .amount.price-ask{font-size:14px;color:var(--ink-70);} .adn-search .modal-price-top.price-ask{font-size:20px;color:var(--ink-70);} .adn-search .modal-calc-ask{text-align:center;padding:22px 18px;} .adn-search .modal-calc-ask .ask-title{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--ink);margin-bottom:6px;} .adn-search .modal-calc-ask .ask-text{font-size:13px;line-height:1.6;color:var(--gray);max-width:420px;margin:0 auto;} @media (max-width:900px){ .adn-search .filter-bar{grid-template-columns:1fr 1fr;} .adn-search .filter-actions{grid-column:span 2;} .adn-search .modal-specs{grid-template-columns:1fr 1fr;} } @media (max-width:520px){ .adn-search .filter-bar{grid-template-columns:1fr 1fr;gap:8px;padding:14px;} .adn-search .filter-field label{font-size:9.5px;margin-bottom:3px;} .adn-search .filter-field select,.adn-search .filter-field input{padding:7px 8px;font-size:12.5px;} .adn-search .filter-actions{grid-column:span 2;flex-direction:row;gap:6px;} .adn-search .filter-actions .btn{padding:8px 10px;font-size:13px;} .adn-search .filter-bar.collapsed{left:8px;right:8px;} } @media (max-width:600px){ .adn-search .results-meta{position:static;background:none;padding:0;border-bottom:none;} } / ---------- Lot Alerts (watch) ---------- / .adn-search .watch-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:13px 22px;border-radius:100px;border:1.5px solid var(--red);background:#fff; font-family:var(--font-body);font-size:14.5px;font-weight:700;line-height:1.2; color:var(--ink);cursor:pointer;white-space:nowrap;} .adn-search .watch-btn:hover{border-color:var(--red-dark);} .adn-search .watch-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;} / Sitting on the results-meta row next to the Cards/List toggle, the default watch-btn (sized for standing alone under the filter bar) reads too tall next to it. This matches the toggle's own button metrics (padding 7px 13px, 12px/600 label) so both controls line up. / .adn-search .watch-btn--inline{padding:10px 16px;border-width:1px;font-size:12px;font-weight:600;gap:6px;} .adn-search .watch-btn--inline svg{width:13px;height:13px;} .adn-search .empty-state-watch{margin-top:16px;} .adn-search .watch-btn--empty{padding:11px 20px;font-size:13.5px;} .adn-search .watch-modal{position:fixed;inset:0;background:rgba(15,15,17,.7);z-index:1200;display:none; align-items:flex-start;justify-content:center;padding:32px 16px;overflow-y:auto;} .adn-search .watch-modal.open{display:flex;} .adn-search .watch-panel{background:#fff;border-radius:18px;max-width:460px;width:100%;margin:auto; padding:26px 24px 22px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.35);} .adn-search .watch-panel h3{font-size:20px;margin-bottom:6px;} .adn-search .watch-lead{font-size:13.5px;color:var(--gray);line-height:1.55;margin-bottom:18px;} .adn-search .watch-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%; border:none;background:var(--paper-soft);color:var(--ink-50);font-size:15px;cursor:pointer;} .adn-search .watch-close:hover{color:var(--ink);} .adn-search .watch-summary{background:var(--paper-soft);border-radius:12px;padding:12px 14px;margin-bottom:16px; font-size:13px;line-height:1.6;color:var(--ink-70);} .adn-search .watch-summary b{color:var(--ink);} .adn-search .watch-field{margin-bottom:14px;} .adn-search .watch-field label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--ink-50);margin-bottom:5px;} .adn-search .watch-field input,.adn-search .watch-field select{width:100%;padding:11px 13px;border:1.5px solid var(--line); border-radius:var(--radius-sm,10px);background:#fff;font-size:14px;font-family:inherit;color:var(--ink);} .adn-search .watch-field input:focus,.adn-search .watch-field select:focus{outline:none;border-color:var(--ink);} .adn-search .watch-grades{display:flex;flex-wrap:wrap;gap:7px;} .adn-search .watch-grades label{display:inline-flex;align-items:center;gap:5px;margin:0;padding:7px 12px; border:1.5px solid var(--line);border-radius:100px;cursor:pointer;font-size:13px;font-weight:600; color:var(--ink);text-transform:none;letter-spacing:0;} .adn-search .watch-grades label:hover{border-color:var(--ink-50);} .adn-search .watch-grades input{width:auto;margin:0;accent-color:var(--red);} .adn-search .watch-grades label.on{border-color:var(--red);background:var(--red-soft);color:var(--red);} .adn-search .watch-hint{font-size:12px;color:var(--gray);line-height:1.5;margin-top:5px;} .adn-search .watch-field.required label::after{content:' ';color:var(--red);} .adn-search .watch-field input.err{border-color:var(--red);} .adn-search .watch-push-row{display:flex;align-items:flex-start;gap:9px;margin:4px 0 14px;font-size:13.5px;color:var(--ink);cursor:pointer;} .adn-search .watch-push-row input{margin-top:2px;accent-color:var(--red);} /* When push is impossible (iPhone in a Safari tab, or a browser without the Push API) the checkbox is not disabled — it is not rendered at all. A disabled checkbox still looks tappable, and a tap that does nothing reads as a broken site rather than as an explanation. / .adn-search .watch-push-note{display:flex;align-items:flex-start;gap:9px;margin:4px 0 14px;padding:11px 13px; background:var(--red-soft);border-radius:12px;font-size:13px;line-height:1.5;color:var(--ink);} .adn-search .watch-push-note svg{flex:none;margin-top:1px;} / `hidden` is only a UA rule (`[hidden]{display:none}`), and any author `display` declaration outranks it. Both rows above set display:flex, so without this line hiding them from JS does nothing at all — which is how the dead checkbox stayed on screen on the iPhone. / .adn-search .watch-push-row[hidden],.adn-search .watch-push-note[hidden]{display:none;} .adn-search .watch-mine{margin:0 0 16px;padding:11px 14px 12px;border:1.5px solid var(--line);border-radius:14px;} .adn-search .watch-mine[hidden]{display:none;} .adn-search .watch-mine h4{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:var(--gray);} .adn-search .watch-mine-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--line);} .adn-search .watch-mine-row:nth-of-type(1){border-top:0;padding-top:2px;} .adn-search .watch-mine-row .what{flex:1;min-width:0;font-size:13px;line-height:1.45;color:var(--ink);} .adn-search .watch-mine-row .how{display:block;color:var(--gray);font-size:12px;margin-top:1px; overflow-wrap:anywhere;} / Each value is one unit: "≤ € 50,000" broke across two lines, leaving the currency sign stranded at the end of one line and the amount at the start of the next. The line may still wrap BETWEEN values — just never inside one. / .adn-search .watch-mine-row .what .bit,.adn-search .watch-summary .bit{white-space:nowrap;} .adn-search .watch-mine-row button{flex:none;width:26px;height:26px;padding:0;border-radius:50%; border:1.5px solid var(--line);background:#fff;color:var(--gray);font-size:12px;line-height:1;cursor:pointer;} .adn-search .watch-mine-row button:hover{border-color:var(--red);color:var(--red);} .adn-search .watch-mine-row button:disabled{opacity:.4;cursor:default;} / The confirmation after saving. It lives outside the modal on purpose: the modal closes on success, and on a phone the inline line under the button is easy to miss — it sits below the fold of a tall panel, and the list of existing alerts appearing above it pushes it further down still. / .watch-toast{position:fixed;left:16px;right:16px;bottom:16px;z-index:1300; display:none;align-items:flex-start;gap:10px;max-width:420px;margin:0 auto; padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.2);font-family:var(--font-body);font-size:13.5px; line-height:1.5;color:var(--ink);cursor:pointer; padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));} .watch-toast.show{display:flex;} .watch-toast svg{flex:none;margin-top:1px;} .watch-toast.ok svg{color:#12805c;} .watch-toast.err svg{color:var(--red);} / The cookie choice sits in the same bottom corner and outranks everything (z-index 9000); while it is open the toast goes above it — the banner is page chrome outside the module root, so :has() instead of a sibling combinator. / body:has(.adn-consent.show) .watch-toast.show{bottom:calc(16px + 250px);} @media (min-width:700px){ body:has(.adn-consent.show) .watch-toast.show{bottom:16px;left:auto;right:24px;margin:0;} } .adn-search .watch-status{font-size:13px;line-height:1.5;margin-top:10px;min-height:18px;} .adn-search .watch-status.err{color:var(--red);} .adn-search .watch-status.ok{color:#12805c;} .adn-search .watch-actions{display:flex;gap:10px;margin-top:16px;} .adn-search .watch-actions .btn{flex:1;} / The colour picker is the same component the filter bar uses, and its panel lives on at z-index 500 — under this modal's 1200. Inside the form it needs to be above it. / .adn-search .ms-dropdown-panel.ms-over-modal{z-index:1300;} .adn-search .watch-field .ms-dropdown-trigger{padding:11px 13px;font-size:14px;} / Two short fields per row: a mileage cap and an engine floor are each a few digits, and stacking them makes the form look longer than the work it is. / .adn-search .watch-two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;} @media (max-width:430px){ .adn-search .watch-two{grid-template-columns:1fr;} } @media (max-width:520px){ .adn-search .watch-panel{padding:22px 18px 18px;} } / ---------- compact mode (the homepage) ---------- Cards only, no sticky chrome, "show more" + the way into the full catalogue. / .adn-search.adn-compact .filter-fab,.adn-search.adn-compact .filter-backdrop,.adn-search.adn-compact #filterBarSpacer{display:none !important;} .adn-search.adn-compact .results-meta{position:static;background:none;border-bottom:none;padding:0;} .adn-search.adn-compact .list-header{position:static;} .adn-search.adn-compact .search-top{padding:0;} .adn-search.adn-compact .search-top > .container{padding:0;max-width:none;} .adn-search.adn-compact .pagination{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px;} .adn-search.adn-compact .pagination .btn{padding:12px 22px;font-size:14px;} / The way into the full catalogue: one big, unmissable button under the list. */ .adn-search.adn-compact .pagination .btn-full-search{padding:16px 40px;font-size:16px;font-weight:700;border-radius:100px;min-width:280px;} @media (max-width:600px){ .adn-search.adn-compact .pagination .btn-full-search{width:100%;min-width:0;} }