:root { --amx-side-w: 360px; --amx-side-gap: 45px; } /* 1.0.175: één sidebar-standaard voor home, nieuws, product, shops en Mijn collectie */
/* AMAXONE Catalog Sync – front-end blocks (theme-neutral). */
.amx-block { margin: 2.5em 0; clear: both; }
.amx-block h2 { margin-bottom: .6em; }
.amx-table { width: 100%; border-collapse: collapse; font-size: .95em; }
.amx-table th, .amx-table td { padding: .55em .7em; border-bottom: 1px solid rgba(0,0,0,.08); text-align: left; vertical-align: top; }
.amx-table thead th { font-weight: 600; border-bottom-width: 2px; }
.amx-specs .amx-table th { width: 34%; font-weight: 600; }
.amx-usd, .amx-src, .amx-note { opacity: .65; font-size: .9em; }
.amx-ask { display: inline-block; font-size: .75em; padding: 0 .4em; border-radius: 3px; background: rgba(0,0,0,.07); }
.amx-foot { font-size: .8em; opacity: .7; margin-top: .6em; }
.amx-shop-link { white-space: nowrap; }
.amx-score { display: flex; align-items: baseline; gap: .3em; flex-wrap: wrap; }
.amx-score-num { font-size: 2.2em; font-weight: 700; line-height: 1; }
.amx-score-bar { flex-basis: 100%; height: 8px; background: rgba(0,0,0,.08); border-radius: 4px; overflow: hidden; margin-top: .4em; max-width: 420px; }
.amx-score-bar span { display: block; height: 100%; background: #da0812; }
.amx-checklist { list-style: none; margin: .8em 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .3em 1em; }
.amx-checklist li::before { display: inline-block; width: 1.3em; font-weight: 700; }
.amx-checklist .amx-yes::before { content: "✓"; color: #1a8a3a; }
.amx-checklist .amx-no::before { content: "✗"; color: #b3261e; }
.amx-checklist .amx-todo::before { content: "…"; opacity: .5; }
.amx-price-label { font-size: .8em; opacity: .7; font-weight: 400; }
.amx-search { display: flex; flex-wrap: wrap; gap: .8em; align-items: flex-end; margin: 1em 0 2em; }
.amx-field { display: flex; flex-direction: column; font-size: .9em; min-width: 150px; }
.amx-field span { margin-bottom: .25em; font-weight: 600; }
.amx-field-wide { flex: 1 1 260px; }
@media (max-width: 600px) {
.amx-offers .amx-table th:nth-child(4), .amx-offers .amx-table td:nth-child(4) { display: none; }
.amx-specs .amx-table th { width: 42%; }
}
/* 0.4.0 – clickable specifications + active filters on the results page */
.amx-specs a.amx-spec-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(218,8,18,.45); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
.amx-specs a.amx-spec-link:hover, .amx-specs a.amx-spec-link:focus { color: #da0812; text-decoration-color: #da0812; }
.amx-specs a.amx-spec-link .amx-usd, .amx-specs a.amx-spec-link .amx-src, .amx-specs a.amx-spec-link .amx-note { color: inherit; }
.amx-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin: 0 0 1.5em; font-size: .95em; }
.amx-active-label { font-weight: 600; margin-right: .2em; }
.amx-chip { display: inline-flex; align-items: center; gap: .35em; padding: .3em .75em; border-radius: 999px; background: rgba(218,8,18,.08); border: 1px solid rgba(218,8,18,.3); color: inherit; text-decoration: none; }
.amx-chip:hover { background: rgba(218,8,18,.16); color: inherit; }
.amx-chip span { opacity: .6; }
.amx-clear { font-size: .9em; opacity: .75; text-decoration: underline; color: inherit; }
/* 0.5.0 – product page layout */
.amx-product .page-title .page-title-head { display: none; }
.amx-product .page-title.title-right .page-title-breadcrumbs { float: none; text-align: left; width: 100%; }
.amx-product-title { clear: both; width: 100%; margin: 0 0 .7em; color: #1b2a3a; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.15; }
.amx-product .summary .product_title,
.amx-product .summary form.cart,
.amx-product .summary .product_meta,
.amx-product .summary .single-share-box,
.amx-product .summary .woocommerce-product-details__short-description { display: none !important; }
.amx-summary-specs { margin: 1.2em 0 1.4em; }
.amx-summary-specs .amx-table th { width: 38%; }
.amx-story { clear: both; padding-top: 1em; }
.amx-story-text { max-width: 820px; line-height: 1.7; }
.amx-story-empty { border: 2px dashed rgba(0,0,0,.15); border-radius: 6px; padding: 1.2em 1.5em; }
.amx-story-empty p { opacity: .65; margin: 0; }
.amx-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 3em; margin: 2.5em 0; }
.amx-columns > .amx-block { margin: 0; }
.amx-columns .amx-checklist { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.amx-checklist li { display: flex; align-items: center; gap: .45em; padding: .25em 0; }
.amx-checklist li::before { width: 1em; flex: 0 0 1em; }
.amx-checklist li a { display: inline-flex; align-items: center; gap: .45em; }
.amx-logo-box { flex: 0 0 52px; width: 52px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.amx-logo { display: block; max-width: 52px; max-height: 22px; width: auto; height: auto; object-fit: contain; }
.amx-logo-empty { display: inline-block; background: rgba(0,0,0,.06); }
.amx-checklist .amx-todo .amx-logo { opacity: .5; }
@media (max-width: 900px) {
.amx-columns { grid-template-columns: 1fr; gap: 1.5em; }
}
/* 0.6.0 – live search suggestions */
.amx-suggest { position: fixed; z-index: 100000; display: none; background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.15); max-height: 70vh; overflow-y: auto; font-size: 14px; line-height: 1.3; text-align: left; }
.amx-suggest a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: #1b2a3a; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.05); }
.amx-suggest a:hover, .amx-suggest a.is-sel { background: rgba(218,8,18,.07); }
.amx-suggest img, .amx-sg-noimg { width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; border-radius: 4px; background: #f4f4f4; }
.amx-sg-txt { display: flex; flex-direction: column; min-width: 0; }
.amx-sg-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.amx-sg-meta { font-size: 12px; opacity: .6; margin-top: 2px; }
.amx-suggest a.amx-sg-all { justify-content: center; font-weight: 600; color: #da0812; border-bottom: 0; }
.amx-sg-none { padding: 12px; opacity: .6; }
/* 0.6.1 – header: no socials, opening hours, phone numbers or cart; our own search field */
.masthead .soc-ico, .dt-mobile-header .soc-ico, .mobile-mini-widgets-in-menu .soc-ico,
.masthead .top-bar,
.masthead .branding .text-area, .masthead .mini-widgets .text-area, .dt-mobile-header .text-area,
.masthead .wc-shopping-cart, .dt-mobile-header .wc-shopping-cart, .mobile-header-bar .wc-shopping-cart, .mobile-header-bar .soc-ico, .mobile-header-bar .text-area { display: none !important; }
.amx-header-search { display: inline-flex; align-items: center; background: #fff; border-radius: 999px; overflow: hidden; height: 38px; width: 280px; max-width: 100%; box-shadow: 0 0 0 1px rgba(255,255,255,.15); margin: 0; }
.amx-header-search input[type="search"] { flex: 1 1 auto; min-width: 0; height: 38px; border: 0 !important; background: transparent !important; padding: 0 0 0 16px !important; margin: 0 !important; font-size: 14px; color: #1b2a3a; box-shadow: none !important; outline: none; }
.amx-header-search button { flex: 0 0 40px; height: 38px; border: 0; background: #da0812; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border-radius: 0 999px 999px 0; }
.amx-header-search button:hover { background: #b0060e; }
@media (max-width: 778px) { .amx-header-search { width: 190px; height: 34px; } .amx-header-search input[type="search"], .amx-header-search button { height: 34px; } }
/* 0.6.2 – result tiles: nickname over the photo, edition + model, year + highest value; no wishlist or categories widget */
.widget_product_categories { display: none !important; }
article.product .yith-add-to-wishlist-button-block, article.product .yith-wcwl-add-to-wishlist, li.product .yith-add-to-wishlist-button-block, li.product .yith-wcwl-add-to-wishlist { display: none !important; }
article.product > figure, li.product { position: relative; }
.amx-loop-nick { display: none; }
article.product .amx-loop-nick, li.product .amx-loop-nick { display: block; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; max-width: calc(100% - 24px); padding: 4px 12px; border-radius: 999px; background: rgba(27,42,58,.88); color: #fff; font-weight: 700; font-size: 13px; line-height: 1.25; text-align: center; white-space: normal; pointer-events: none; }
.amx-t1 { display: block; }
.amx-t2 { display: block; font-size: .78em; font-weight: 400; opacity: .65; margin-top: 2px; }
.amx-loop-meta { display: flex; justify-content: center; align-items: baseline; gap: .6em; flex-wrap: wrap; margin-top: 4px; }
.amx-loop-year { display: inline-block; font-weight: 700; font-size: .85em; background: #1b2a3a; color: #fff; border-radius: 3px; padding: 1px 7px; }
.amx-loop-value strong { color: #da0812; font-weight: 700; }
.amx-lv-label { font-size: .85em; opacity: .7; }
/* 0.6.3 – product page: no magnifier/zoom; no search widget in the sidebar (search is in the header) */
.amx-product .woocommerce-product-gallery__trigger, .amx-product .zoomImg, .amx-product .images .dt-pswp-item-icon, .amx-product .product .images a.dt-pswp-item::after { display: none !important; }
.amx-product .woocommerce-product-gallery a, .amx-product .images a { pointer-events: none; cursor: default; }
.widget_product_search, .sidebar .widget_search { display: none !important; }
/* 0.6.5 – outbound-link icon in the validation list */
.amx-checklist a.amx-out .amx-out-icon { flex: 0 0 auto; margin-left: 3px; opacity: .7; position: relative; top: -1px; }
.amx-checklist a.amx-out:hover .amx-out-icon { opacity: 1; }
.amx-checklist .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
/* 0.6.6 – readable year badge; square product photos in lists */
.amx-loop-year, .price .amx-loop-year, .product_list_widget .amx-loop-year { color: #fff !important; background: #1b2a3a !important; }
article.product figure .woo-buttons-on-img, li.product a img { background: #f5f5f5; }
article.product figure .woo-buttons-on-img > a { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
article.product figure .woo-buttons-on-img img, li.product a img { width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1; object-fit: contain; object-position: center; }
/* 0.6.6 – nickname sits on the photo in grid and list view (moved there by amx-search.js) */
.amx-nick-host { position: relative !important; }
.amx-nick-host > .amx-loop-nick { display: block !important; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; max-width: calc(100% - 24px); padding: 4px 12px; border-radius: 999px; background: rgba(27,42,58,.88); color: #fff; font-weight: 700; font-size: 13px; line-height: 1.25; text-align: center; white-space: normal; pointer-events: none; }
.wc-layout-list .amx-loop-meta { justify-content: flex-start; }
/* 0.6.7 – product page: no sidebar, no wishlist button */
.amx-product #sidebar, .amx-product aside.sidebar { display: none !important; }
.amx-product #main .wf-container-main { display: block !important; grid-template-columns: none !important; }
.amx-product #content { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; padding-right: 0 !important; border-right: 0 !important; }
.amx-product .summary .yith-add-to-wishlist-button-block, .amx-product .summary .yith-wcwl-add-to-wishlist { display: none !important; }
/* 0.6.8 – responsive header search: theme search icon always hidden; mobile/tablet (≤1200px, The7 mobile header) get a search icon that opens a full-width panel */
.mini-search.amx-replaced { display: none !important; }
.amx-msearch-btn { display: inline-flex; flex: 0 0 40px; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0 4px; border: 0; border-radius: 50%; background: #da0812; color: #fff; cursor: pointer; }
.amx-msearch-btn:hover { background: #b0060e; }
.amx-msearch-panel { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 99990; padding: 14px 56px 14px 12px; background: #1b2a3a; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.amx-msearch-panel.is-open { display: block; }
.admin-bar .amx-msearch-panel { top: 46px; }
@media (min-width: 783px) { .admin-bar .amx-msearch-panel { top: 32px; } }
.amx-msearch-panel .amx-header-search { width: 100%; height: 44px; }
.amx-msearch-panel .amx-header-search input[type="search"], .amx-msearch-panel .amx-header-search button { height: 44px; }
.amx-msearch-panel .amx-header-search input[type="search"] { font-size: 16px; } /* 16px: no auto-zoom on iPhone */
.amx-msearch-close { position: absolute; top: 14px; right: 10px; width: 40px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; padding: 0; }
.amx-suggest { z-index: 99995; max-width: calc(100vw - 16px); }
@media (max-width: 600px) {
.amx-product-title { font-size: 1.6rem; }
.amx-specs .amx-table th, .amx-specs .amx-table td { padding: .5em .45em; }
.amx-offers .amx-table { font-size: .88em; }
.amx-offers .amx-shop-link { padding: .5em .8em; }
.amx-active-filters { font-size: .88em; }
.amx-checklist, .amx-columns .amx-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 0.6.10 – one mobile search button (direct child of the mobile header bar) */
.mobile-header-bar > .amx-msearch-btn { align-self: center; margin: 0 8px; }
.mobile-mini-widgets .amx-msearch-btn { display: none !important; }
/* 0.6.11 – list view: style code, colourway and value on separate lines; value not repeated next to the year */
.amx-list-specs span { display: block; }
.wc-layout-list .amx-loop-value { display: none; }
/* 0.6.13 – Gerelateerde AM 1's: no buttons; year + value left-aligned under the title */
.related-product .woo-buttons { display: none !important; }
.related-product .price { display: block; margin: 6px 0 0; }
.related-product .amx-loop-meta { justify-content: flex-start; margin-top: 0; }
/* 0.7.0 – homepage [amaxone_homepage]: rows of 6 sneakers, dashed content blocks, news */
.amx-home { display: flex; flex-direction: column; gap: 44px; margin: 30px 0 60px; }
.amx-row-title { margin: 0 0 16px; }
.amx-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.amx-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; }
.amx-card:hover .amx-card-t1 { color: #da0812; }
.amx-card-img { position: relative; display: block; aspect-ratio: 1 / 1; background: #f5f5f5; overflow: hidden; margin-bottom: 10px; }
.amx-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.amx-card-nick { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 16px); padding: 3px 10px; border-radius: 999px; background: rgba(27,42,58,.88); color: #fff; font-weight: 700; font-size: 12px; line-height: 1.25; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amx-card-t1 { font-weight: 700; line-height: 1.25; color: #1b2a3a; }
.amx-card-t2 { font-size: .8em; opacity: .65; margin-top: 2px; }
.amx-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: .85em; }
.amx-card-meta .amx-loop-year { color: #fff !important; background: #1b2a3a; border-radius: 3px; padding: 1px 7px; font-weight: 700; }
.amx-card-val { opacity: .8; }
.amx-news-img { aspect-ratio: 16 / 10; }
.amx-news-img img { object-fit: cover; }
.amx-news-date { font-size: .8em; opacity: .6; margin-bottom: 2px; }
.amx-hblock { display: grid; gap: 20px; border: 2px dashed rgba(27,42,58,.25); border-radius: 8px; padding: 20px; }
.amx-hblock-1 { grid-template-columns: 2fr 1fr; }
.amx-hblock-2 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.amx-hblock-3 { grid-template-columns: 1fr 2fr; }
.amx-slot { min-width: 0; }
.amx-slot > *:first-child { margin-top: 0; }
.amx-slot > *:last-child { margin-bottom: 0; }
/* 0.8.8: text under a block image = same look as the card model line ("Nike Air Max 1"), centered. */
.amx-hblock .amx-slot figure { margin-bottom: 0; }
.amx-hblock .amx-slot p { margin: 8px 0 0; text-align: center; font-family: Roboto, Helvetica, Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.35; letter-spacing: normal; text-transform: none; color: #6b6f74; opacity: .65; }
.amx-hblock .amx-slot p a { color: inherit; }
.amx-slot-empty { margin: 0; padding: 18px; border: 1px dashed rgba(0,0,0,.2); border-radius: 6px; font-size: .85em; opacity: .7; }
/* Smaller screens: rows scroll sideways (snap), blocks stack. */
@media (max-width: 1099px) {
.amx-home { gap: 34px; }
.amx-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.amx-card { flex: 0 0 30%; scroll-snap-align: start; }
.amx-hblock-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
.amx-hblock-1, .amx-hblock-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.amx-card { flex-basis: 44%; }
.amx-hblock { padding: 14px; gap: 14px; }
.amx-hblock-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---- 0.7.3: own header (StockX-like), replaces The7's header on every screen size ---- */
body.amx-hdr-on .masthead, body.amx-hdr-on #phantom, body.amx-hdr-on .dt-mobile-header, body.amx-hdr-on .dt-close-mobile-menu-icon, body.amx-hdr-on .mobile-header-space, body.amx-hdr-on .amx-msearch-panel { display: none !important; }
.amx-hdr { position: sticky; top: 0; z-index: 9000; background: #fff; color: #111; border-bottom: 1px solid #e6e6e6; font-size: 14px; line-height: 1.2; }
.admin-bar .amx-hdr { top: 32px; }
.amx-hdr a { text-decoration: none; }
.amx-hdr-r1 { display: flex; align-items: center; gap: 28px; height: 68px; padding: 0 32px; }
.amx-hdr-logo { flex: 0 0 auto; display: flex; align-items: center; color: #111; font-weight: 800; font-size: 20px; }
.amx-hdr-logo img { height: 40px; width: auto; max-width: none; display: block; }
.amx-hdr-search { flex: 1 1 auto; min-width: 0; }
/* 0.8.9: top header row dark navy again (#0e243c, the old The7 header colour), full width. */
.amx-hdr-r1 { background: #0e243c; box-shadow: 0 0 0 100vmax #0e243c; clip-path: inset(0 -100vmax); }
.amx-hdr-r1 .amx-hdr-right a, .amx-hdr-r1 .amx-hdr-right a:visited { color: #fff !important; }
.amx-hdr-r1 .amx-hdr-right a:hover { color: #fff !important; opacity: .8; }
.amx-hdr-r1 .amx-hdr-btn { color: #fff !important; }
.amx-hdr-r1 .amx-hdr-btn:hover { background: rgba(255,255,255,.12) !important; }
.amx-hdr .amx-header-search { display: flex; width: 100%; max-width: none; height: 44px; background: #f2f2f2; box-shadow: inset 0 0 0 1px #e2e2e2; }
.amx-hdr .amx-header-search input[type="search"] { height: 44px; font-size: 15px; padding-left: 20px !important; color: #111; }
.amx-hdr .amx-header-search button { flex-basis: 48px; height: 44px; }
.amx-hdr-right { flex: 0 0 auto; display: flex; align-items: center; gap: 24px; }
.amx-hdr-right a, .amx-hdr-r2 a { color: #111; font-weight: 600; white-space: nowrap; }
.amx-hdr-right a:hover, .amx-hdr-r2 a:hover, .amx-hdr-right a.is-current { color: #da0812; }
.amx-hdr-lang { display: inline-flex; align-items: center; gap: 6px; color: #bbb; font-size: 13px; }
.amx-hdr-lang a { color: #777 !important; font-weight: 600; }
.amx-hdr-lang a.is-lang { color: #111 !important; }
.amx-hdr-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 0; padding: 0 !important; margin: 0; border: 0 !important; background: none !important; box-shadow: none !important; color: #111 !important; cursor: pointer; border-radius: 50%; }
.amx-hdr-btn:hover { background: #f2f2f2 !important; }
.amx-hdr-r2 { border-top: 1px solid #efefef; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.amx-hdr-r2::-webkit-scrollbar { display: none; }
.amx-hdr-r2in { display: flex; gap: 30px; width: max-content; margin: 0 auto; padding: 0 32px; }
.amx-hdr-r2 a { display: block; padding: 13px 0 11px; border-bottom: 2px solid transparent; font-size: 14px; }
.amx-hdr-r2 a.amx-hdr-hot:first-child { color: #da0812; }
.amx-hdr-r2 a.is-current { border-bottom-color: #111; }
@media (max-width: 1100px) { .amx-hdr-r1 { gap: 20px; padding: 0 20px; } .amx-hdr-right { gap: 16px; } .amx-hdr-r2in { padding: 0 20px; gap: 24px; } }
@media (max-width: 900px) {
.amx-hdr, .admin-bar .amx-hdr { position: relative; top: auto; }
.amx-hdr-r1 { flex-wrap: wrap; height: auto; gap: 0; padding: 6px 8px 0; }
.amx-hdr-btn { display: inline-flex; flex: 0 0 44px; }
.amx-hdr-menu { order: 1; }
.amx-hdr-r1 > .amx-hdr-logo { order: 2; flex: 1 1 auto; justify-content: center; }
.amx-hdr-logo img { height: 30px; }
.amx-hdr-sbtn { order: 3; }
.amx-hdr-right { display: none; }
.amx-hdr-search { order: 4; flex: 1 0 100%; padding: 6px 4px 12px; }
.amx-hdr .amx-header-search input[type="search"] { font-size: 16px; } /* 16px: no auto-zoom on iPhone */
.amx-hdr-r2in { margin: 0; padding: 0 12px; gap: 22px; }
.amx-hdr-r2 a { font-size: 15px; padding: 12px 0 10px; }
}
/* Menu drawer */
.amx-drawer { position: fixed; inset: 0; z-index: 100001; visibility: hidden; transition: visibility 0s .25s; }
.amx-drawer.is-open { visibility: visible; transition: none; }
.amx-drawer-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s; }
.amx-drawer.is-open .amx-drawer-bg { opacity: 1; }
.amx-drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); background: #fff; overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease; padding: 0 0 24px; box-shadow: 4px 0 24px rgba(0,0,0,.15); }
.amx-drawer.is-open .amx-drawer-panel { transform: none; }
.amx-drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; border-bottom: 1px solid #eee; }
.amx-drawer-top .amx-hdr-btn { display: inline-flex; }
.amx-drawer-top .amx-hdr-logo img { height: 28px; }
.amx-drawer-h { margin: 18px 20px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #888; }
.amx-drawer-panel > a { display: block; padding: 11px 20px; color: #111; font-size: 16px; font-weight: 600; text-decoration: none; }
.amx-drawer-panel > a:hover, .amx-drawer-panel > a.is-current { background: #f5f5f5; color: #da0812; }
.amx-drawer-lang { padding: 18px 20px 0; }
.amx-drawer-lang .amx-hdr-lang { font-size: 15px; gap: 10px; }
html.amx-drawer-open { overflow: hidden; }
/* ---- 0.7.5: larger logo (wide The7 logo) ---- */
.amx-hdr-r1 { height: 80px; }
.amx-hdr-r1 > .amx-hdr-logo img { height: 58px; }
@media (max-width: 900px) {
.amx-hdr-r1 { height: auto; }
.amx-hdr-r1 > .amx-hdr-logo img { height: 42px; }
}
.amx-drawer-top .amx-hdr-logo img { height: 36px; }
/* ---- 0.7.6: homepage cards line up (fixed line heights, no "unknown" labels) ---- */
.amx-card-t1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.25; height: 2.5em; }
.amx-card-t2 { display: block; min-height: 1.3em; line-height: 1.3; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amx-card-meta { flex-wrap: nowrap; min-height: 22px; margin-top: 8px; }
.amx-card-meta .amx-loop-year { flex: 0 0 auto; line-height: 20px; }
.amx-card-val { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- 0.7.7: subtler headings, card info block, header as wide as the content ---- */
body.amx-hdr-on #main h2, body.amx-hdr-on .amx-row-title { font-size: 26px; line-height: 1.25; }
body.amx-hdr-on .amx-row-title { margin-bottom: 16px; }
body.amx-hdr-on .amx-product-title { font-size: 32px; line-height: 1.2; }
@media (max-width: 778px) {
body.amx-hdr-on #main h2, body.amx-hdr-on .amx-row-title { font-size: 22px; }
body.amx-hdr-on .amx-product-title { font-size: 26px; }
}
/* Card: year badge two lines high, model + value stacked to its right */
.amx-card-info { display: flex; align-items: stretch; gap: 6px; margin-top: 8px; font-size: .8em; line-height: 1.35; }
.amx-card-info .amx-loop-year { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 38px; padding: 0 5px; border-radius: 4px; background: #1b2a3a; color: #fff !important; font-weight: 700; line-height: 1; }
.amx-card-info .amx-loop-year.amx-noyear { display: none; }
.amx-card-sub { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 2.7em; }
.amx-card-sub .amx-card-t2 { margin: 0; min-height: 1.35em; line-height: 1.35; font-size: 1em; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amx-card-sub .amx-card-val { min-height: 1.35em; line-height: 1.35; opacity: 1; color: #1b2a3a; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Header: "Trending" not permanently red; the current page is marked instead */
.amx-hdr-r2 a.amx-hdr-hot:first-child { color: #111; }
.amx-hdr-r2 a.is-current { color: #da0812; border-bottom-color: #da0812; }
/* Header rows exactly as wide as the page content (width synced from The7's content wrapper) */
.amx-hdr-r1, .amx-hdr .amx-hdr-r2in { box-sizing: border-box; width: var(--amx-cw, min(1200px, calc(100% - 40px))); max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
.amx-hdr-r2 { overflow: visible; }
.amx-hdr .amx-hdr-r2in { display: block; gap: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.amx-hdr-r2in::-webkit-scrollbar { display: none; }
.amx-hdr-list { display: flex; gap: 30px; width: max-content; margin: 0 auto; }
@media (max-width: 1100px) { .amx-hdr-r1 { padding: 0; } .amx-hdr-list { gap: 24px; } }
@media (max-width: 900px) {
.amx-hdr-r1 { padding: 6px 0 0; }
.amx-hdr-menu { margin-left: -10px; }
.amx-hdr-sbtn { margin-right: -10px; }
.amx-hdr-search { padding: 6px 0 12px; }
.amx-hdr-list { margin: 0; gap: 22px; }
}
/* ---- 0.7.8: larger year, no empty title line when the whole row fits on one line ---- */
.amx-card-info { gap: 5px; }
.amx-card-info .amx-loop-year { font-size: 14px; min-width: 40px; padding: 0 4px; letter-spacing: -.01em; }
.amx-cards.amx-t1-one .amx-card-t1 { height: 1.25em; }
/* Category bar: first item on the left edge, last on the right edge, equal space between (scrolls when it does not fit) */
.amx-hdr .amx-hdr-list { width: 100%; min-width: max-content; justify-content: space-between; margin: 0; gap: 24px; }
@media (max-width: 900px) { .amx-hdr .amx-hdr-list { gap: 22px; } }
/* 0.8.5 result pages: header like the product page, 4 per row */
body.amx-results .page-title .page-title-head { display: none; }
body.amx-results .page-title.title-right .page-title-breadcrumbs { float: none; text-align: left; width: 100%; }
body.amx-results .woocommerce-products-header .page-description:empty, body.amx-results .woocommerce-products-header:empty { display: none; }
.amx-rhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 0 0 32px; padding: 0 0 22px; border-bottom: 1px solid #e8e9eb; }
.amx-rhead-main { min-width: 0; flex: 1 1 420px; }
.amx-rhead-title { position: relative; margin: 0 0 16px; padding: 0 0 8px; color: #1b2a3a; font-family: "Roboto Condensed", Helvetica, Arial, Verdana, sans-serif; font-weight: 700; font-size: 32px; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.amx-rhead-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background: #da0812; }
.amx-rhead-sub { margin: 0; color: #6b6f74; font-size: 15px; line-height: 1.55; max-width: 720px; }
.amx-rhead-count { flex: 0 0 auto; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 4px; background: #1b2a3a; color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; }
@media (min-width: 992px) {
/* Header over the full width (sidebar + results), like the product title. */
body.amx-results #main .wf-container-main > .amx-rhead { grid-column: 1 / -1; grid-row: 1; }
body.amx-results #main .wf-container-main > .amx-rhead ~ .content,
body.amx-results #main .wf-container-main > .amx-rhead ~ .sidebar,
body.amx-results #main .wf-container-main > .amx-rhead ~ aside { grid-row: 2; }
}
body.amx-results .wc-grid.dt-css-grid-wrap .dt-css-grid,
body.amx-results .dt-products .dt-css-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-column-gap: 20px !important; grid-row-gap: 30px !important; }
body.amx-results .dt-products .dt-css-grid > .wf-cell { width: auto !important; min-width: 0; }
@media (max-width: 1100px) {
body.amx-results .wc-grid.dt-css-grid-wrap .dt-css-grid, body.amx-results .dt-products .dt-css-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 778px) {
.amx-rhead { margin-bottom: 24px; padding-bottom: 18px; }
.amx-rhead-title { font-size: 26px; }
.amx-rhead-sub { font-size: 14px; }
}
@media (max-width: 600px) {
body.amx-results .wc-grid.dt-css-grid-wrap .dt-css-grid, body.amx-results .dt-products .dt-css-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-column-gap: 14px !important; grid-row-gap: 24px !important; }
}
/* 0.8.6 product tiles like the homepage cards: year badge + model + just the amount */
.amx-tile-info { display: flex; align-items: stretch; justify-content: flex-start; gap: 5px; margin: 8px 0 0; font-size: 12px; font-weight: 400; line-height: 1.35; text-align: left; }
.price .amx-tile-info .amx-loop-year, .amx-tile-info .amx-loop-year { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 40px; padding: 0 4px; border-radius: 4px; background: #1b2a3a !important; color: #fff !important; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.amx-tile-info .amx-loop-year.amx-noyear { display: none; }
.amx-tile-info .amx-card-sub { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 2.7em; }
.amx-tile-info .amx-card-t2 { display: block; margin: 0; min-height: 1.35em; font-size: 1em; line-height: 1.35; color: #6b6f74; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amx-tile-info .amx-card-val { display: block; min-height: 1.35em; line-height: 1.35; color: #1b2a3a; font-weight: 600; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price .amx-tile-info, .related-product .price .amx-tile-info { color: inherit; }
/* Model already in the info row: no second model line in the title. */
article:has(.amx-tile-info) .entry-title .amx-t2, li:has(.amx-tile-info) .amx-t2, .related-product:has(.amx-tile-info) .amx-t2 { display: none; }
.product_list_widget .amx-tile-info .amx-card-t2 { display: none; }
.product_list_widget .amx-tile-info .amx-card-sub { min-height: 0; }
.product_list_widget .amx-tile-info { margin-top: 4px; }
.product_list_widget .amx-tile-info .amx-loop-year { min-width: 38px; height: 20px; font-size: 12px; }
/* Nickname pill as on the homepage: one line, small. */
.amx-nick-host > .amx-loop-nick { top: 10px; max-width: calc(100% - 16px); padding: 3px 10px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Result grid: left aligned like the homepage, square grey photo box, info row on one line per row. */
body.amx-results .dt-products .dt-css-grid > .wf-cell { display: flex; }
body.amx-results .dt-products .dt-css-grid > .wf-cell > article { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; }
body.amx-results .dt-products .woocom-project { flex: 1 1 auto; display: flex; flex-direction: column; margin: 0; }
body.amx-results .dt-products .woo-buttons-on-img { aspect-ratio: 1 / 1; background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0; }
body.amx-results .dt-products .woo-buttons-on-img > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
body.amx-results .dt-products .woo-buttons-on-img img { width: 100%; height: 100%; object-fit: contain; }
body.amx-results .dt-products figcaption.woocom-list-content { flex: 1 1 auto; display: flex; flex-direction: column; padding: 10px 0 0 !important; text-align: left !important; }
body.amx-results .dt-products figcaption .entry-title { margin: 0; padding: 0; font-family: Roboto, Helvetica, Arial, Verdana, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; text-align: left; }
body.amx-results .dt-products figcaption .entry-title a { color: #1b2a3a; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
body.amx-results .dt-products figcaption .entry-title a:hover { color: #da0812; }
body.amx-results .dt-products figcaption .price { display: block; margin: auto 0 0 !important; padding: 0; }
body.amx-results .dt-products.wc-grid figcaption .woocommerce-product-details__short-description { display: none; }
/* 0.9.0 red line under headings (like the value on the product page), closer to the text */
body.amx-hdr-on .amx-row-title { position: relative; padding-bottom: 8px; margin-bottom: 18px; }
.amx-row-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background: #da0812; }
.amx-product .summary p.price, .amx-product p.price { padding-bottom: 8px !important; }
/* 0.9.0 production number: red corner ribbon on cards ("24 x") */
.amx-ribbon { display: none; }
.amx-card-img > .amx-ribbon, .amx-nick-host > .amx-ribbon { display: block; position: absolute; top: 20px; right: -44px; z-index: 4; width: 160px; padding: 5px 0 4px; transform: rotate(45deg); background: #da0812; color: #fff; text-align: center; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.25); pointer-events: none; }
.amx-nick-host.amx-has-ribbon { overflow: hidden; }
.amx-card.amx-has-ribbon .amx-card-nick, .amx-nick-host.amx-has-ribbon > .amx-loop-nick { left: 10px; transform: none; max-width: calc(100% - 74px); }
.product_list_widget .amx-ribbon { display: none !important; }
/* 0.9.0 production number on the product page */
.amx-prod-hero { position: relative; overflow: hidden; margin: 0 0 28px; padding: 24px 24px 22px; border-radius: 6px; background: #0e243c; color: #fff; }
.amx-prod-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(218,8,18,.55), rgba(218,8,18,0) 70%); pointer-events: none; }
.amx-prod-lbl { position: relative; z-index: 1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: #da0812; }
.amx-prod-num { position: relative; z-index: 1; margin: 8px 0 6px; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 72px; line-height: .95; color: #fff; letter-spacing: -.01em; }
.amx-prod-num span { margin-left: 8px; font-size: 32px; opacity: .8; }
.amx-prod-txt { position: relative; z-index: 1; margin: 0; max-width: 440px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.8); }
.amx-prod-scale { position: relative; z-index: 1; margin-top: 18px; }
.amx-prod-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #da0812 0%, #ff8a00 35%, #5a6b7c 100%); }
.amx-prod-pin { position: absolute; top: -5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid #da0812; transform: translateX(-50%); box-shadow: 0 0 0 4px rgba(218,8,18,.25); }
.amx-prod-ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: rgba(255,255,255,.7); }
@media (max-width: 600px) {
.amx-prod-hero { padding: 20px 18px 18px; }
.amx-prod-num { font-size: 54px; }
.amx-prod-num span { font-size: 26px; }
}
/* 0.9.2: all reds = logo red #da0812 (hover shade #b0060e). */
/* 0.9.3 homepage blocks: same white space all round and between the images; the caption floats in the
white space under its image and does not make the block taller. */
.amx-hblock { padding: 20px; gap: 20px; }
.amx-hblock .amx-slot { position: relative; align-self: start; }
.amx-hblock .amx-slot figure + p { position: absolute; left: 0; right: 0; top: calc(100% + 2px); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amx-hblock .amx-slot figure, .amx-hblock .amx-slot img { display: block; }
@media (max-width: 600px) {
.amx-hblock { padding: 18px; gap: 18px; }
.amx-hblock .amx-slot figure + p { top: calc(100% + 1px); }
}
/* 0.9.6 homepage blocks: every block image fills its whole column; in blocks 1 and 3 (desktop, two columns)
the 1/3 image also fills the full row height (cover-cropped to the height of the 2/3 image). */
.amx-hblock .amx-slot figure { width: 100%; margin-left: 0; margin-right: 0; }
.amx-hblock .amx-slot figure img { width: 100%; height: auto; }
.amx-hblock-1:has(.amx-w-2-3 img) .amx-w-1-3:has(img), .amx-hblock-3:has(.amx-w-2-3 img) .amx-w-1-3:has(img) { align-self: stretch; }
.amx-hblock-1:has(.amx-w-2-3 img) .amx-w-1-3:has(img) figure, .amx-hblock-3:has(.amx-w-2-3 img) .amx-w-1-3:has(img) figure { position: absolute; inset: 0; margin: 0; }
.amx-hblock-1:has(.amx-w-2-3 img) .amx-w-1-3:has(img) figure a, .amx-hblock-3:has(.amx-w-2-3 img) .amx-w-1-3:has(img) figure a { display: block; height: 100%; }
.amx-hblock-1:has(.amx-w-2-3 img) .amx-w-1-3:has(img) figure img, .amx-hblock-3:has(.amx-w-2-3 img) .amx-w-1-3:has(img) figure img { width: 100%; height: 100%; object-fit: cover; }
/* 0.9.7 blocks 1 and 3 scale linearly (block 2: min. 3 per row): always side by side (also tablet/mobile), the 1/3 image fills the row
height at every width, white space shrinks with the screen (20 px at 1200 px content, min 8 px). */
.amx-hblock-1 { grid-template-columns: 2fr 1fr; }
.amx-hblock-3 { grid-template-columns: 1fr 2fr; }
.amx-hblock-1, .amx-hblock-3, .amx-hblock-2 { padding: clamp(8px, 1.67vw, 20px); gap: clamp(8px, 1.67vw, 20px); }
/* Block 2 (six small images): never fewer than 3 side by side (≤1099 px 3 per row, also on mobile). */
@media (max-width: 1099px) { .amx-hblock-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Room for the floating caption (≈16 px) between block-2 rows, also when the gap shrinks. */
.amx-hblock-2 { row-gap: 20px; }
/* 0.9.7 homepage card rows: ≤1099 px a 3-column grid (6 cards = 2 rows), no sideways scrolling. */
@media (max-width: 1099px) {
.amx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 14px; overflow: visible; padding-bottom: 0; scroll-snap-type: none; }
.amx-card { flex: initial; }
}
@media (max-width: 600px) {
.amx-cards { gap: 16px 8px; }
.amx-cards .amx-card-t1 { font-size: 13px; }
.amx-cards .amx-card-info { gap: 4px; font-size: 11px; }
.amx-cards .amx-card-info .amx-loop-year { font-size: 12px; min-width: 34px; padding: 0 3px; }
.amx-cards .amx-card-nick { top: 6px; max-width: calc(100% - 10px); padding: 2px 7px; font-size: 10px; }
.amx-cards .amx-card-img > .amx-ribbon { top: 11px; right: -32px; width: 110px; padding: 3px 0 2px; font-size: 10px; }
.amx-cards .amx-card.amx-has-ribbon .amx-card-nick { left: 6px; max-width: calc(100% - 46px); }
}
/* 0.9.8 legal small print: own full-width line at the end of the bottom bar, justified */
#bottom-bar .wf-container-bottom { flex-wrap: wrap; }
#bottom-bar .amx-legal { order: 99; flex: 0 0 100%; width: 100%; margin: 6px 0 0; padding: 14px 0 6px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.62); text-align: justify; }
.amx-legal p { margin: 0; font-family: Roboto, Helvetica, Arial, Verdana, sans-serif; font-size: 11px; line-height: 1.65; letter-spacing: .01em; text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; color: inherit; }
.amx-legal a.amx-mail { white-space: nowrap; -webkit-hyphens: none; hyphens: none; color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 2px; }
.amx-legal a.amx-mail:hover { color: #fff; text-decoration-color: #da0812; }
@media (max-width: 600px) { .amx-legal p { font-size: 10.5px; } }
/* 1.0.0 product page: price comparison + value per size in the left column, validation right;
validation shows a logo OR a name (never both), larger logos, always 3 per row; shop logos in the price table. */
.amx-columns > .amx-col { min-width: 0; }
.amx-columns > .amx-col > .amx-block { margin: 0; }
.amx-columns > .amx-col > .amx-block + .amx-block { margin-top: 2.5em; }
.amx-checklist, .amx-columns .amx-checklist { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .35em 1em; }
.amx-checklist li { min-height: 40px; min-width: 0; }
.amx-checklist li a { min-width: 0; }
.amx-checklist .amx-logo-box { flex: 0 1 auto; width: auto; max-width: 110px; height: 32px; justify-content: flex-start; }
.amx-checklist .amx-logo { max-width: 110px; max-height: 28px; }
.amx-checklist .amx-plat { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.amx-offers .amx-shop-cell { vertical-align: middle; }
.amx-shop-logo { display: inline-flex; align-items: center; height: 28px; }
.amx-shop-logo .amx-logo { max-width: 96px; max-height: 24px; }
@media (max-width: 600px) {
.amx-checklist, .amx-columns .amx-checklist { gap: .3em .6em; }
.amx-checklist .amx-logo-box { max-width: 80px; height: 26px; }
.amx-checklist .amx-logo { max-width: 80px; max-height: 22px; }
.amx-checklist .amx-plat { font-size: .88em; }
.amx-shop-logo .amx-logo { max-width: 72px; max-height: 20px; }
}
/* 1.0.1 product page: no grey breadcrumb bar; same 30 px from the menu to the title as on the homepage;
red line under the title like the homepage row titles; breadcrumb small and right-aligned above the value. */
body.amx-product .page-title { display: none !important; }
body.amx-product.amx-hdr-on #main, body.amx-product #main { padding-top: 30px !important; }
body.amx-hdr-on .amx-product-title { position: relative; padding-bottom: 8px; margin-bottom: 18px; }
body.amx-hdr-on .amx-product-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background: #da0812; }
.amx-prod-crumbs { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2px 6px; margin: 0 0 6px; font-size: 12px; line-height: 1.4; color: #8a8f95; text-align: left; } /* 1.0.2: left, exactly above "Waarde" */
.amx-prod-crumbs a { color: #8a8f95 !important; text-decoration: none; }
.amx-prod-crumbs a:hover { color: #da0812 !important; }
.amx-prod-crumbs .amx-crumb-sep { opacity: .6; }
/* ===================================================================
1.0.3 – Nieuws (ontwerp A "Voorpagina"): /nieuws/, artikel, homepageblok
Huisstijl: logorood #da0812, navy #0e243c / titels #1b2a3a, Roboto (Condensed).
=================================================================== */
body.amx-news-page .page-title, body.amx-news-page #sidebar, body.amx-news-page aside.sidebar { display: none !important; }
body.amx-news-page #main { padding-top: 30px !important; }
body.amx-news-page #content.amx-nw-content { width: 100% !important; max-width: 100%; float: none; padding: 0 !important; }
body.amx-news-page #main .wf-container-main { display: block !important; } /* 1.0.4: The7 keeps a sidebar grid */
body.amx-news-page #content.amx-nw-content { grid-column: 1 / -1; }
.amx-nw-net ol, .amx-nw-hp-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.amx-nw-net li, .amx-nw-hp-list li { list-style: none !important; margin-left: 0 !important; }
.amx-nw { color: #1b2a3a; }
.amx-nw a, .amx-nw-home a { text-decoration: none; }
.amx-nw-check h2, .amx-nw-srcs h2, .amx-nw-net-t { font-family: "Roboto Condensed", Helvetica, Arial, sans-serif !important; font-weight: 700; }
.amx-nw-title { position: relative; margin: 0 0 18px; padding-bottom: 8px; color: #1b2a3a; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 32px; line-height: 1.2; text-wrap: balance; }
.amx-nw-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background: #da0812; }
.amx-nw-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--amx-side-w, 360px); gap: var(--amx-side-gap, 45px); align-items: start; }
.amx-nw-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.amx-nw-cell { min-width: 0; border-bottom: 1px solid #e3e5e8; padding-bottom: 14px; }
.amx-nw-cell > a { display: flex; flex-direction: column; height: 100%; color: inherit; position: relative; }
.amx-nw-img { position: relative; display: block; overflow: hidden; background: #f5f5f5; aspect-ratio: 16 / 10; }
.amx-nw-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.amx-nw-cred { position: absolute; left: 0; bottom: 0; max-width: 100%; padding: 2px 6px; background: rgba(14, 36, 60, .82); color: #fff; font-size: 10px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amx-nw-cred-top { top: 0; bottom: auto; z-index: 2; }
.amx-nw-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 10px; }
.amx-nw-h { display: block; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 21px; line-height: 1.15; color: #1b2a3a; transition: color .15s; text-wrap: balance; }
.amx-nw a:hover .amx-nw-h, .amx-nw-home a:hover .amx-nw-h { color: #da0812; }
.amx-nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: #6b6f74; }
.amx-nw-lbl { display: inline-block; background: #da0812; color: #fff; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; padding: 2px 7px; }
.amx-nw-lbl-gerucht { background: #fff; color: #1b2a3a; box-shadow: inset 0 0 0 1.5px #1b2a3a; }
.amx-nw-ver { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.amx-nw-ver svg { width: 12px; height: 12px; flex: none; }
.amx-nw-ver-officieel { color: #0f7a3d; } .amx-nw-ver-bevestigd { color: #1f5fa8; } .amx-nw-ver-gerucht { color: #9a6400; }
/* Brede tegel: kop op de foto */
.amx-nw-wide { grid-column: span 2; border-bottom: 0; padding-bottom: 0; }
.amx-nw-wide .amx-nw-img { aspect-ratio: auto; height: 100%; min-height: 330px; }
.amx-nw-wide .amx-nw-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 18px 16px; background: linear-gradient(transparent, rgba(10, 20, 32, .88)); }
.amx-nw-wide .amx-nw-h { color: #fff; font-size: 30px; line-height: 1.1; }
.amx-nw-wide .amx-nw-meta, .amx-nw-wide .amx-nw-meta .amx-nw-ver { color: #e5e8ec; }
.amx-nw a:hover .amx-nw-wide .amx-nw-h, .amx-nw-wide a:hover .amx-nw-h { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Rechterkolom */
.amx-nw-aside { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.amx-nw-crumbs { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 12px; line-height: 1.4; color: #8a8f95; margin-bottom: -8px; }
.amx-nw-crumbs a { color: #8a8f95 !important; }
.amx-nw-crumbs a:hover { color: #da0812 !important; }
.amx-nw-crumbs .amx-crumb-sep { opacity: .6; }
.amx-nw-net-t { display: inline-block; margin: 0 0 6px !important; padding: 3px 10px !important; background: #da0812; color: #fff !important; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-size: 18px !important; line-height: 1.3 !important; text-transform: uppercase; }
.amx-nw-net ol { list-style: none; margin: 0; padding: 0; }
.amx-nw-net li { margin: 0; border-top: 1px solid #e3e5e8; }
.amx-nw-net li a { display: block; padding: 8px 0; color: #1b2a3a; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 14px; line-height: 1.25; }
.amx-nw-net li a:hover { color: #da0812; }
.amx-nw-net li span { color: #da0812; margin-right: 6px; font-variant-numeric: tabular-nums; }
.amx-nw-check { background: #f4f5f7; padding: 16px; }
.amx-nw-check h2 { margin: 0 0 6px !important; font-size: 17px !important; line-height: 1.3 !important; color: #1b2a3a; }
.amx-nw-check h2::after { display: none; }
.amx-nw-check p { margin: 0; font-size: 13px; line-height: 1.5; color: #6b6f74; }
.amx-nw-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.amx-nw-pages { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 30px; }
.amx-nw-pages a, .amx-nw-pages span { min-width: 36px; padding: 6px 10px; text-align: center; border: 1px solid #e3e5e8; color: #1b2a3a; font-weight: 700; }
.amx-nw-pages .current { background: #da0812; border-color: #da0812; color: #fff; }
.amx-nw-empty { grid-column: 1 / -1; color: #6b6f74; }
/* Artikel */
.amx-nw-art { min-width: 0; max-width: 760px; }
.amx-nw-fig { margin: 0 0 18px; }
.amx-nw-fig .amx-nw-img { aspect-ratio: 16 / 9; }
.amx-nw-fig figcaption { padding-top: 6px; font-size: 12px; color: #6b6f74; }
.amx-nw-fig figcaption a { color: #1b2a3a; text-decoration: underline; text-underline-offset: 2px; }
.amx-nw-fig figcaption a:hover { color: #da0812; }
.amx-nw-lede { margin: 0 0 18px; font-size: 18px; line-height: 1.5; font-weight: 500; color: #1b2a3a; }
.amx-nw-prose { font-size: 16.5px; line-height: 1.65; max-width: 66ch; }
.amx-nw-prose p, .amx-nw-prose ul { margin: 0 0 14px; }
.amx-nw-prose blockquote { margin: 18px 0; padding: 4px 0 4px 16px; border-left: 3px solid #da0812; font-style: normal; }
.amx-nw-prose blockquote p { margin: 0; font-size: 19px; line-height: 1.4; }
.amx-nw-prose blockquote cite { display: block; margin-top: 6px; font-size: 12.5px; color: #6b6f74; font-style: normal; }
.amx-nw-artmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 12.5px; color: #6b6f74; }
.amx-nw-verbox { display: flex; gap: 12px; align-items: flex-start; border: 1px solid #e3e5e8; padding: 12px 14px; }
.amx-nw-dot { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 16px; }
.amx-nw-verbox-officieel .amx-nw-dot { background: #0f7a3d; } .amx-nw-verbox-bevestigd .amx-nw-dot { background: #1f5fa8; } .amx-nw-verbox-gerucht .amx-nw-dot { background: #9a6400; }
.amx-nw-verbox b { font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-size: 16px; }
.amx-nw-verbox p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: #3c4046; }
.amx-nw-update { margin: 0 0 18px; padding: 10px 14px; background: #fff6e5; border: 1px solid #f1d39a; font-size: 13.5px; max-width: 66ch; }
.amx-nw-srcs { max-width: 66ch; margin-top: 26px; padding-top: 12px; border-top: 1px solid #1b2a3a; }
.amx-nw-srcs h2 { margin: 0 0 8px !important; font-size: 18px !important; }
.amx-nw-srcs h2::after { display: none; }
.amx-nw-srcs ol { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.5; }
.amx-nw-srcs li { padding: 3px 0; }
.amx-nw-srcs a { color: #1b2a3a; text-decoration: underline; text-underline-offset: 2px; }
.amx-nw-srcs a:hover { color: #da0812; }
.amx-nw-pub { font-weight: 700; }
.amx-nw-d { color: #6b6f74; }
.amx-nw-note, .amx-nw-correct { margin: 8px 0 0; font-size: 12.5px; color: #6b6f74; max-width: 66ch; }
.amx-nw-correct { margin-top: 18px; }
/* Homepageblok (ontwerp A) */
.amx-nw-hp { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
.amx-nw-hp-lead { position: relative; display: block; color: inherit; }
.amx-nw-hp-lead .amx-nw-img { aspect-ratio: 16 / 10; }
.amx-nw-hp-lead .amx-nw-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 16px 14px; background: linear-gradient(transparent, rgba(10, 20, 32, .88)); }
.amx-nw-hp-lead .amx-nw-h { color: #fff; font-size: 24px; line-height: 1.1; }
.amx-nw-hp-lead .amx-nw-meta, .amx-nw-hp-lead .amx-nw-ver { color: #e5e8ec; }
.amx-nw-hp-lead:hover .amx-nw-h { color: #fff !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.amx-nw-hp-list { list-style: none; margin: 0; padding: 0; }
.amx-nw-hp-list li { margin: 0; border-top: 1px solid #e3e5e8; }
.amx-nw-hp-list li:first-child { border-top: 0; }
.amx-nw-hp-list a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 0; color: inherit; }
.amx-nw-hp-list li:first-child a { padding-top: 0; }
.amx-nw-hp-list .amx-nw-img { aspect-ratio: 4 / 3; }
.amx-nw-hp-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.amx-nw-hp-list .amx-nw-h { font-size: 15px; line-height: 1.2; }
.amx-nw-all { display: inline-block; margin-top: 14px; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 14px; color: #da0812 !important; }
.amx-nw-all::after { content: " →"; }
.amx-nw-all:hover { color: #b0060e !important; }
@media (max-width: 1000px) {
.amx-nw-grid { grid-template-columns: minmax(0, 1fr); }
.amx-nw-front .amx-nw-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.amx-nw-front .amx-nw-crumbs { display: none; }
.amx-nw-article .amx-nw-aside { order: -1; gap: 12px; }
.amx-nw-article .amx-nw-aside .amx-nw-net, .amx-nw-article .amx-nw-aside .amx-nw-check { display: none; }
.amx-nw-art { max-width: none; }
}
@media (max-width: 778px) { .amx-nw-title { font-size: 26px; } }
@media (max-width: 760px) {
.amx-nw-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.amx-nw-wide .amx-nw-h { font-size: 24px; }
.amx-nw-hp { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
.amx-nw-main { grid-template-columns: minmax(0, 1fr); }
.amx-nw-wide { grid-column: auto; }
.amx-nw-wide .amx-nw-img { min-height: 260px; }
.amx-nw-h { font-size: 19px; }
.amx-nw-front .amx-nw-aside { grid-template-columns: minmax(0, 1fr); }
.amx-nw-hp-list a { grid-template-columns: 84px minmax(0, 1fr); }
}
/* 1.0.4: homepage h1 for search engines and screen readers (visually hidden) */
.amx-home-h1 { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* 1.0.6 – nieuws bovenaan de homepage (zelfde opmaak als /nieuws) */
.amx-nw-homefront { margin-bottom: 0; } /* 1.0.7: same 44 px gap as between the other homepage rows (flex gap) */
.amx-nw-homefront .amx-nw-all { margin-top: -6px; }
@media (max-width: 1000px) { .amx-nw-homefront .amx-nw-aside .amx-nw-check { display: none; } .amx-nw-homefront .amx-nw-aside { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .amx-nw-homefront .amx-nw-main .amx-nw-cell:nth-child(n+4) { display: none; } }
/* 1.0.10 – "Deze Air Max 1's" in een nieuwsbericht: homepagekaarten, rechtsonder (mobiel onder de tekst) */
.amx-nw-pairs .amx-nw-pair-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 14px !important; overflow: visible !important; padding: 0 !important; }
.amx-nw-pairs .amx-card { flex: initial !important; }
.amx-nw-pairs-mob { display: none; margin-top: 26px; }
@media (max-width: 1000px) {
.amx-nw-pairs-side { display: none; }
.amx-nw-pairs-mob { display: block; }
.amx-nw-pairs-mob .amx-nw-pair-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* 1.0.11 – smalle weergave (t/m 992 px, waar het thema 30 px gebruikt): halve witruimte links/rechts, 30 → 15 px */
@media (max-width: 992px) {
#main > .wf-wrap, #main .wf-wrap, .page-title .wf-wrap, .fancy-header .wf-wrap, #footer > .wf-wrap, #footer #bottom-bar > .wf-wrap { padding-left: 15px !important; padding-right: 15px !important; }
}
/* 1.0.11 – homepage-nieuws in de smalle weergave (t/m 760 px): hoofdbericht + 2 blokjes eronder (i.p.v. 4) */
@media (max-width: 760px) {
.amx-nw-homefront .amx-nw-main .amx-nw-cell:nth-child(n+4) { display: none; }
}
/* ===================================================================
1.0.12 – Nieuws gelijk aan de basis (productpagina's): zelfde lettertypen, kleuren en groottes
- tekst: Roboto 15px / 27px, #6b6f74 (koppen en vet: #273a4f)
- tussenkoppen: Roboto Condensed 26px, #273a4f, rood streepje 60×3 (zoals "Prijsvergelijking")
- kruimelpad 13px #a5a8ac, voetnoten 12px
- artikel (zoals AD.nl): tekstkolom loopt door tot de rechterkolom, alles even breed, geen gat ertussen
=================================================================== */
.amx-nw-article .amx-nw-grid { grid-template-columns: minmax(0, 1fr) var(--amx-side-w, 360px); column-gap: var(--amx-side-gap, 45px); }
.amx-nw-art, .amx-nw-prose, .amx-nw-update, .amx-nw-srcs, .amx-nw-note, .amx-nw-correct { max-width: none !important; }
.amx-nw-article .amx-nw-art { color: #6b6f74; }
.amx-nw-lede { font-size: 15px; line-height: 27px; font-weight: 700; color: #273a4f; margin-bottom: 14px; }
.amx-nw-prose { font-size: 15px; line-height: 27px; color: #6b6f74; }
.amx-nw-prose p, .amx-nw-prose ul, .amx-nw-prose ol { margin: 0 0 14px; }
.amx-nw-prose strong, .amx-nw-prose b { color: #273a4f; }
.amx-nw-prose a { color: #273a4f; text-decoration: underline; text-underline-offset: 2px; }
.amx-nw-prose a:hover { color: #da0812; }
.amx-nw-prose blockquote p { font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.35; color: #273a4f; }
.amx-nw-prose blockquote cite { font-size: 12px; }
.amx-nw-update { font-size: 15px; line-height: 1.6; color: #273a4f; }
/* Tussenkoppen Bronnen en Zo checken wij nieuws in huisstijl. De rode labelblokjes (Het laatste nieuws, Meer nieuws, Deze Air Max 1's) blijven (Ramon). */
.amx-nw-srcs h2, .amx-nw-check h2 {
position: relative; display: block; margin: 0 0 18px !important; padding: 0 0 8px !important; background: none !important;
color: #273a4f !important; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif !important; font-weight: 700;
font-size: 26px !important; line-height: 1.25 !important; text-transform: none !important; letter-spacing: 0;
}
.amx-nw-srcs h2::after, .amx-nw-check h2::after {
content: "" !important; display: block !important; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background: #da0812;
}
@media (max-width: 778px) { .amx-nw-srcs h2, .amx-nw-check h2 { font-size: 22px !important; } }
.amx-nw-srcs { margin-top: 30px; padding-top: 0; border-top: 0; }
.amx-nw-srcs ol { padding-left: 20px; font-size: 15px; line-height: 27px; color: #6b6f74; }
.amx-nw-srcs li { padding: 0; }
.amx-nw-srcs a { color: #6b6f74; }
.amx-nw-pub { color: #273a4f; }
.amx-nw-d { color: #a5a8ac; }
.amx-nw-note, .amx-nw-correct { font-size: 12px; line-height: 1.6; color: #6b6f74; }
.amx-nw-fig figcaption { font-size: 12px; line-height: 1.6; }
/* Rechterkolom */
.amx-nw-crumbs, .amx-nw-crumbs a { font-size: 13px; color: #a5a8ac !important; }
.amx-nw-artmeta, .amx-nw-date { font-size: 13px; color: #6b6f74; }
.amx-nw-net li a { font-size: 15px; line-height: 1.3; color: #273a4f; }
.amx-nw-check { padding: 18px 20px; }
.amx-nw-check p, .amx-nw-verbox p { font-size: 15px; line-height: 1.6; color: #6b6f74; }
.amx-nw-verbox b { font-size: 18px; color: #273a4f; }
.amx-nw-legend .amx-nw-ver { font-size: 13px; }
/* 1.0.13 (Ramon): "Deze Air Max 1" bovenaan in de rechterkolom; bij één paar de foto over de volle breedte van de kolom */
.amx-nw-pairs-1 .amx-nw-pair-cards { grid-template-columns: minmax(0, 1fr) !important; }
@media (max-width: 1000px) { .amx-nw-pairs-mob .amx-nw-pairs-1 .amx-nw-pair-cards { grid-template-columns: minmax(0, 1fr) !important; max-width: 360px; } }
/* 1.0.14 (Ramon): titel alleen boven de linkerkolom; de rechterkolom begint op dezelfde hoogte als de titel */
.amx-nw-grid-t { grid-template-areas: "t a" "m a"; grid-template-rows: auto 1fr; row-gap: 0; }
.amx-nw-grid-t > .amx-nw-title { grid-area: t; min-width: 0; }
.amx-nw-grid-t > .amx-nw-art, .amx-nw-grid-t > .amx-nw-main { grid-area: m; }
.amx-nw-grid-t > .amx-nw-aside { grid-area: a; }
@media (max-width: 1000px) {
.amx-nw-front .amx-nw-grid-t { grid-template-areas: "t" "m" "a"; grid-template-rows: auto; row-gap: 30px; }
.amx-nw-article .amx-nw-grid-t { grid-template-areas: "t" "a" "m"; grid-template-rows: auto; row-gap: 12px; }
.amx-nw-grid-t > .amx-nw-title { margin-bottom: 6px; }
}
/* 1.0.15 (Ramon): label (Expositie, Release …) op de foto, linksboven */
.amx-nw-figwrap { position: relative; }
.amx-nw-figwrap > .amx-nw-lbl { position: absolute; left: 12px; top: 12px; z-index: 2; font-size: 12px; padding: 3px 8px; }
.amx-nw-figwrap > .amx-nw-lbl-gerucht { background: #fff; }
/* 1.0.16: the two notes under "Bronnen" as one paragraph; empty photo spot (editors only). */
.amx-nw-art .amx-nw-note.amx-nw-correct { margin: 14px 0 0; }
.amx-nw-fig-empty { width: 100%; }
.amx-nw-fig-empty .amx-nw-img { box-sizing: border-box; width: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; padding: 20px; background: #f5f5f5; border: 1px dashed #c9ccd0; color: #6b6f74; font-size: 13px; text-align: center; }
.amx-nw-check .amx-nw-say { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #e3e5e8; font-size: 13px; line-height: 1.6; color: #6b6f74; }
/* 1.0.18: living news – last update date in the verification box + update lines in the text */
.amx-nw-verbox .amx-nw-upd-on { margin-top: 6px; font-size: 12px; color: #8a8f95; }
.amx-nw-prose .amx-nw-upd { padding: 10px 14px; background: #f4f5f7; border-left: 3px solid #da0812; font-size: 14px; }
/* ---- 1.0.20 (Ramon): productpagina ---- */
/* Foto zonder achtergrond (uitsnede; tot die klaar is mengt "multiply" een witte achtergrond weg).
1.0.44 (Ramon): rechthoekig 3:2 i.p.v. vierkant ("teveel witruimte"). De vierkante uitsnede vult het vlak (cover), boven/onder valt alleen lege ruimte weg. */
.amx-product .woocommerce-product-gallery__image { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #f5f5f5; display: flex !important; align-items: center; justify-content: center; }
.amx-product .woocommerce-product-gallery__image a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.amx-product .woocommerce-product-gallery__image img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 50%; mix-blend-mode: multiply; }
.amx-card-img img, .amx-nw-pair-cards .amx-card-img img, .related .amx-card-img img, .products .product img { mix-blend-mode: multiply; }
/* Jaartal + rode hoekband op de foto (dubbel met de specificaties, bewust) */
.amx-photo-year { position: absolute; left: 14px; bottom: 14px; z-index: 4; display: flex; align-items: center; justify-content: center; min-width: 54px; height: 34px; padding: 0 8px; border-radius: 4px; background: #1b2a3a; color: #fff; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: -.01em; pointer-events: none; }
.amx-product .woocommerce-product-gallery__image > .amx-photo-ribbon { display: block; position: absolute; top: 26px; right: -50px; z-index: 4; width: 190px; padding: 6px 0 5px; transform: rotate(45deg); background: #da0812; color: #fff; text-align: center; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.25); pointer-events: none; }
@media (max-width: 600px) {
.amx-photo-year { left: 10px; bottom: 10px; min-width: 44px; height: 28px; font-size: 15px; }
.amx-product .woocommerce-product-gallery__image > .amx-photo-ribbon { top: 18px; right: -44px; width: 160px; font-size: 13px; padding: 5px 0 4px; }
}
/* Nieuws over dit paar: bovenaan rechts, zoals de zijkolom van een nieuwsbericht */
.amx-pnews { margin: 0 0 22px; }
.amx-pnews .amx-nw-net-t { margin-bottom: 10px !important; }
.amx-pnews-card { display: block; color: inherit !important; text-decoration: none !important; }
.amx-pnews-fig { position: relative; display: block; margin-bottom: 8px; }
.amx-pnews-fig .amx-nw-img { aspect-ratio: 16 / 9; }
.amx-pnews-fig > .amx-nw-lbl { position: absolute; left: 10px; top: 10px; z-index: 2; }
.amx-pnews-card .amx-nw-h { font-size: 19px; margin-bottom: 4px; }
.amx-pnews-card:hover .amx-nw-h { color: #da0812; }
.amx-pnews-more { margin-top: 12px; }
.amx-pnews-more li { border-top: 1px solid #e3e5e8; }
.amx-pnews-more li a { display: block; padding: 8px 0; text-decoration: none; }
.amx-pnews-more li a span { display: inline-block; min-width: 52px; margin-right: 6px; font-size: 12px; color: #a5a8ac; }
/* Productieaantal + waarde in één donker blok */
.amx-prod-hero .amx-hero-part + .amx-hero-part { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); }
.amx-prod-hero .amx-val-num { font-size: 56px; }
@media (max-width: 600px) { .amx-prod-hero .amx-val-num { font-size: 44px; } }
/* Verhaal = gewoon blok (de stippellijn blijft alleen voor het lege beheerdersvoorbeeld) */
.amx-story-text p { margin: 0 0 1em; }
.amx-story-text a { color: #273a4f; text-decoration: underline; text-decoration-color: #da0812; text-underline-offset: 3px; }
/* Bronnen helemaal onderaan */
.amx-sources { clear: both; margin-top: 40px; }
.amx-sources ol { padding-left: 20px; font-size: 14px; line-height: 25px; color: #6b6f74; }
.amx-sources a { color: #6b6f74; word-break: break-word; }
.amx-sources a:hover { color: #da0812; }
.amx-src-pub { color: #273a4f; }
.amx-src-d { color: #a5a8ac; }
.amx-prod-ticks span { white-space: nowrap; }
@media (max-width: 420px) { .amx-hero-value .amx-prod-ticks { font-size: 10px; } }
/* 1.0.21 (Ramon): kleurcodes van de verificatie ook op de foto (grote tegels/homepage): wit pilletje met de eigen kleur */
.amx-nw-wide .amx-nw-meta .amx-nw-ver, .amx-nw-hp-lead .amx-nw-meta .amx-nw-ver { padding: 2px 7px 2px 5px; border-radius: 10px; background: #fff; line-height: 1.4; }
.amx-nw-wide .amx-nw-meta .amx-nw-ver-officieel, .amx-nw-hp-lead .amx-nw-meta .amx-nw-ver-officieel { color: #0f7a3d; }
.amx-nw-wide .amx-nw-meta .amx-nw-ver-bevestigd, .amx-nw-hp-lead .amx-nw-meta .amx-nw-ver-bevestigd { color: #1f5fa8; }
.amx-nw-wide .amx-nw-meta .amx-nw-ver-gerucht, .amx-nw-hp-lead .amx-nw-meta .amx-nw-ver-gerucht { color: #9a6400; }
/* 1.0.22 (Ramon): "Deze Air Max 1" in een nieuwsbericht – titel, jaartal en bedrag op de productfoto, zonder "Nike Air Max 1" */
.amx-npc .amx-card-img { margin-bottom: 0; }
.amx-npc .amx-card-img img { box-sizing: border-box; padding-bottom: 22%; object-position: 50% 40%; }
.amx-npc-over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.amx-npc-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.15; color: #1b2a3a; }
.amx-npc:hover .amx-npc-t { color: #da0812; }
.amx-npc-row { display: flex; align-items: center; gap: 8px; }
.amx-npc-year { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 28px; padding: 0 6px; border-radius: 4px; background: #1b2a3a; color: #fff; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; line-height: 1; }
.amx-npc-val { display: inline-flex; align-items: center; height: 28px; padding: 0 9px; border-radius: 4px; background: #fff; color: #1b2a3a; font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 0 0 1px #e3e5e8 inset; }
.amx-nw-pairs:not(.amx-nw-pairs-1) .amx-npc-t { font-size: 14px; }
.amx-nw-pairs:not(.amx-nw-pairs-1) .amx-npc-over { padding: 0 8px 8px; gap: 5px; }
.amx-nw-pairs:not(.amx-nw-pairs-1) .amx-npc-year, .amx-nw-pairs:not(.amx-nw-pairs-1) .amx-npc-val { height: 22px; font-size: 12px; min-width: 0; padding: 0 5px; }
.amx-nw-pairs:not(.amx-nw-pairs-1) .amx-npc .amx-card-img img { padding-bottom: 30%; }
@media (max-width: 600px) { .amx-nw-pairs-mob .amx-npc-t { font-size: 13px; } .amx-nw-pairs-mob .amx-npc-over { padding: 0 6px 6px; gap: 4px; } .amx-nw-pairs-mob .amx-npc-year, .amx-nw-pairs-mob .amx-npc-val { height: 20px; font-size: 11px; padding: 0 4px; min-width: 0; } }
/* 1.0.24 (Ramon): nieuwsartikel op tablet/mobiel één kolom. De vaste 360px-rechterkolom (desktop) bleef ook ≤1000px staan,
waardoor de tekst in een smalle strook links belandde en rechts een lege kolom overbleef. */
@media (max-width: 1000px) {
.amx-nw-article .amx-nw-grid, .amx-nw-article .amx-nw-grid-t { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.amx-nw-article .amx-nw-grid > * { min-width: 0; }
}
/* 1.0.26 (Ramon): menubalk past zonder zijwaarts scrollen. JS (fitBar) zet alleen zoveel stappen als nodig:
1 kleiner lettertype, 2 ook Heren/Dames/Kids weg, 3 ook Friends & Family/Hyperstrike weg. (In het menu ☰ staan ze nog.) */
.amx-hdr .amx-hdr-list.amx-fit-1, .amx-hdr .amx-hdr-list.amx-fit-2, .amx-hdr .amx-hdr-list.amx-fit-3 { gap: 16px; }
.amx-hdr .amx-hdr-list.amx-fit-1 a, .amx-hdr .amx-hdr-list.amx-fit-2 a, .amx-hdr .amx-hdr-list.amx-fit-3 a { font-size: 13px; }
.amx-hdr .amx-hdr-list.amx-fit-2 a.amx-fit-g, .amx-hdr .amx-hdr-list.amx-fit-3 a.amx-fit-g, .amx-hdr .amx-hdr-list.amx-fit-3 a.amx-fit-f { display: none; }
/* 1.0.27 (Ramon): "Deze Air Max 1" met één paar – kaart blijft vierkant, schoen groter zodat het vlak vol oogt
(minder ruimte onderin, schaal 1.28 rond 42% hoogte; blijft vrij van titel/jaartal). */
.amx-nw-pairs-1 .amx-npc .amx-card-img img { padding-bottom: 14%; transform: scale(1.28); transform-origin: 50% 42%; }
/* 1.0.28 (Ramon): basic layout for all other pages = identical to /nieuws and the homepage.
Result pages (Trending / Populair / Nieuw / categories / search) and normal pages. */
body.amx-std .page-title { display: none !important; }
body.amx-std #main { padding-top: 30px !important; }
body.amx-std #main .wf-container-main { display: grid !important; grid-template-columns: minmax(0, 1fr) var(--amx-side-w, 360px) !important; grid-template-areas: "t a" "m a" !important; grid-template-rows: auto 1fr !important; column-gap: var(--amx-side-gap, 45px); row-gap: 0; align-items: start; }
body.amx-std #main.sidebar-none .wf-container-main { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "t" "m" !important; }
body.amx-std #main .wf-container-main > .amx-rhead { grid-area: t !important; min-width: 0; }
body.amx-std #main .wf-container-main > #content, body.amx-std #main .wf-container-main > .content { grid-area: m !important; width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; min-width: 0; }
body.amx-std #main .wf-container-main > #sidebar, body.amx-std #main .wf-container-main > aside.sidebar { grid-area: a !important; width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; min-width: 0; }
body.amx-std #sidebar::before, body.amx-std #sidebar::after, body.amx-std .sidebar-divider-vertical .sidebar::before { display: none !important; border: 0 !important; }
body.amx-std #sidebar .sidebar-content { padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 22px; }
body.amx-std #sidebar .widget { margin: 0 !important; padding: 0 !important; border: 0 !important; }
body.amx-std #sidebar .amx-std-crumbs { margin: 0 0 -8px; }
/* Widget titles = the red label blocks of the /nieuws right column ("HET LAATSTE NIEUWS"). */
body.amx-std #sidebar .widget-title { display: inline-block; margin: 0 0 10px !important; padding: 3px 10px !important; background: #da0812; color: #fff !important; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif !important; font-weight: 700; font-size: 18px !important; line-height: 1.3 !important; text-transform: uppercase; letter-spacing: 0; }
body.amx-std .wc-sidebar-toggle { display: none !important; }
.amx-std-crumbs-fb { display: none !important; }
body.amx-std #main.sidebar-none .amx-std-crumbs-fb { display: flex !important; margin: 0 0 10px; }
/* Title: same as /nieuws (32px, red line 60×3, 18px below) – pages and result pages. */
body.amx-std .amx-std-title { margin: 0 0 18px !important; }
body.amx-std #content > .amx-std-title:first-child, body.amx-std #content > .amx-std-crumbs-fb + .amx-std-title { margin-top: 0 !important; }
body.amx-std .amx-rhead { display: block; margin: 0 0 30px; padding: 0; border: 0; }
body.amx-std .amx-rhead-main { display: block; }
body.amx-std .amx-rhead-title { margin: 0 0 18px; }
body.amx-std .amx-rhead-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; }
body.amx-std .amx-rhead-sub { flex: 1 1 320px; }
@media (max-width: 1000px) {
body.amx-std #main .wf-container-main { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "t" "m" "a" !important; grid-template-rows: auto !important; row-gap: 30px; }
body.amx-std #main .wf-container-main > .amx-rhead { margin-bottom: 0; }
/* The7 turns the sidebar into a slide-in panel on small screens; here it simply sits below the content (like /nieuws). */
body.amx-std #sidebar { position: static !important; transform: none !important; left: auto !important; right: auto !important; top: auto !important; height: auto !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; box-shadow: none !important; background: transparent !important; transition: none !important; z-index: auto !important; }
body.amx-std #sidebar .sidebar-content { height: auto !important; overflow: visible !important; }
body.amx-std #sidebar .amx-std-crumbs { display: none; }
}
@media (max-width: 778px) { body.amx-std .amx-rhead-title { font-size: 26px; } }
/* 1.0.29 (Ramon): result pages – filters at the top of the page, right column = news + most searched pairs;
no explaining sentence and no "N paren" under the title. */
body.amx-std .amx-rhead { margin: 0 !important; }
.amx-fbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 30px; margin: 0 0 24px; padding: 16px 20px 18px; border: 1px solid #e8e9eb; border-radius: 4px; background: #fafafa; }
.amx-fbar .amx-fbar-item { margin: 0 !important; padding: 0 !important; border: 0 !important; min-width: 0; }
.amx-fbar .amx-fbar-price { flex: 1.4 1 300px; }
.amx-fbar .amx-fbar-attr { flex: 1 1 240px; }
.amx-fbar .amx-fbar-active { flex: 1 1 100%; order: 9; }
.amx-fbar .amx-fbar-t { margin: 0 0 10px !important; padding: 0 !important; background: none !important; color: #1b2a3a !important; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif !important; font-weight: 700; font-size: 13px !important; line-height: 1.2 !important; text-transform: uppercase; letter-spacing: .04em; }
.amx-fbar .price_slider_wrapper { padding-top: 4px; }
.amx-fbar .price_slider { margin: 0 0 14px !important; }
.amx-fbar .price_slider_amount { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.amx-fbar .price_slider_amount .clear { display: none; }
.amx-fbar .price_label { margin: 0 !important; color: #6b6f74; font-size: 14px; }
.amx-fbar .woocommerce-widget-layered-nav-dropdown { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.amx-fbar .woocommerce-widget-layered-nav-dropdown .select2-container { flex: 1 1 160px; width: auto !important; min-width: 0; }
.amx-fbar .woocommerce-widget-layered-nav-dropdown button, .amx-fbar .woocommerce-widget-layered-nav-dropdown__submit { margin: 0 !important; }
.amx-fbar ul { margin: 0 !important; padding: 0 !important; }
body.amx-std-results #sidebar .amx-std-side { display: flex; flex-direction: column; gap: 26px; }
body.amx-std-results #sidebar .amx-pnews { margin: 0; }
body.amx-std-results #sidebar .amx-pnews-all { margin-top: 10px; }
@media (max-width: 1000px) {
body.amx-std-results #sidebar .amx-std-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; align-items: start; }
body.amx-std .amx-rhead .amx-std-title { margin-bottom: 6px !important; } /* like /nieuws: grid row-gap 30 + 6 */
}
@media (max-width: 600px) {
.amx-fbar { padding: 14px 14px 16px; gap: 16px; }
body.amx-std-results #sidebar .amx-std-side { grid-template-columns: minmax(0, 1fr); }
body.amx-std-results #sidebar .amx-std-pairs .amx-nw-pair-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px 8px !important; }
body.amx-std-results #sidebar .amx-std-pairs .amx-npc-t { font-size: 12px; }
body.amx-std-results #sidebar .amx-std-pairs .amx-npc-over { padding: 0 5px 5px; gap: 3px; }
body.amx-std-results #sidebar .amx-std-pairs .amx-npc-year, body.amx-std-results #sidebar .amx-std-pairs .amx-npc-val { height: 19px; font-size: 10.5px; padding: 0 4px; min-width: 0; }
}
/* 1.0.30: product page right column - The7 makes .summary a wrapping flex column; the news card
height was computed on a narrower width so "Waarde" fell over the news title/date. Block layout. */
.amx-product .summary.entry-summary { display: block !important; height: auto !important; min-height: 0 !important; }
.amx-product .summary.entry-summary > :not(.assistive-text) { flex: none !important; float: none !important; }
/* 1.0.31 (Ramon): product page = same grid as a news article. Title + photo + everything else in the
left column, right column 360px (like the news sidebar) that starts at the height of the title
(breadcrumbs on the title line, "Nieuws over dit paar" directly below). Below 1000px: stacked. */
@media (min-width: 1001px) {
.amx-product div.product { display: grid !important; grid-template-columns: minmax(0, 1fr) var(--amx-side-w, 360px); column-gap: var(--amx-side-gap, 45px); row-gap: 0; align-items: start; }
.amx-product div.product::before, .amx-product div.product::after { display: none !important; content: none !important; }
.amx-product div.product > * { grid-column: 1; width: auto !important; max-width: none !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; min-width: 0; }
.amx-product div.product > .summary.entry-summary { grid-column: 2; grid-row: 1 / span 30; align-self: start; padding: 0 !important; margin-top: 0 !important; }
.amx-product div.product > .amx-product-title { grid-row: 1; }
.amx-product .amx-prod-crumbs { min-height: 18px; margin: 0 0 14px; }
}
/* 1.0.32 (Ramon): "Gerelateerde AM 1's" in de rechterkolom (kaarten zoals "Deze Air Max 1's" in een nieuwsbericht).
Het oude blok onder de pagina is weg (fallback: verbergen als het thema het toch toont). */
.amx-product div.product > section.related.products { display: none !important; }
.amx-product .summary .amx-prel { margin-top: 30px; }
.amx-product .summary .amx-prel .amx-nw-net-t { margin-bottom: 10px !important; }
@media (max-width: 1000px) {
.amx-product .summary .amx-prel .amx-nw-pair-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px 8px !important; }
.amx-product .summary .amx-prel .amx-npc-t { font-size: 13px; }
.amx-product .summary .amx-prel .amx-npc-over { padding: 0 6px 6px; gap: 4px; }
.amx-product .summary .amx-prel .amx-npc-year, .amx-product .summary .amx-prel .amx-npc-val { height: 20px; font-size: 11px; padding: 0 4px; min-width: 0; }
}
/* 1.0.32 (Ramon): homepageblok 2 identiek onderaan elke productpagina, vlak boven de footer, over de volle breedte. */
.amx-prod-hblocks { clear: both; width: 100%; margin: 60px 0 10px; }
.amx-prod-hblocks .amx-hblock + .amx-hblock { margin-top: 44px; }
@media (max-width: 778px) { .amx-prod-hblocks { margin-top: 40px; } }
/* 1.0.32 (Ramon, variant F3): "Hoe zeldzaam is hij?" – grijs vlak + kop met rood streepje (zoals "Zo checken wij nieuws")
+ stippellijn van de homepageblokken; twee witte tegels met blokjesbalk; zeldzaamheid in 4 vinkjes. Vervangt het donkere blok. */
.amx-rar { margin: 22px 0 0; padding: 24px 22px 22px; background: #f4f5f7; } /* F3 (Ramon): grijs vlak zoals "Zo checken wij nieuws", stippellijn om de tegels */
.amx-rar .amx-rar-h { position: relative; margin: 0 0 18px !important; padding: 0 0 10px !important; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif !important; font-weight: 700; font-size: 26px !important; line-height: 1.2 !important; color: #273a4f; }
.amx-rar .amx-rar-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background: #da0812; }
.amx-rar-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.amx-rar-tiles.amx-rar-one { grid-template-columns: minmax(0, 1fr); }
.amx-rar-t { background: #fff; border: 2px dashed rgba(27,42,58,.25); border-radius: 6px; padding: 14px 14px 12px; min-width: 0; }
.amx-rar-k { font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6b6f74; }
.amx-rar-n { margin: 6px 0 4px; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 32px; line-height: 1; color: #1b2a3a; white-space: nowrap; }
.amx-rar-n small { font-size: 15px; color: #6b6f74; }
.amx-rar .amx-rar-sub { margin: 0 0 10px !important; font-size: 12px !important; line-height: 1.4 !important; color: #6b6f74; }
.amx-rar-sub b { color: #da0812; }
.amx-rar-seg { display: flex; gap: 3px; }
.amx-rar-seg i { flex: 1; height: 5px; border-radius: 2px; background: #e9eaec; }
.amx-rar-seg i.on { background: #da0812; }
.amx-rar .amx-rar-note { margin: 14px 2px 0 !important; font-size: 14px !important; line-height: 1.7 !important; color: #6b6f74; }
.amx-rar-lv { list-style: none !important; margin: 14px 0 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.amx-rar-lv li { display: flex; align-items: flex-start; gap: 8px; margin: 0 !important; padding: 0 !important; font-size: 14px; line-height: 1.45; color: #a5a8ac; }
.amx-rar-lv li::before { display: none !important; content: none !important; }
.amx-rar-lv svg { flex: none; margin-top: 2px; color: #c9ccd0; }
.amx-rar-lv li.is-on { font-weight: 700; }
.amx-rar-l1.is-on, .amx-rar-l1.is-on svg { color: #0f7a3d; }
.amx-rar-l2.is-on, .amx-rar-l2.is-on svg { color: #1f5fa8; }
.amx-rar-l3.is-on, .amx-rar-l3.is-on svg { color: #6a3fa0; }
.amx-rar-l4.is-on, .amx-rar-l4.is-on svg { color: #9a6400; }
.amx-rar-l5.is-on, .amx-rar-l5.is-on svg { color: #da0812; }
.amx-rar-n .amx-rar-est { display: block; font-size: 21px; line-height: 1.1; white-space: normal; min-height: 32px; }
@media (max-width: 1000px) { .amx-rar { max-width: 520px; } }
/* 1.0.33 (Ramon): kruimelpad + "Wil je informatie wijzigen?" naast de titel; rechterkolom begint precies op de
bovenkant van de foto ("Hoe zeldzaam is hij?" eerst, daarna het nieuws). "Waarde vanaf" boven het blok is weg. */
.amx-prod-head { min-width: 0; }
.amx-prod-head .amx-prod-crumbs { margin: 0 0 4px; }
.amx-prod-edit { position: relative; margin: 0 !important; padding: 0 !important; font-size: 12px !important; line-height: 1.4 !important; color: #8a8f95; }
.amx-prod-edit .amx-soon { color: #8a8f95 !important; text-decoration: underline; text-underline-offset: 2px; cursor: help; }
.amx-prod-edit .amx-soon:hover, .amx-prod-edit .amx-soon:focus { color: #da0812 !important; outline: none; }
.amx-soon-tip { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; padding: 6px 10px; border-radius: 4px; background: #1b2a3a; color: #fff; font-size: 12px; line-height: 1.3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.18); opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .15s, transform .15s; pointer-events: none; }
.amx-soon-tip::before { content: ""; position: absolute; left: 18px; top: -5px; border: 5px solid transparent; border-top: 0; border-bottom-color: #1b2a3a; }
.amx-soon:hover + .amx-soon-tip, .amx-soon:focus + .amx-soon-tip { opacity: 1; visibility: visible; transform: none; }
.amx-product .summary .amx-rar { margin-top: 0; }
.amx-product .summary .amx-pnews { margin-top: 30px; }
@media (min-width: 1001px) {
.amx-product div.product > .amx-prod-head { grid-column: 2; grid-row: 1; align-self: start; }
.amx-product div.product > .summary.entry-summary { grid-row: 2 / span 30; }
.amx-product div.product > .woocommerce-product-gallery { grid-row: 2; }
}
@media (max-width: 1000px) { .amx-prod-head { margin: -8px 0 16px; } }
/* 1.0.33 (Ramon): Prijsvergelijking, Waarde per maat en Validatie naast elkaar over de volle breedte, gelijke kolommen.
Raster productpagina: rij 1 titel | kruimelpad, rij 2 foto | rechterkolom, rij 3 verhaal, rij 4 specificaties,
rij 5 = vulrij (1fr: is de rechterkolom langer, dan komt de extra ruimte hier en niet tussen foto/verhaal/specs),
rij 6 de drie kolommen en daarna de bronnen over de volle breedte. */
.amx-columns.amx-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 45px; align-items: start; }
.amx-columns.amx-columns-3 > .amx-block { margin: 0 !important; min-width: 0; }
.amx-columns-3 .amx-checklist .amx-logo-box { max-width: 78px; height: 28px; }
.amx-columns-3 .amx-checklist .amx-logo { max-width: 78px; max-height: 24px; }
@media (min-width: 1001px) {
.amx-product div.product { grid-template-rows: auto auto auto auto 1fr; }
.amx-product div.product > .summary.entry-summary { grid-row: 2 / 6; }
.amx-product div.product > .amx-story { grid-row: 3; }
.amx-product div.product > .amx-specs { grid-row: 4; }
.amx-product div.product > .amx-columns { grid-column: 1 / -1; grid-row: 6; }
}
@media (max-width: 1000px) {
.amx-columns.amx-columns-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 701px) and (max-width: 1000px) {
.amx-columns.amx-columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.amx-columns.amx-columns-3 > .amx-checkups { grid-column: 1 / -1; }
}
/* 1.0.33 (Ramon): bronnen onder de afbeeldingen (homepageblok), over de volle breedte in 2 gelijke kolommen. */
.amx-product .amx-sources { clear: both; margin: 50px 0 10px; }
.amx-product .amx-sources ol { column-count: 2; column-gap: 45px; }
.amx-product .amx-sources ol li { break-inside: avoid; }
@media (max-width: 778px) { .amx-product .amx-sources ol { column-count: 1; } }
/* 1.0.33: tabellen passen in een derde kolom (370 px op 1440) */
.amx-columns-3 .amx-table th, .amx-columns-3 .amx-table td { padding-left: 5px !important; padding-right: 5px !important; font-size: 14px; }
.amx-columns-3 .amx-offers .button, .amx-columns-3 .amx-offers a.button { padding: 6px 9px !important; font-size: 12px !important; white-space: nowrap; }
.amx-columns-3 .amx-shop-logo .amx-logo { max-width: 72px; max-height: 20px; }
/* 1.0.33 (Ramon): adres en copyright-regel in hetzelfde lettertype, dezelfde grootte en kleur als de kleine lettertjes eronder. */
#bottom-bar .amx-addr, #bottom-bar .bottom-text-block, #bottom-bar .bottom-text-block p { font-family: Roboto, Helvetica, Arial, Verdana, sans-serif !important; font-size: 11px !important; line-height: 1.65 !important; letter-spacing: .01em; font-weight: 400 !important; color: rgba(255,255,255,.62) !important; }
#bottom-bar .bottom-text-block p { margin: 0 !important; }
@media (max-width: 600px) { #bottom-bar .amx-addr, #bottom-bar .bottom-text-block, #bottom-bar .bottom-text-block p { font-size: 10.5px !important; } }
/* 1.0.35 (Ramon): geen witruimte naast het nieuws op de homepage. De rechterkolom is zo hoog als de tegels:
een aantal koppen (in de browser ingekort), direct daaronder "Al het nieuws", onderaan een compact
"Zo checken wij nieuws"-blok. De verificatielabels staan overal naast elkaar. */
.amx-nw-legend { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.amx-nw-check { padding: 14px 18px; }
.amx-nw-check h2 { font-size: 21px !important; margin: 0 0 10px !important; padding: 0 0 6px !important; }
.amx-nw-check p { font-size: 14px; line-height: 1.5; }
.amx-nw-homefront .amx-nw-aside { gap: 16px; }
.amx-nw-homefront .amx-nw-all { margin-top: -10px; }
.amx-nw-homefront .amx-nw-check { margin-top: auto; }
@media (min-width: 1001px) { .amx-nw-homefront .amx-nw-aside { align-self: stretch; } }
@media (max-width: 1000px) {
.amx-nw-homefront .amx-nw-net li:nth-child(n+6) { display: none; }
.amx-nw-homefront .amx-nw-all { margin-top: -6px; }
}
/* 1.0.35 (Ramon): /nieuws = blok A, blok B (breed + 1, dan 1 + breed), de 3 meest gezochte Air Max 1's, blok A. */
.amx-nw-main > .amx-nw-trend { grid-column: 1 / -1; min-width: 0; margin: 4px 0 6px; }
.amx-nw-trend .amx-row-title { margin: 0 0 16px; }
.amx-nw-trend .amx-cards.amx-nw-trend-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; padding: 0; scroll-snap-type: none; }
.amx-nw-trend .amx-nw-trend-cards .amx-card { flex: initial; }
@media (max-width: 600px) { .amx-nw-trend .amx-cards.amx-nw-trend-cards { gap: 16px 8px; } }
/* 1.0.36 (Ramon): doorscrollen i.p.v. doorklikken (nieuws + resultaatpagina's). De paginalinks blijven in de HTML voor zoekmachines. */
.amx-inf-hidden { display: none !important; }
.amx-inf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 60px; margin: 24px 0 10px; color: #6b6f74; font-size: 14px; }
.amx-inf .amx-inf-spin, .amx-inf .amx-inf-txt { display: none; }
.amx-inf.is-loading .amx-inf-spin { display: block; width: 26px; height: 26px; border: 3px solid #e3e5e8; border-top-color: #da0812; border-radius: 50%; animation: amx-inf-rot .8s linear infinite; }
.amx-inf.is-loading .amx-inf-txt { display: block; }
@keyframes amx-inf-rot { to { transform: rotate(360deg); } }
.amx-inf-btn { padding: 10px 22px; border: 0; background: #da0812; color: #fff; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; cursor: pointer; }
.amx-inf-btn:hover { background: #b0060e; }
@media (prefers-reduced-motion: reduce) { .amx-inf.is-loading .amx-inf-spin { animation-duration: 2s; } }
/* 1.0.37 (Ramon): resultaatpagina's – geen zichtbare titel (het menu-item is al onderstreept; de h1 blijft voor
zoekmachines en schermlezers) en één compacte balk die bovenaan blijft staan: snelle filters, sortering en weergave. */
body.amx-std-results .amx-rhead { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
body.amx-std-results #main .wf-container-main { grid-template-areas: "m a" !important; grid-template-rows: auto !important; }
body.amx-std-results #main.sidebar-none .wf-container-main { grid-template-areas: "m" !important; }
@media (max-width: 1000px) { body.amx-std-results #main .wf-container-main { grid-template-areas: "m" "a" !important; } }
body.amx-std-results #page { overflow: clip !important; } /* sticky works only without a scroll container around it */
body.amx-std-results .woocommerce-result-count, body.amx-std-results .woocommerce-ordering { display: none !important; }
body.amx-std-results.amx-tbar-on .switcher-wrap { display: none !important; }
.amx-tbar { position: sticky; top: 0; z-index: 60; margin: 0 0 24px; padding: 10px 0; background: #fff; border-bottom: 1px solid #e8e9eb; }
body.admin-bar .amx-tbar { top: 32px; }
@media (max-width: 782px) { body.admin-bar .amx-tbar { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .amx-tbar { top: 0; } }
.amx-tbar-f { display: flex; align-items: center; gap: 8px 14px; margin: 0; }
.amx-tbar-filters { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.amx-tbar-r { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.amx-tbar .amx-tsel { -webkit-appearance: none; appearance: none; box-sizing: border-box; height: 36px !important; min-height: 0 !important; margin: 0 !important; padding: 0 24px 0 10px !important; flex: 1 1 0; min-width: 0; max-width: 200px; width: auto !important; border: 1px solid #d9dce0 !important; border-radius: 4px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231b2a3a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 6px !important; box-shadow: none !important; color: #1b2a3a !important; font-family: Roboto, Helvetica, Arial, sans-serif !important; font-size: 14px !important; line-height: 34px !important; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.amx-tbar .amx-tsel:hover, .amx-tbar .amx-tsel:focus { border-color: #1b2a3a !important; outline: none; }
.amx-tbar .amx-tsel.is-set { border-color: #da0812 !important; color: #da0812 !important; font-weight: 700; }
.amx-tbar .amx-tsort { flex: 0 0 200px; min-width: 0; max-width: 200px; width: 200px !important; font-weight: 700; }
.amx-tbar-clear { flex: 0 0 auto; color: #da0812 !important; font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.amx-tbar-clear::before { content: "× "; }
@media (max-width: 1000px) { .amx-tbar .amx-tsort { flex: 0 0 auto; width: auto !important; max-width: 200px; } }
.amx-tbar-view:empty { display: none; }
.amx-tbar-view .view-mode-switcher { display: flex !important; gap: 0; margin: 0 !important; float: none !important; }
.amx-tbar-view .view-mode-switcher a { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 36px; margin: 0 !important; border: 1px solid #d9dce0; background: #fff; color: #1b2a3a; }
.amx-tbar-view .view-mode-switcher a + a { border-left: 0; }
.amx-tbar-view .view-mode-switcher a.switcher-active { background: #1b2a3a; border-color: #1b2a3a; color: #fff; }
.amx-tbar-view .view-mode-switcher a svg { width: 14px; height: 14px; fill: currentColor; }
.amx-tbar-view .view-mode-switcher a i { font-size: 14px; color: inherit; }
.amx-tbar-view .view-mode-switcher .filter-popup { display: none !important; }
/* Small screens: one compact row that scrolls sideways (filters, then sorting); grid/list stays on the right. */
@media (max-width: 1000px) {
.amx-tbar-f { gap: 8px; }
.amx-tbar-filters { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.amx-tbar-filters::-webkit-scrollbar { display: none; }
.amx-tbar .amx-tsel { flex: 0 0 auto; min-width: 0; max-width: 170px; }
}
@media (max-width: 600px) {
.amx-tbar { padding: 8px 0; margin-bottom: 16px; }
.amx-tbar-f { flex-wrap: wrap; }
.amx-tbar-filters { flex: 1 1 100%; order: 1; }
.amx-tbar-r { flex: 1 1 100%; order: 2; }
.amx-tbar .amx-tsort { flex: 1 1 auto; max-width: none; width: auto !important; }
.amx-tbar .amx-tsel { font-size: 13px !important; height: 34px !important; line-height: 32px !important; }
}
/* 1.0.38 (Ramon): de filterbalk staat direct onder het hoofdmenu (derde rij van de header), op dezelfde breedte
als het menu, en blijft net als het menu bovenaan staan. */
.amx-hdr-r3 { border-top: 1px solid #efefef; background: #fff; }
.amx-hdr .amx-hdr-r3in { box-sizing: border-box; width: var(--amx-cw, min(1200px, calc(100% - 40px))); max-width: 100%; margin: 0 auto; }
.amx-hdr .amx-tbar { position: static !important; top: auto !important; margin: 0 !important; padding: 9px 0 !important; border: 0 !important; background: transparent; }
@media (max-width: 900px) { .amx-hdr .amx-hdr-r3in { width: auto; padding: 0 12px; } }
/* 1.0.38 (Ramon): paginanaam als grote, transparante, 90° gedraaide titel links naast de inhoud – alleen op grote schermen. */
@media (min-width: 1400px) {
body.amx-std-results.amx-vtitle #main .wf-container-main { position: relative; }
body.amx-std-results.amx-vtitle #main .wf-container-main > .amx-rhead { position: absolute !important; top: 0 !important; right: calc(100% + 28px) !important; left: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clip: auto !important; white-space: nowrap !important; pointer-events: none; user-select: none; }
body.amx-std-results.amx-vtitle .amx-rhead .amx-rhead-title { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 !important; padding: 0 !important; color: rgba(27, 42, 58, .09) !important; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif !important; font-weight: 700 !important; font-size: clamp(64px, calc((100vw - 1200px) / 2 - 44px), 120px) !important; line-height: 1 !important; letter-spacing: .01em; text-transform: uppercase; }
body.amx-std-results.amx-vtitle .amx-rhead .amx-rhead-title::after { display: none !important; }
}
/* 1.0.40 (Ramon): zoeken toont sneakers én nieuws – eerst het nieuws (tegels zoals /nieuws), dan de sneakers. */
.amx-srch-news { margin: 0 0 34px; }
.amx-srch-news .amx-nw-net-t, .amx-srch-h { margin: 0 0 14px !important; }
.amx-srch-intro { margin: 0 0 16px; color: #6b6f74; font-size: 15px; }
.amx-srch-news .amx-nw-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .amx-srch-news .amx-nw-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .amx-srch-news .amx-nw-main { grid-template-columns: minmax(0, 1fr); } }
/* ---- 1.0.45 (Ramon): goedkoopste prijs onder de tegels van "Hoe zeldzaam is hij?" ---- */
.amx-rar .amx-rar-cheap { margin: 14px 2px 0 !important; font-size: 14px !important; line-height: 1.6 !important; color: #273a4f; }
.amx-rar .amx-rar-cheap a { color: #da0812; font-weight: 700; text-decoration: none; }
.amx-rar .amx-rar-cheap a:hover { text-decoration: underline; }
.amx-rar .amx-rar-cheap + .amx-rar-note { margin-top: 6px !important; }
/* ---- 1.0.45 (Ramon): VASTE WITRUIMTE-REGELS productpagina (claude/whitespace-rules.md) ----
"Er zit teveel witruimte tussen." Tussen twee blokken onder elkaar staat overal precies 30 px,
links én rechts (= de ruimte tussen "Hoe zeldzaam is hij?" en "Gerelateerde AM 1's").
Titel -> eerste blok blijft 18 px; kolommen naast elkaar 45 px. */
.amx-product div.product > .woocommerce-product-gallery { margin-bottom: 30px !important; }
.amx-product div.product > .amx-block,
.amx-product div.product > .amx-columns { margin-top: 0 !important; margin-bottom: 30px !important; }
.amx-product div.product > .amx-story { padding-top: 0; }
.amx-product div.product > .amx-block > h2:first-child,
.amx-product div.product > .amx-block > .amx-story-title:first-child { margin-top: 0 !important; }
.amx-product div.product > .summary { margin-bottom: 30px !important; }
.amx-product .summary > [class*="amx-"] + [class*="amx-"] { margin-top: 30px !important; }
.amx-product .amx-prod-hblocks { margin: 0 !important; }
.amx-product .amx-prod-hblocks + .amx-sources, .amx-product .amx-sources { margin: 30px 0 0 !important; }
.amx-product .amx-columns.amx-columns-3 > .amx-block > h2:first-child { margin-top: 0 !important; }
/* 1.0.45 (Ramon): "Verschil met de reguliere versie" onder het verhaal, eigen kop; 30 px tussen tekst en kop (witruimte-regel). */
.amx-product .amx-story .amx-ff-title { margin: 30px 0 0 !important; }
.amx-product .amx-story .amx-story-text > p:last-child { margin-bottom: 0; }
/* ---- 1.0.46 (Ramon): Validatie in de rechterkolom onder "Gerelateerde AM 1's", stijl van "Hoe zeldzaam is hij?" ---- */
.amx-columns.amx-columns-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 45px; align-items: start; }
.amx-columns.amx-columns-2 > .amx-block { margin: 0 !important; min-width: 0; }
.amx-product .amx-columns.amx-columns-2 > .amx-block > h2:first-child { margin-top: 0 !important; }
.amx-columns-2 .amx-table th, .amx-columns-2 .amx-table td { padding-left: 5px !important; padding-right: 5px !important; font-size: 14px; }
@media (max-width: 700px) { .amx-columns.amx-columns-2 { grid-template-columns: minmax(0, 1fr); } }
.amx-val .amx-checklist, .amx-columns .amx-val .amx-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px 12px; margin: 14px 0 0; }
.amx-val .amx-checklist li { min-height: 34px; padding: 2px 0; font-size: 14px; }
.amx-val .amx-checklist .amx-logo-box { max-width: 96px; height: 26px; }
.amx-val .amx-checklist .amx-logo { max-width: 96px; max-height: 22px; }
.amx-val .amx-checklist .amx-todo, .amx-val .amx-checklist .amx-no { opacity: .55; }
@media (max-width: 1000px) { .amx-val { max-width: 520px; } }
/* ---- 1.0.48 (Ramon): VASTE REGEL links – "Wanneer iets een actieve link is, dan moet er alleen een streepje onder staan.
Verder de normale font kleur." Geldt voor alle tekstlinks op product- en nieuwspagina's (verhaal, specificaties,
bronnen, blokken in de rechterkolom, nieuwstekst). Knoppen, kaarten en logo's vallen hier niet onder. ---- */
.amx-product .amx-story-text a, .amx-product .amx-specs a, .amx-product .amx-sources a, .amx-product .amx-rar a,
.amx-product .amx-table a:not(.button), .amx-nw-prose a, .amx-nw-art .amx-nw-sources a {
color: inherit !important; font-weight: inherit; text-decoration: underline !important; text-decoration-color: #da0812 !important;
text-decoration-thickness: 1px !important; text-underline-offset: 3px; transition: text-decoration-thickness .15s;
}
.amx-product .amx-story-text a:hover, .amx-product .amx-specs a:hover, .amx-product .amx-sources a:hover, .amx-product .amx-rar a:hover,
.amx-product .amx-table a:not(.button):hover, .amx-nw-prose a:hover, .amx-nw-art .amx-nw-sources a:hover {
color: inherit !important; text-decoration-thickness: 2px !important;
}
.amx-product .amx-specs a .amx-usd { color: inherit; }
/* ---- 1.0.49 (Ramon): eigen placeholder (lijntekening AM1) voor paren zonder foto, een beetje transparant ---- */
img[src*="/placeholder"], img[src*="woocommerce-placeholder"] { opacity: .35; mix-blend-mode: multiply; }
.amx-product .woocommerce-product-gallery__image img[src*="/placeholder"] { object-fit: contain !important; padding: 6% 8%; box-sizing: border-box; }
/* 1.0.49 (Ramon): "Geef placeholders dezelfde formaten images en regels mee" – WooCommerce zet een paar zonder foto in
.woocommerce-product-gallery__image--placeholder; die krijgt nu precies dezelfde opmaak: 3:2, grijs vlak, jaartal én rode hoekband. */
.amx-product .woocommerce-product-gallery__image--placeholder { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #f5f5f5; display: flex !important; align-items: center; justify-content: center; width: 100%; }
.amx-product .woocommerce-product-gallery__image--placeholder img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain !important; padding: 6% 8%; box-sizing: border-box; }
.amx-product .woocommerce-product-gallery__image--placeholder > .amx-photo-ribbon { display: block; position: absolute; top: 26px; right: -50px; z-index: 4; width: 190px; padding: 6px 0 5px; transform: rotate(45deg); background: #da0812; color: #fff; text-align: center; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.25); pointer-events: none; }
@media (max-width: 600px) { .amx-product .woocommerce-product-gallery__image--placeholder > .amx-photo-ribbon { top: 18px; right: -44px; width: 160px; font-size: 13px; padding: 5px 0 4px; } }
/* ---- 1.0.50 (Ramon): alle schoenen even groot in het kader, zoals de DOAF 'Tokyo' ----
Uitsnedes zijn al genormaliseerd (schoen = 89 % van de breedte, neus naar rechts sinds cutout-ALGO 2).
De placeholder-tekening beslaat maar 66,5 % van zijn eigen beeld; schalen zodat hij net zo breed staat. */
img[src*="/placeholder"] { transform: scale(1.34); transform-origin: 50% 50%; }
.amx-product .woocommerce-product-gallery__image--placeholder img,
.amx-product .woocommerce-product-gallery__image img[src*="/placeholder"] { padding: 0 !important; object-fit: contain !important; transform: scale(1.4); }
/* ---- 1.0.51 (Ramon): "Los de witruimte op" – Prijsvergelijking en Waarde per maat direct onder Specificaties in de
linkerkolom (onder elkaar), zodat er naast de lange rechterkolom geen gat meer valt. Witruimte: 30px (vaste regel). ---- */
@media (min-width: 1001px) {
.amx-product div.product { grid-template-rows: auto auto auto auto auto 1fr; }
.amx-product div.product > .summary.entry-summary { grid-row: 2 / 7; }
.amx-product div.product > .amx-columns { grid-column: 1 !important; grid-row: 5; }
}
.amx-product div.product > .amx-columns.amx-columns-2 { grid-template-columns: minmax(0, 1fr); gap: 30px; margin: 30px 0 0 !important; }
/* ---- 1.0.51 (Ramon): VASTE REGEL links aangescherpt – "Actieve linkjes in dezelfde kleur als de tekst (dus niet rood)":
ook het streepje heeft de tekstkleur. Hover: dikker streepje, kleur blijft gelijk. ---- */
.amx-product .amx-story-text a, .amx-product .amx-specs a, .amx-product .amx-sources a, .amx-product .amx-rar a,
.amx-product .amx-table a:not(.button), .amx-nw-prose a, .amx-nw-art .amx-nw-sources a,
.amx-specs a.amx-spec-link, .amx-story-text a, .amx-val a, .amx-product .amx-ff a {
color: inherit !important; text-decoration-color: currentColor !important;
}
.amx-specs a.amx-spec-link:hover, .amx-specs a.amx-spec-link:focus, .amx-val a:hover, .amx-product .amx-rar a:hover { color: inherit !important; text-decoration-color: currentColor !important; }
/* ---- 1.0.51 (Ramon): paarkaarten (Gerelateerde AM 1's e.d.): de placeholder-maat is de norm ("dat formaat is echt mooi").
Schoen = 89 % van de kaartbreedte, verticaal gecentreerd tussen het label bovenin en de titel onderin (midden op 42 %).
Uitsnedes (vierkant canvas, schoen 89 % breed) krijgen daardoor exact hetzelfde formaat als de placeholder. ---- */
.amx-npc .amx-card-img img { padding: 0 !important; object-fit: contain !important; object-position: 50% 50% !important; transform: translateY(-8%) !important; transform-origin: 50% 50% !important; }
.amx-npc .amx-card-img img[src*="/placeholder"] { transform: translateY(-8%) scale(1.34) !important; }
/* Eén groot paar in een nieuwsbericht houdt zijn eigen opmaak. */
.amx-nw-pairs-1 .amx-npc .amx-card-img img { padding: 0 0 14% !important; transform: scale(1.28) !important; transform-origin: 50% 42% !important; }
/* ---- 1.0.53 (Ramon): "zodat alle paartjes altijd even groot lijken als de DOAF UO PE 'Tokyo'" – puur voor de blokjes.
assets/amx-fit.js meet de schoen in elke uitsnede en zet --amx-fit (0.9–1.12) op de ![]()
; de foto op de
productpagina zelf verandert niet. ---- */
.amx-card-img:not(.amx-news-img) img[src*="/amx-cutout/"], .products .product img[src*="/amx-cutout/"] { transform: scale(var(--amx-fit, 1)); transform-origin: 50% 50%; }
.amx-npc .amx-card-img img[src*="/amx-cutout/"] { transform: translateY(-8%) scale(var(--amx-fit, 1)) !important; }
.amx-nw-pairs-1 .amx-npc .amx-card-img img[src*="/amx-cutout/"] { transform: scale(1.28) !important; }
/* ---- 1.0.53 (Ramon): "Geef hier maximaal 1 regel weer bij de weergaven van de naam, zodat deze tekst niet door de
sneaker komt te staan." Paarkaarten met de naam over de foto (Meest gezocht, Gerelateerde AM 1's, nieuws-paren):
naam op één regel, te lang = "…". Eén groot paar in een nieuwsbericht houdt 2 regels. ---- */
.amx-npc .amx-npc-t { display: block !important; -webkit-line-clamp: unset !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100%; }
.amx-nw-pairs-1 .amx-npc .amx-npc-t { display: -webkit-box !important; -webkit-line-clamp: 2 !important; white-space: normal !important; }
/* ---- 1.0.55 (Ramon): zoekpagina – "Geen sneakers gevonden" (content) / "Geen nieuws gevonden" (sidebar) onder hun rode label. ---- */
.amx-srch-none .amx-nw-net-t { margin: 0 0 14px !important; }
.amx-srch-none .amx-srch-intro { margin: 0; }
/* ---- 1.0.57 (Ramon): eigen feitje onder een nieuwsbericht dat we tegenspreken; het bericht zelf blijft intact. ---- */
.amx-nw-add { max-width: 66ch; margin: 0 0 30px; padding: 14px 16px; background: #f5f5f5; border-left: 3px solid #da0812; }
.amx-nw-add h2 { margin: 0 0 6px !important; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif !important; font-weight: 700; font-size: 18px !important; }
.amx-nw-add p { margin: 0 0 6px; }
.amx-nw-add p:last-child { margin-bottom: 0; }
.amx-nw-add-on { font-weight: 700; color: #6b6f74; font-size: .9em; }
/* ---- 1.0.58 (Ramon): status van het productieaantal (Officieel / Bevestigd / Gerucht, kleuren als nieuws);
zonder status = door Claude geschat → "Geschat" in lichtgrijs. ---- */
.amx-pver { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; vertical-align: 1px; }
.amx-pver svg { width: 12px; height: 12px; flex: none; }
.amx-pver-geschat { color: #a3a9b0; font-weight: 400; }
.amx-rar-k .amx-pver { margin-left: 8px; font-size: 11px; }
/* ---- 1.0.59 (Ramon): in de tegel alleen het gekleurde vinkje achter "Productieaantal", zodat de cijfers van beide
tegels horizontaal gelijk staan. Geschat = lichtgrijs rondje met golfje. ---- */
.amx-rar-k { white-space: nowrap; }
.amx-pver-i { display: inline-block; width: 11px; height: 11px; margin-left: 5px; vertical-align: -1px; line-height: 0; }
.amx-pver-i svg { width: 11px; height: 11px; display: block; }
.amx-pver-i-officieel { color: #0f7a3d; } .amx-pver-i-bevestigd { color: #1f5fa8; } .amx-pver-i-gerucht { color: #9a6400; } .amx-pver-i-geschat { color: #c3c8ce; }
/* ==========================================================================
1.0.61 (Ramon 2026-10-03): shoppagina's /shop/ en /shop// (opbouw zoals Trending).
Witruimte volgens claude/whitespace-rules.md: 30 px tussen blokken, grijze vlakken 24/22 px.
========================================================================== */
.amx-shop-head { margin: 0 0 30px; }
.amx-shop-id { display: flex; align-items: center; gap: 22px; padding: 0 0 22px; border-bottom: 1px solid #e8e9eb; }
.amx-shophead-logo { flex: 0 0 132px; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; border-radius: 6px; padding: 18px; box-sizing: border-box; }
.amx-shophead-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.amx-shophead-logo.is-text span, .amx-shopc-logo.is-text span { font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.1; color: #1b2a3a; text-align: center; }
.amx-shop-idt { flex: 1 1 auto; min-width: 0; }
.amx-shop-head .amx-shop-name { position: relative; margin: 0 0 12px !important; padding: 0 0 8px !important; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif !important; font-weight: 700; font-size: 32px !important; line-height: 1.15 !important; color: #1b2a3a; }
.amx-shop-head .amx-shop-name::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background: #da0812; }
.amx-shop-head .amx-shop-tag { margin: 0 0 10px !important; font-size: 15px; line-height: 1.55; color: #273a4f; }
.amx-shop-facts { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
.amx-shop-facts li { margin: 0 !important; padding: 3px 10px !important; border-radius: 999px; background: #f4f5f7; color: #1b2a3a; font-size: 12px; font-weight: 600; line-height: 1.4; }
.amx-shop-facts li::before { display: none !important; content: none !important; }
.amx-shop-btn { box-sizing: border-box; flex: 0 0 auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 4px; background: #da0812; color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none !important; white-space: nowrap; }
.amx-shop-btn:hover { background: #b80610; }
.amx-shop-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0 30px; }
.amx-shop-stat .amx-rar-n { font-size: 28px; }
.amx-shop-stat .amx-rar-sub { margin: 0 !important; font-size: 12px; line-height: 1.4; color: #6b6f74; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.amx-shop-stat .amx-rar-sub a { color: inherit; }
.amx-shop-head .amx-shop-lbl { margin: 0 !important; }
.amx-shop-none { margin: 0 0 30px; color: #6b6f74; }
.amx-shop-about .amx-rar-note + .amx-rar-note { margin-top: 10px !important; }
.amx-shop-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 16px 2px 0; font-size: 14px; line-height: 1.45; }
.amx-shop-dl dt { margin: 0; color: #6b6f74; }
.amx-shop-dl dd { margin: 0; color: #1b2a3a; font-weight: 600; }
.amx-shop-side > * + * { margin-top: 30px; }
/* Overzicht /shop/: kaarten in het raster van Trending, logo in het grijze vierkant. */
.amx-shops-grid .dt-css-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; }
.amx-shops-grid .wf-cell { opacity: 1 !important; transform: none !important; } /* The7 fades grid cells in with JS; our cards are there at once. */
.amx-shopc .woo-buttons-on-img { background: #f5f5f5; aspect-ratio: 1 / 1; }
.amx-shopc-img, .amx-shopc-img:hover { text-decoration: none !important; }
.amx-shopc-img { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%; }
.amx-shopc-logo { display: flex; align-items: center; justify-content: center; width: 64%; height: 64%; }
.amx-shopc-logo img { max-width: 100%; max-height: 46%; width: auto; height: auto; object-fit: contain; transition: transform .25s; }
.amx-shopc:hover .amx-shopc-logo img { transform: scale(1.05); }
.amx-shopc .amx-loop-nick { display: block; }
.amx-shopc .amx-card-info .amx-shopc-n { min-width: 40px; }
/* Validatie: logo = link naar de shoppagina, pijltje = het paar bij die shop. */
.amx-checklist li .amx-shop-ln { display: inline-flex; align-items: center; min-width: 0; text-decoration: none !important; }
.amx-checklist li .amx-shop-ln:hover .amx-logo { opacity: .75; }
.amx-checklist li .amx-shop-ln .amx-plat { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 2px; }
.amx-checklist li a.amx-out-only { flex: 0 0 auto; padding: 4px; margin-left: -2px; color: #6b6f74; }
.amx-checklist li a.amx-out-only .amx-out-icon { margin: 0; }
@media (max-width: 1000px) {
.amx-shop-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
.amx-shops-grid .dt-css-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.amx-shop-id { flex-wrap: wrap; align-items: flex-start; gap: 14px 16px; }
.amx-shop-stat .amx-rar-n { font-size: 24px; }
.amx-shophead-logo { flex-basis: 84px; width: 84px; height: 84px; padding: 12px; }
.amx-shop-idt { flex: 1 1 calc(100% - 100px); }
.amx-shop-head .amx-shop-name { font-size: 26px !important; }
.amx-shop-btn { width: 100%; justify-content: center; }
}
/* ==========================================================================
1.0.66 VASTE STIJLREGEL (Ramon 2026-10-03): "ik wil dat shoplogo's altijd in een rondje staan, dus overal waar ze nu
in een vierkantje staan." Elk shoplogo staat in een wit rondje met een dun grijs randje; het logo zelf past er
gecentreerd in (contain). Geldt voor: Prijsvergelijking, Validatie, shoppagina-kop en shopkaarten op /shop/.
(Fix: sinds 1.0.61 kreeg het logo in de Prijsvergelijking per ongeluk het grote grijze vierkant van de shopkop,
omdat beide de klasse .amx-shop-logo gebruikten; de shopkop heet nu .amx-shophead-logo.)
========================================================================== */
.amx-offers .amx-shop-logo, .amx-checklist .amx-logo-box, .amx-shophead-logo, .amx-shopc-logo {
display: inline-flex !important; align-items: center; justify-content: center; flex: none;
box-sizing: border-box; border-radius: 50% !important; background: #fff !important;
border: 1px solid #e3e5e8; overflow: hidden; aspect-ratio: 1 / 1;
}
.amx-offers .amx-shop-logo img, .amx-checklist .amx-logo-box img, .amx-shophead-logo img, .amx-shopc-logo img {
display: block; width: auto !important; height: auto !important; max-width: 78% !important; max-height: 46% !important; object-fit: contain;
}
/* Prijsvergelijking */
.amx-offers .amx-shop-logo { width: 56px !important; height: 56px !important; padding: 0 !important; }
/* Validatie */
.amx-checklist .amx-logo-box, .amx-val .amx-checklist .amx-logo-box, .amx-columns-3 .amx-checklist .amx-logo-box { width: 44px !important; height: 44px !important; max-width: none !important; padding: 0 !important; }
.amx-val .amx-checklist li { min-height: 46px; }
/* Shoppagina-kop */
.amx-shophead-logo { width: 132px !important; height: 132px !important; padding: 0 !important; }
.amx-shophead-logo.is-text span { max-width: 80%; }
/* Shopkaarten /shop/: wit rondje in het grijze vierkant van de kaart */
.amx-shopc-logo { width: 66% !important; height: auto !important; }
.amx-shopc-logo.is-text span { max-width: 78%; font-size: 17px; }
@media (max-width: 768px) {
.amx-shophead-logo { width: 84px !important; height: 84px !important; }
.amx-offers .amx-shop-logo { width: 46px !important; height: 46px !important; }
.amx-checklist .amx-logo-box, .amx-val .amx-checklist .amx-logo-box { width: 40px !important; height: 40px !important; }
}
/* 1.0.72 (Ramon): bron onder de productfoto, zelfde weergave als bij nieuwsberichten (figcaption). */
.amx-photo-cap { margin: 0 !important; padding-top: 6px; font-size: 12px; line-height: 1.6; color: #6b6f74; }
.amx-photo-cap a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 2px; pointer-events: auto !important; cursor: pointer !important; }
.amx-photo-cap a:hover { text-decoration-thickness: 2px; }
/* 1.0.73 (Ramon): vintage = eigen aanduiding onder de tegels (geen 6e vinkje); overrulet alleen niveau 1 en 2. */
.amx-rar-vin { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 14px; background: #f5ede3; border-left: 4px solid #8a5a2b; border-radius: 4px; color: #5c3d1e; }
.amx-rar-vin svg { flex: none; margin-top: 1px; color: #8a5a2b; }
.amx-rar-vin-k { display: inline-block; margin: 0 0 2px; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a5a2b; }
.amx-rar-vin p { margin: 0 !important; font-size: 14px; line-height: 1.5; color: #5c3d1e; }
.amx-rar-lv li.is-off span { text-decoration: line-through; text-decoration-color: #c9ccd0; }
/* 1.0.74: eerder verkochte prijs in de Prijsvergelijking (geen aanbod) */
.amx-offers .amx-sold { display: inline-block; margin-left: 4px; font-size: 11px; line-height: 1.6; padding: 0 6px; border-radius: 3px; background: #eceef0; color: #6b7280; font-weight: 500; vertical-align: 1px; }
/* ===== 1.0.79 FAQ-pagina (/faq/) ===== */
.amx-faq { color: inherit; }
.amx-faq .amx-faq-intro { font-size: 19px; line-height: 1.6; margin: 0 0 18px; }
.amx-faq .amx-faq-toc ul { margin: 0 0 10px 1.2em; padding: 0; }
.amx-faq .amx-faq-toc li { margin: 0 0 4px; }
.amx-faq a:not(.amx-faq-btn) { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.amx-faq a:not(.amx-faq-btn):hover { text-decoration-thickness: 2px; }
.amx-faq .amx-faq-sec { margin: 0; }
.amx-faq h2.amx-faq-h { font-size: 26px; line-height: 1.25; margin: 30px 0 18px; padding-bottom: 10px; position: relative; scroll-margin-top: 140px; }
.amx-faq h2.amx-faq-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background: #da0812; }
.amx-faq h3.amx-faq-q { font-size: 19px; line-height: 1.35; margin: 22px 0 6px; }
.amx-faq .amx-faq-item { scroll-margin-top: 140px; }
.amx-faq .amx-faq-a p, .amx-faq .amx-faq-a ul { margin: 0 0 10px; }
.amx-faq .amx-faq-a ul { padding-left: 1.2em; }
.amx-faq .amx-faq-outro { margin-top: 30px; }
.amx-faq .amx-faq-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.amx-faq .amx-faq-btn { display: inline-block; padding: 12px 22px; background: #da0812; color: #fff !important; font-weight: 600; text-decoration: none; border-radius: 2px; }
.amx-faq .amx-faq-btn.is-dark { background: #1b2a3a; }
.amx-faq .amx-faq-btn:hover { opacity: .9; }
@media (max-width: 767px) {
.amx-faq h2.amx-faq-h { font-size: 22px; }
.amx-faq h3.amx-faq-q { font-size: 17px; }
.amx-faq .amx-faq-intro { font-size: 17px; }
}
/* ===== 1.0.80 FAQ: onderwerpen in de rechterkolom + ankers onder de sticky header ===== */
/* Ramon: "Ik wil dit blokje in de sidebar hebben, boven recent bekeken. Het moet de stijl hebben van het blok 'hoe zeldzaam'." */
.amx-faq-side { margin: 0 0 30px; }
.amx-faq-side .amx-rar-t { padding: 10px 14px; }
.amx-faq-sidetoc { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.amx-faq-sidetoc li { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid #eceef0; }
.amx-faq-sidetoc li:last-child { border-bottom: 0; }
.amx-faq-sidetoc li::before { display: none !important; content: none !important; }
.amx-faq-sidetoc a { display: flex; align-items: center; gap: 8px; padding: 9px 0; font-size: 14px; line-height: 1.4; color: #273a4f !important; text-decoration: none !important; }
.amx-faq-sidetoc a svg { flex: none; color: #c9ccd0; transition: color .15s, transform .15s; }
.amx-faq-sidetoc a:hover span { text-decoration: underline; text-underline-offset: 2px; }
.amx-faq-sidetoc a:hover svg { color: #da0812; transform: translateX(2px); }
.amx-faq-sidetoc a.is-cur { font-weight: 700; }
.amx-faq-sidetoc a.is-cur svg { color: #da0812; }
/* Groot scherm: de lijst staat in de rechterkolom, niet meer in de tekst. Klein scherm (kolom zakt onder de pagina): andersom. */
@media (min-width: 992px) { .amx-faq .amx-faq-toc { display: none; } }
@media (max-width: 991px) { .amx-faq-side { display: none; } }
/* Ramon: "Als ik op 'nieuws' klik, dan moet ik de header nieuws wel zien." Sticky header (> 900 px) ± 125 px + adminbalk (scroll-padding van WP). */
.amx-faq h2.amx-faq-h, .amx-faq .amx-faq-item { scroll-margin-top: 20px; }
@media (min-width: 901px) { .amx-faq h2.amx-faq-h, .amx-faq .amx-faq-item { scroll-margin-top: 150px; } }
/* ---- 1.0.82 (Ramon, Safari 302740-281): "Prijsvergelijking en waarde per maat graag naast elkaar plaatsen over de
gehele breedte van de pagina." Vervangt de opstelling van 1.0.51 (onder elkaar in de linkerkolom).
Raster ≥ 1001 px: rij 1 titel | kruimelpad, rij 2 foto | rechterkolom, rij 3 verhaal, rij 4 specificaties,
rij 5 vulrij (1fr: is de rechterkolom langer, dan valt de extra ruimte hier), rij 6 de twee blokken naast elkaar over
de volle breedte (onder de rechterkolom). 701–1000 px: ook naast elkaar; ≤ 700 px: onder elkaar. Witruimte 30/45 px. ---- */
@media (min-width: 1001px) {
.amx-product div.product { grid-template-rows: auto auto auto auto 1fr auto; }
.amx-product div.product > .summary.entry-summary { grid-row: 2 / 6; }
.amx-product div.product > .amx-columns { grid-column: 1 / -1 !important; grid-row: 6; }
}
.amx-product div.product > .amx-columns.amx-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 45px; margin: 0 0 30px !important; align-items: start; }
@media (max-width: 700px) {
.amx-product div.product > .amx-columns.amx-columns-2 { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
/* ---- 1.0.86 (Ramon): Samples onder Specificaties (foto's + maat + prijs per sample). Witruimte 30 px. ---- */
@media (min-width: 1001px) {
.amx-product div.product > .amx-samples { grid-column: 1; grid-row: 5; }
}
.amx-product div.product > .amx-samples { margin: 0 0 30px !important; }
.amx-samples-empty { display: none !important; }
body.amx-editing .amx-samples-empty { display: block !important; border: 1px dashed #e3a3a6; padding: 14px 16px; border-radius: 4px; }
.amx-samples-none { color: #8a8f95; margin: 0; }
.amx-samples-intro { margin: 0 0 14px; color: #6b6f74; font-size: 15px; }
.amx-samples-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.amx-sample { margin: 0; min-width: 0; }
.amx-sample-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.amx-sample-ph { display: block; background: #f5f5f5; border-radius: 4px; overflow: hidden; aspect-ratio: 1 / 1; }
.amx-sample-ph.is-main { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.amx-sample-ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.amx-sample figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.amx-sample-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; color: #1b2a3a; }
.amx-sample-meta b { font-weight: 600; color: #6b6f74; margin-right: 4px; }
.amx-sample-note { margin: 4px 0 0; color: #6b6f74; }
/* ---- 1.0.87 (Ramon): "Lijn het menu links uit (hoeft niet meer gecentreerd)". Menubalk links uitgelijnd op de
inhoud (begint op dezelfde lijn als logo/titel), vaste ruimte tussen de items i.p.v. over de hele breedte verdeeld.
Op smalle schermen blijven fitBar-stappen (kleiner lettertype, groepen verbergen) gewoon werken. ---- */
.amx-hdr .amx-hdr-list { justify-content: flex-start; gap: 36px; }
@media (max-width: 1100px) { .amx-hdr .amx-hdr-list { gap: 28px; } }
@media (max-width: 900px) { .amx-hdr .amx-hdr-list { gap: 22px; } }
.amx-hdr .amx-hdr-list.amx-fit-1, .amx-hdr .amx-hdr-list.amx-fit-2, .amx-hdr .amx-hdr-list.amx-fit-3 { gap: 16px; }
/* ---- 1.0.88 (Ramon, Viotech 302740-251): "Ik wil de afbeelding uitgelijnd hebben aan de bovenzijde. De titel (incl.
streepje) moet over de afbeelding heen komen te vallen." De productfoto begint bovenaan (zelfde hoogte als het
kruimelpad rechts); de titel + rood streepje staan linksboven in het grijze fotovlak. Rechts blijft ruimte vrij voor de
rode hoekband. Op smalle schermen: kruimelpad eerst, dan de foto met de titel erover. ---- */
.amx-product div.product > .amx-product-title { position: relative; z-index: 3; align-self: start; margin: 0 !important; padding: 24px 170px 12px 28px !important; }
body.amx-hdr-on .amx-product div.product > .amx-product-title::after { left: 28px; bottom: 0; }
@media (min-width: 1001px) {
.amx-product div.product > .woocommerce-product-gallery { grid-row: 1 / 3 !important; }
}
@media (max-width: 1000px) {
.amx-product div.product { display: grid !important; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.amx-product div.product::before, .amx-product div.product::after { display: none !important; content: none !important; }
.amx-product div.product > * { grid-column: 1; float: none !important; width: auto !important; max-width: none !important; min-width: 0; }
.amx-product div.product > .amx-prod-head { grid-row: 1; }
.amx-product div.product > .amx-product-title { grid-row: 2; padding: 14px 84px 8px 16px !important; }
body.amx-hdr-on .amx-product div.product > .amx-product-title { font-size: 22px; }
body.amx-hdr-on .amx-product div.product > .amx-product-title::after { left: 16px; }
.amx-product div.product > .woocommerce-product-gallery { grid-row: 2 / 4; }
}
/* ---- 1.0.89 (Ramon): kids-paren in de overzichtsblokjes.
"1. wanneer een sneaker een kids schoen is, dan moet dat duidelijk zijn in de overzichtblokjes
2. de schoenen mogen iets kleiner weergegeven worden dan de reguliere paartjes"
Kids = AMX_Mapper::gender() 'kids' (zelfde bron als "(Kids)" achter het model). Rood label "KIDS" linksonder op de
foto (in nieuws-paarkaarten linksboven, want daar staat de titel onderin) en de schoen op 82 % van de normale maat.
`scale` (los van `transform`) stapelt op --amx-fit, de placeholder-schaal en translateY van de nieuwskaarten. ---- */
.amx-loop-kids { display: none; }
.amx-kids-tag { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-block; padding: 4px 9px 3px; border-radius: 4px; background: #da0812; color: #fff; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 13px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.amx-nick-host > .amx-loop-kids { display: inline-block !important; }
.amx-npc .amx-kids-tag { top: 12px; bottom: auto; }
.amx-npc.amx-has-ribbon .amx-card-nick ~ .amx-kids-tag, .amx-npc .amx-card-nick ~ .amx-kids-tag { top: 44px; }
.amx-card.amx-kids .amx-card-img img,
.amx-kids-host img,
li.product.amx-kids .amx-nick-host img,
article.product.amx-kids .amx-nick-host img { scale: .82; }
@media (max-width: 600px) {
.amx-kids-tag { left: 7px; bottom: 7px; padding: 3px 6px 2px; font-size: 10px; }
.amx-npc .amx-kids-tag { top: 7px; }
.amx-npc .amx-card-nick ~ .amx-kids-tag { top: 32px; }
}
/* ---- 1.0.89 (Ramon): "De verticale tekst rechts, mag niet standaard op elke zoekpagina te staan. Dat is alleen voor
specifieke pagina's waarvoor ik dat aan geef." De gedraaide paginanaam (1.0.38) staat alleen nog aan met body-klasse
amx-vtitle (AMX_Layout::VTITLE_PATHS / optie amx_vtitle_paths; nooit bij ?s=). Zonder die klasse blijft de h1
onzichtbaar voor het oog maar leesbaar voor zoekmachines/schermlezers (zoals altijd onder 1400 px). ---- */
/* ---- 1.0.91 (Ramon): "Ik wil dit menu zelf kunnen aanpassen in WordPress." De balk, de links rechts en het menu op
mobiel komen uit gewone WordPress-menu's (Weergave > Menu's, locaties "AMAXONE hoofdmenu" / "AMAXONE header rechts").
Eén niveau uitklapmenu. CSS-klassen die je in het menu bij een item kunt zetten: amx-fit-g (verbergt het item
eerst op smalle schermen), amx-fit-f (nog eerder), amx-only-drawer (alleen in het mobiele menu), amx-only-bar
(alleen in de balk). ---- */
.amx-hdr-list .amx-only-drawer, .amx-hdr-right .amx-only-drawer { display: none !important; }
.amx-drawer-panel .amx-only-bar { display: none !important; }
.amx-hdr-list > .amx-has-sub { display: flex; align-items: stretch; position: relative; }
.amx-hdr-list > .amx-has-sub > a { padding-right: 0; }
.amx-sub-toggle { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; min-width: 0; margin: 0; padding: 0 0 0 6px !important; border: 0 !important; background: none !important; box-shadow: none !important; color: #111 !important; cursor: pointer; border-radius: 0; }
.amx-sub-toggle svg { transition: transform .15s; }
.amx-has-sub.is-open > .amx-sub-toggle svg { transform: rotate(180deg); }
.amx-has-sub:hover > .amx-sub-toggle, .amx-has-sub.is-open > .amx-sub-toggle { color: #da0812 !important; }
.amx-hdr .amx-sub { display: none; position: fixed; z-index: 9100; min-width: 210px; padding: 6px 0; background: #fff; border: 1px solid #e6e6e6; border-top: 2px solid #da0812; box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.amx-hdr .amx-has-sub.is-open > .amx-sub { display: block; }
.amx-hdr-r2 .amx-sub a { display: block; padding: 10px 18px; border-bottom: 0; color: #111; font-size: 14px; font-weight: 600; white-space: nowrap; }
.amx-hdr-r2 .amx-sub a:hover, .amx-hdr-r2 .amx-sub a.is-current { background: #f5f5f5; color: #da0812; border-bottom: 0; }
.amx-hdr .amx-hdr-list.amx-fit-2 .amx-has-sub.amx-fit-g, .amx-hdr .amx-hdr-list.amx-fit-3 .amx-has-sub.amx-fit-g, .amx-hdr .amx-hdr-list.amx-fit-3 .amx-has-sub.amx-fit-f { display: none; }
/* mobiel menu: dezelfde items, uitklapitems ingesprongen en altijd zichtbaar */
.amx-drawer-menu a { display: block; padding: 11px 20px; color: #111; font-size: 16px; font-weight: 600; text-decoration: none; }
.amx-drawer-menu a:hover, .amx-drawer-menu a.is-current { background: #f5f5f5; color: #da0812; }
.amx-drawer .amx-sub { display: block; position: static; min-width: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.amx-drawer .amx-sub a { padding-left: 36px; font-weight: 500; font-size: 15px; }
.amx-drawer .amx-sub-toggle { display: none; }
/* 1.0.93: the personal "recent" row stays out of the layout until it has something to show. */
.amx-home .amx-row[hidden] { display: none !important; }
/* ---- 1.0.94: items in een uitklapmenu verdwijnen nooit door de fit-klassen (amx-fit-g / amx-fit-f) van de balk. ---- */
.amx-hdr .amx-hdr-list .amx-sub a.amx-fit-g, .amx-hdr .amx-hdr-list .amx-sub a.amx-fit-f { display: block !important; }
/* ---- 1.0.96 (Ramon, extra foto's bij een paar): pijltjes op de foto + hele foto in het kader ----
Ramon: "pijltjes op de hoofdfoto om zijwaarts te kunnen scrollen" en "goed gecentreerd (niet buiten het kader vallen)".
De pijltjes (flexslider directionNav, aangezet in AMX_Frontend::carousel_options) staan in een laag precies over het 3:2-fotovlak. */
.amx-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.amx-product .woocommerce-product-gallery { position: relative; }
.amx-product .woocommerce-product-gallery .flex-direction-nav { position: absolute; top: 0; left: 0; right: 0; width: auto; height: auto; aspect-ratio: 3 / 2; margin: 0 !important; padding: 0 !important; list-style: none; z-index: 6; pointer-events: none; }
.amx-product .woocommerce-product-gallery .flex-direction-nav li { position: absolute; top: 50%; margin: 0 !important; padding: 0 !important; list-style: none; transform: translateY(-50%); pointer-events: none; }
.amx-product .woocommerce-product-gallery .flex-direction-nav .flex-nav-prev { left: 14px; right: auto; }
.amx-product .woocommerce-product-gallery .flex-direction-nav .flex-nav-next { right: 14px; left: auto; }
.amx-product .woocommerce-product-gallery .flex-direction-nav a { position: static !important; display: flex !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #e3e5e8; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #1b2a3a !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); font-size: 0; line-height: 0; text-indent: 0 !important; text-decoration: none !important; opacity: 1 !important; overflow: visible; pointer-events: auto !important; cursor: pointer !important; transition: background .15s, color .15s, transform .15s; }
.amx-product .woocommerce-product-gallery .flex-direction-nav a::before, .amx-product .woocommerce-product-gallery .flex-direction-nav a::after { content: none !important; display: none !important; }
.amx-product .woocommerce-product-gallery .flex-direction-nav a:hover, .amx-product .woocommerce-product-gallery .flex-direction-nav a:focus-visible { background: #fff; color: #da0812 !important; transform: scale(1.06); }
.amx-product .woocommerce-product-gallery .flex-direction-nav a.flex-disabled { opacity: .3 !important; pointer-events: none !important; cursor: default !important; }
.amx-product .woocommerce-product-gallery .flex-direction-nav svg { display: block; width: 22px; height: 22px; }
@media (max-width: 600px) {
.amx-product .woocommerce-product-gallery .flex-direction-nav .flex-nav-prev { left: 8px; }
.amx-product .woocommerce-product-gallery .flex-direction-nav .flex-nav-next { right: 8px; }
.amx-product .woocommerce-product-gallery .flex-direction-nav a { width: 38px !important; height: 38px !important; }
.amx-product .woocommerce-product-gallery .flex-direction-nav svg { width: 20px; height: 20px; }
}
/* Foto waarvan de schoen(en) meer dan 90 % van de vlakhoogte vullen (bovenaanzicht, voet, ...): rond het midden verkleind
(--amx-k uit AMX_Frontend::gallery_img_params), zodat de schoen(en) er nooit buiten vallen. */
.amx-product .woocommerce-product-gallery__image img.amx-tall { transform: scale(var(--amx-k, .66)); transform-origin: 50% 50%; }
/* 1.0.101 juridische pagina's (privacy, cookie, imprint, disclaimer) */
.amx-legaldoc { max-width: 920px; }
.amx-legaldoc .amx-legal-lead { font-size: 18px; line-height: 1.5; margin: 0 0 12px; }
.amx-legaldoc h2 { margin: 30px 0 10px; }
.amx-legaldoc h3 { margin: 22px 0 8px; }
.amx-legaldoc ul { margin: 0 0 16px 1.2em; }
.amx-legaldoc li { margin: 0 0 6px; }
.amx-legaldoc table { width: 100%; border-collapse: collapse; margin: 10px 0 20px; font-size: 14px; display: block; overflow-x: auto; }
.amx-legaldoc th, .amx-legaldoc td { border: 1px solid #dfe2e6; padding: 8px 10px; text-align: left; vertical-align: top; }
.amx-legaldoc thead th { background: #f4f5f7; font-weight: 700; }
.amx-legaldoc tbody th[scope=row] { background: #f4f5f7; width: 220px; }
.amx-legaldoc code { font-size: 13px; }
/* 1.0.102 footermenu (WordPress-menu op locatie "AMAXONE footermenu"); 1.0.104: direct onder de copyrightregel, rechts uitgelijnd, lettertype/-grootte/-kleur van die regel (via --amx-fm-* uit het script, anders erven) */
#bottom-bar .amx-footer-menu { order: 98; flex: 0 0 100%; width: 100%; margin: 0; padding: 0 0 12px; border: 0; }
#bottom-bar .amx-footer-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 26px; }
#bottom-bar .amx-footer-menu li { margin: 0; padding: 0; list-style: none; }
#bottom-bar .amx-footer-menu a { display: inline-block; padding: 2px 0; font-family: var(--amx-fm-family, inherit); font-size: var(--amx-fm-size, inherit); font-weight: var(--amx-fm-weight, inherit); letter-spacing: var(--amx-fm-ls, inherit); line-height: var(--amx-fm-lh, 1.5); text-transform: uppercase; color: var(--amx-fm-color, inherit); text-decoration: none; border-bottom: 0; }
/* hover (en huidige pagina) = alleen kleurwisseling naar logorood, zoals in het hoofdmenu */
#bottom-bar .amx-footer-menu a:hover, #bottom-bar .amx-footer-menu a:focus-visible, #bottom-bar .amx-footer-menu .current-menu-item > a { color: #da0812; text-decoration: none; border-bottom: 0; }
@media (max-width: 760px) { #bottom-bar .amx-footer-menu ul { justify-content: flex-start; gap: 2px 18px; } }
/* 1.0.105 (Ramon): footermenu direct onder de copyrightregel, op de hoogte van regel 2 van het adres. Het script zet het menu in dezelfde kolom als de copyrighttekst; daar staan beide regels onder elkaar, rechts uitgelijnd en met dezelfde regelhoogte als het adres. */
#bottom-bar .amx-footer-menu.amx-fm-moved { order: 0; flex: 0 1 auto; width: auto; margin: 0; padding: 0; text-align: right; }
#bottom-bar .amx-footer-menu.amx-fm-moved ul { justify-content: flex-end; gap: 0 26px; }
#bottom-bar .amx-footer-menu.amx-fm-moved a { padding: 0; line-height: 1.65; }
@media (max-width: 760px) { #bottom-bar .amx-footer-menu.amx-fm-moved { text-align: left; } #bottom-bar .amx-footer-menu.amx-fm-moved ul { justify-content: flex-start; gap: 0 18px; } }
/* 1.0.106: copyright + menu samen in één kolom (.amx-fm-col, gemaakt door het script) */
#bottom-bar .amx-fm-col { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; flex: 0 1 auto; width: auto; }
#bottom-bar .amx-fm-col > * { float: none; width: auto; max-width: 100%; margin-left: 0; margin-right: 0; }
@media (max-width: 760px) { #bottom-bar .amx-fm-col { align-items: flex-start; margin-left: 0; flex: 0 0 100%; } }
/* 1.0.107 – "Laatst bijgewerkt" onder de prijsblokken (volle breedte) en verborgen thema-titel (geen h1 meer) */
.amx-columns .amx-updated { grid-column: 1 / -1; margin: 6px 0 0; font-size: 12px; color: #8a9097; }
.amx-columns .amx-updated time { color: inherit; }
/* 1.0.113 (Ramon): melding "Deze pagina wordt nog bijgewerkt" op paren zonder eigen verhaal. Grijs vlak met rode lijn links (zoals de update-regel in nieuws); 18 px onder de melding, binnen het verhaalblok (witruimte-regels: geen extra marge erbuiten). */
.amx-story-soon { margin: 0 0 18px; padding: 12px 16px; background: #f4f5f7; border-left: 3px solid #da0812; font-size: 15px; line-height: 1.55; color: #273a4f; max-width: 820px; }
.amx-story-soon strong { font-weight: 700; }
.amx-product .amx-story-empty > .amx-story-soon { margin-bottom: 0; }
/* 1.0.147 (Ramon): releasetype (Tier Zero, QS, HS, OG, SP, SE, GR …) als aanvulling op onze eigen benamingen.
Links volgens de vaste linkregel: tekstkleur met streepje. In Specificaties en onder de tegels van "Hoe zeldzaam is hij?". */
.amx-rt { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }
.amx-rt:hover, .amx-rt:focus-visible { color: inherit; border-bottom-width: 2px; }
.amx-rt-dot { margin: 0 .15em; color: #8a9097; }
.amx-rar .amx-rar-rt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 14px 2px 0; font-size: 14px; line-height: 1.6; color: #273a4f; }
.amx-rar .amx-rar-rt-k { font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #da0812; }
.amx-rar .amx-rar-rt-v { font-weight: 600; }
.amx-rar .amx-rar-rt + .amx-rar-cheap, .amx-rar .amx-rar-rt + .amx-rar-note { margin-top: 10px !important; }
/* 1.0.149: anonieme melding "sample in omloop" (uit de collecties van verzamelaars) in het blok Samples */
.amx-sample-circ { margin: 14px 0 0; padding: 12px 14px; background: #fff; border: 2px dashed rgba(27,42,58,.25); border-radius: 6px; color: #1b2a3a; font-size: 15px; line-height: 1.5; }
.amx-samples .amx-sample-circ:first-of-type { margin-top: 0; }
.amx-sample-circ-t { margin: 0 0 6px; }
.amx-sample-circ ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.amx-sample-circ li { margin: 0; padding: 0; }
.amx-sample-circ li::before { content: none; }
/* 1.0.155 (Ramon): de kleine foto's onder de hoofdfoto blijven altijd op één rij. Tot en met 4 foto's hebben ze de vertrouwde
grootte (een kwart van de breedte); bij meer foto's worden ze evenredig kleiner, zodat er nooit een tweede rij ontstaat. */
.amx-product .woocommerce-product-gallery .flex-control-thumbs { --amx-tg: 10px; display: flex !important; flex-flow: row nowrap !important; justify-content: flex-start; align-items: flex-start; gap: var(--amx-tg); margin: 12px 0 0 !important; padding: 0 !important; list-style: none; overflow: hidden; }
.amx-product .woocommerce-product-gallery .flex-control-thumbs li { float: none !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: calc((100% - 3 * var(--amx-tg)) / 4) !important; margin: 0 !important; padding: 0 !important; list-style: none; }
.amx-product .woocommerce-product-gallery .flex-control-thumbs li img { display: block; width: 100% !important; height: auto !important; max-width: 100%; }
@media (max-width: 600px) { .amx-product .woocommerce-product-gallery .flex-control-thumbs { --amx-tg: 6px; } }
/* 1.0.156: mijn-account-icoontje rechts van FAQ in de header */
.amx-hdr-right a.amx-hdr-acc { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -6px; border-radius: 50%; line-height: 0; }
.amx-hdr-r1 .amx-hdr-right a.amx-hdr-acc:hover { background: rgba(255,255,255,.12); opacity: 1; }
/* 1.0.165 (Ramon): /shop// = de openbare verkoopshop van een verzamelaar (zelfde look als /shop/outsole/, met vraagprijzen) */
.amx-seller-preview { margin: 0 0 18px; padding: 10px 14px; border-radius: 4px; background: #fff4d6; color: #5c4400; font-size: 14px; line-height: 1.45; }
.amx-sellergrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; margin: 0 0 30px; }
.amx-sellc { min-width: 0; }
.amx-sellc .amx-card-img { margin-bottom: 10px; }
.amx-sellc-b { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid #e8e9eb; }
.amx-sellc-sz { font-size: 13px; color: #6b6f74; font-weight: 600; }
.amx-sellc-sz abbr { text-decoration: none; border: 0; cursor: help; }
.amx-sellc-p { font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.1; color: #1b2a3a; white-space: nowrap; }
.amx-sellc-p.is-none { font-size: 13px; font-weight: 600; color: #6b6f74; font-family: inherit; white-space: normal; text-align: right; }
.amx-seller-note .amx-rar-note { font-size: 13px !important; }
@media (max-width: 1100px) { .amx-sellergrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .amx-sellergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } .amx-sellc-p { font-size: 17px; } }
/* 1.0.172: tandwieltje links van het account-icoon */
.amx-hdr-right a.amx-hdr-acc.amx-hdr-set { margin-left: 0; margin-right: -2px; }
/* 1.0.178: open-vraagbalk in de FAQ */
.amx-faq .amx-faq-ask { position: relative; margin: 0 0 26px; padding: 18px 20px 20px; background: #f3f4f6; border-top: 3px solid #da0812; }
.amx-faq .amx-faq-ask-l { display: block; margin: 0 0 10px; font: 700 15px/1.3 "Roboto Condensed", Helvetica, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #273a4f; }
.amx-faq .amx-faq-ask-row { display: flex; gap: 8px; }
.amx-faq .amx-faq-ask-i { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 12px 14px; border: 2px dashed rgba(27,42,58,.3); border-radius: 0; background: #fff; font-size: 16px; color: #273a4f; }
.amx-faq .amx-faq-ask-i:focus { outline: 0; border: 2px solid #da0812; }
.amx-faq .amx-faq-ask-b { flex: none; padding: 12px 24px; border: 0; background: #da0812; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.amx-faq .amx-faq-ask-b:disabled { opacity: .6; cursor: progress; }
.amx-faq .amx-faq-ask-out:not(:empty) { margin-top: 16px; padding: 14px 16px; background: #fff; }
.amx-faq .amx-faq-ask-out p { margin: 0 0 8px; }
.amx-faq .amx-faq-ask-q { margin: 0 0 6px; font-size: 19px; line-height: 1.35; }
.amx-faq .amx-faq-ask-more, .amx-faq .amx-faq-ask-rel { font-size: 14px; color: #6b7480; }
.amx-faq .amx-faq-ask-wait { color: #6b7480; }
@media (max-width: 600px) { .amx-faq .amx-faq-ask-row { flex-direction: column; } .amx-faq .amx-faq-ask-b { width: 100%; } }
/* ===== 1.0.191 (Ramon, 2026-10-18): prijsrange per winkel boven de Prijsvergelijking ===== */
.amx-rg { --rg-shop: 96px; --rg-gap: 12px; --rg-ml: 74px; --rg-mr: 116px; margin: 0 0 22px; font-size: 12px; color: #4b5563; }
.amx-rg .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.amx-rg-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0 0 8px !important; padding: 0 !important; font-size: 13px; color: #4b5563; }
.amx-rg-legend li { display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none; }
.amx-rg-legend li::before, .amx-rg-legend li::marker { content: none; }
.amx-rg-legend .amx-rg-eur { color: #8a8f95; margin-left: auto; }
.amx-rg-sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.amx-rg-sw.amx-rg-dotsw { width: 10px; border-radius: 50%; background: #232f3e; box-shadow: 0 0 0 2px #fff; }
.amx-rg-body { position: relative; }
.amx-rg-grid { position: absolute; top: 0; bottom: 22px; left: calc(var(--rg-shop) + var(--rg-gap) + var(--rg-ml)); right: var(--rg-mr); pointer-events: none; }
.amx-rg-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: #eceef0; }
.amx-rg-row { position: relative; display: grid; grid-template-columns: var(--rg-shop) 1fr; gap: 0 var(--rg-gap); align-items: center; min-height: 52px; padding: 5px 0; border-top: 1px solid #f1f2f4; }
.amx-rg-grid + .amx-rg-row { border-top: 0; }
.amx-rg-shop { display: flex; align-items: center; justify-content: center; min-width: 0; }
.amx-rg-text { font-size: 13px; font-weight: 600; line-height: 1.25; text-align: center; color: #232f3e; overflow-wrap: anywhere; }
.amx-rg .amx-shop-logo { width: 44px !important; height: 44px !important; padding: 0 !important; }
.amx-rg-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.amx-rg-plot { position: relative; margin: 0 var(--rg-mr) 0 var(--rg-ml); min-width: 0; }
.amx-rg-lane { position: relative; height: 22px; }
.amx-rg-bar { position: absolute; top: 50%; height: 10px; margin-top: -5px; border-radius: 4px; }
.amx-rg-new { background: #2a78d6; }
.amx-rg-used { background: #eb6834; }
.amx-rg-bar.amx-rg-sold-bar.amx-rg-new { background: repeating-linear-gradient(45deg, #2a78d6 0 2px, rgba(42,120,214,.22) 2px 5px); box-shadow: inset 0 0 0 1px #2a78d6; }
.amx-rg-bar.amx-rg-sold-bar.amx-rg-used { background: repeating-linear-gradient(45deg, #eb6834 0 2px, rgba(235,104,52,.22) 2px 5px); box-shadow: inset 0 0 0 1px #eb6834; }
.amx-rg-hatch { background: repeating-linear-gradient(45deg, #6b7280 0 2px, rgba(107,114,128,.2) 2px 5px); box-shadow: inset 0 0 0 1px #6b7280; }
.amx-rg-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #232f3e; box-shadow: 0 0 0 2px #fff; }
.amx-rg-lbl { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 12px; line-height: 1; color: #4b5563; }
.amx-rg-lmin { margin-right: 10px; }
.amx-rg-lmax, .amx-rg-lone { margin-left: 10px; }
.amx-rg-lone { margin-left: 12px; }
.amx-rg .amx-rg-sold { font-style: normal; font-size: 11px; line-height: 1.5; padding: 0 5px; margin-left: 3px; border-radius: 3px; background: #eceef0; color: #6b7280; }
.amx-rg-axis { position: relative; height: 22px; margin: 4px var(--rg-mr) 0 calc(var(--rg-shop) + var(--rg-gap) + var(--rg-ml)); }
.amx-rg-axis span { position: absolute; top: 2px; transform: translateX(-50%); font-size: 11.5px; color: #8a8f95; white-space: nowrap; }
@media (max-width: 768px) {
.amx-rg { --rg-ml: 62px; --rg-mr: 104px; }
}
@media (max-width: 600px) {
.amx-rg { --rg-shop: 0px; --rg-gap: 0px; --rg-ml: 58px; --rg-mr: 84px; }
.amx-rg-row { grid-template-columns: 1fr; padding: 8px 0 4px; min-height: 0; }
.amx-rg-shop { justify-content: flex-start; gap: 8px; margin: 0 0 4px; }
.amx-rg .amx-shop-logo { width: 32px !important; height: 32px !important; }
.amx-rg-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 13px; font-weight: 600; color: #232f3e; }
.amx-rg-text { text-align: left; }
.amx-rg-lbl { font-size: 11px; }
.amx-rg .amx-rg-sold { display: none; }
.amx-rg-axis span.amx-rg-t2 { display: none; }
.amx-rg-legend { font-size: 12px; }
.amx-rg-legend .amx-rg-eur { margin-left: 0; }
}
/* ---- 1.0.193 (Ramon, 2026-10-18): "de prijsvergelijking is niet zichtbaar op mobiele telefoon". Op een telefoon stond het
blok pas na ± 4.800 px scrollen (onder verhaal en specificaties). Nu (≤ 700 px): Prijsvergelijking + Waarde per maat direct
onder de bovenste blokken (foto + zeldzaamheid/nieuws/validatie), vóór het verhaal, plus een knop "Vergelijk prijzen"
bovenaan die ernaartoe springt. Desktop ongewijzigd. Witruimte blijft 30 px (vaste regel). ---- */
.amx-jump-prijzen { display: none; }
@media (max-width: 700px) {
.amx-product div.product > .amx-columns { order: 1; margin: 0 0 30px !important; }
.amx-product div.product > .amx-story,
.amx-product div.product > .amx-specs,
.amx-product div.product > .amx-samples { order: 2; }
.amx-jump-prijzen { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 18px; padding: 9px 16px; border-radius: 4px; background: #da0812; color: #fff !important; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none !important; }
.amx-jump-prijzen:hover, .amx-jump-prijzen:focus { background: #b8060e; color: #fff !important; }
}
/* ---- 1.0.194 (Ramon, 2026-10-18): "mobiele weergaven aanpassen: de tabel moet bijna geen witruimte hebben; plaats desnoods de bedragen eronder".
Prijsrange-grafiek op ≤ 600 px: geen ruimte meer links/rechts voor bedragen; de bedragen staan als één regel ONDER de balk.
Desktop ongewijzigd. ---- */
.amx-rg-mob { display: none; }
@media (max-width: 600px) {
.amx-rg { --rg-ml: 10px; --rg-mr: 10px; }
.amx-rg-lane { height: 38px; }
.amx-rg-bar, .amx-rg-dot { top: 12px; }
.amx-rg-lbl { display: none; }
.amx-rg-mob { display: block; position: absolute; top: 22px; white-space: nowrap; font-size: 12px; line-height: 1.2; color: #4b5563; }
.amx-rg-row { padding: 6px 0 2px; }
}
/* ---- 1.0.195 (Ramon, 2026-10-18): "Tekst gaat te veel door de sneakerfoto. Maak de fontgrootte kleiner en altijd maximaal 2 regels."
Productnaam boven/over de foto op mobiel (≤ 600 px): kleiner lettertype, nooit meer dan 2 regels (rest wordt afgekapt met …). ---- */
@media (max-width: 600px) {
body.amx-hdr-on .amx-product div.product > .amx-product-title,
.amx-product div.product > .amx-product-title { font-size: 17px !important; line-height: 1.3 !important; padding: 12px 74px 0 16px !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; max-height: calc(12px + 2.6em); }
body.amx-hdr-on .amx-product div.product > .amx-product-title::after { bottom: 0; }
}
/* ---- 1.0.196 (Ramon, 2026-10-18): "Laat hier op mobiel niet de logo's zien, maar wel een uitklapmogelijkheid met 'laat de shops zien'".
Validatie-blok: op ≤ 600 px is de lijst met shoplogo's ingeklapt achter een knop; desktop ongewijzigd. ---- */
.amx-shops-cb, .amx-shops-lbl { display: none; }
@media (max-width: 600px) {
.amx-val .amx-shops-cb { position: absolute; opacity: 0; pointer-events: none; display: block; }
.amx-val .amx-shops-lbl { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border: 2px solid #1b2a3a; border-radius: 4px; background: #fff; color: #1b2a3a; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.amx-val .amx-shops-lbl::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.amx-val .amx-shops-cb:checked + .amx-shops-lbl::after { transform: rotate(225deg); }
.amx-val .amx-shops-cb:focus-visible + .amx-shops-lbl { outline: 2px solid #da0812; outline-offset: 2px; }
.amx-val .amx-shops-hide, .amx-val .amx-shops-cb:checked + .amx-shops-lbl .amx-shops-show { display: none; }
.amx-val .amx-shops-cb:checked + .amx-shops-lbl .amx-shops-hide { display: inline; }
.amx-val .amx-shops-fold > .amx-checklist { display: none !important; margin-top: 16px; }
.amx-val .amx-shops-cb:checked ~ .amx-checklist { display: grid !important; }
}
/* ---- 1.0.197 (Ramon, 2026-10-18): kopregel "Prijzen per winkel" boven de prijstabel (mobiel en desktop). ---- */
.amx-offers h3.amx-offers-sub { margin: 26px 0 10px; padding: 0; font-size: 20px; line-height: 1.25; font-weight: 700; color: #1b2a3a; }
@media (max-width: 600px) { .amx-offers h3.amx-offers-sub { margin: 20px 0 8px; font-size: 18px; } }
/* ---- 1.0.198 (Ramon, 2026-10-18): volgorde op mobiel (≤ 700 px): "Hoe zeldzaam is hij?" → verhaal → specificaties → waardes
(Prijsvergelijking + Waarde per maat) → validatie. De rechterkolom (.summary) wordt hiervoor "uitgepakt" (display: contents),
zodat de blokken erin tussen de blokken eronder gesorteerd kunnen worden. Daarna: Mijn collectie, nieuws, gerelateerd.
Desktop ongewijzigd. ---- */
@media (max-width: 700px) {
.amx-product div.product > .summary.entry-summary { display: contents !important; }
.amx-product div.product > .summary.entry-summary > * { grid-column: 1; min-width: 0; order: 8; }
.amx-product div.product > .summary.entry-summary > .amx-rar:not(.amx-val):not(.amx-coll-add) { order: 1; }
.amx-product div.product > .amx-story { order: 2; }
.amx-product div.product > .amx-specs { order: 3; }
.amx-product div.product > .amx-samples { order: 4; }
.amx-product div.product > .amx-columns { order: 5; }
.amx-product div.product > .summary.entry-summary > .amx-val { order: 6; }
.amx-product div.product > .summary.entry-summary > .amx-coll-add { order: 7; }
}
/* ---- 1.0.199 (Ramon, 2026-10-18): "de tabel van Prijsvergelijking net zo strak als Prijzen per winkel". Op ≤ 600 px staat elke
winkel weer op één rij: logo links (kleiner), balk/stip + bedrag eronder rechts, zonder losse naamregel boven de balk.
Winkels zonder logo: naam klein in de linkerkolom. Desktop ongewijzigd. ---- */
@media (max-width: 600px) {
.amx-rg { --rg-shop: 52px; --rg-gap: 8px; --rg-ml: 6px; --rg-mr: 8px; margin-bottom: 14px; }
.amx-rg-legend { margin-bottom: 4px !important; }
.amx-rg-row { grid-template-columns: var(--rg-shop) 1fr; gap: 0 var(--rg-gap); align-items: center; padding: 3px 0; min-height: 0; }
.amx-rg-shop { justify-content: center; margin: 0; gap: 0; }
.amx-rg .amx-shop-logo { width: 36px !important; height: 36px !important; }
.amx-rg-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.amx-rg-text { font-size: 11.5px; line-height: 1.15; text-align: center; font-weight: 600; }
.amx-rg-lane { height: 34px; }
.amx-rg-bar, .amx-rg-dot { top: 10px; }
.amx-rg-mob { top: 19px; font-size: 11.5px; }
.amx-rg-axis { margin-top: 2px; height: 18px; }
}
/* ---- 1.0.202 (Ramon, 2026-10-18): goedgekeurd ontwerp. Prijsvergelijking (grafiek) over de volle breedte; daaronder links
"Prijzen per winkel" en rechts "Gemiddelde waarde per maat". Op ≤ 900 px onder elkaar. ---- */
.amx-columns.amx-columns-2 > .amx-offers { grid-column: 1 / -1; }
.amx-offers-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 30px 48px; align-items: start; }
.amx-offers-split > * { min-width: 0; }
.amx-offers-side > .amx-block { margin: 0 !important; }
.amx-offers-side > .amx-block > h2:first-child { margin-top: 0 !important; }
.amx-offers-side .amx-table th, .amx-offers-side .amx-table td { padding-left: 5px !important; padding-right: 5px !important; font-size: 14px; }
@media (max-width: 900px) { .amx-offers-split { grid-template-columns: minmax(0, 1fr); } }