/* Common layout: use the background image as positioning reference. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #fff; }
.catalog { position: relative; width: 100%; max-width: 768px; margin: 0 auto; }
.catalog__image { display: block; width: 100%; height: auto; }
.catalog__links { position: absolute; inset: 0; }
.catalog__link { position: absolute; display: block; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.catalog__link:focus-visible { outline: 3px solid #2589bc; outline-offset: -3px; }

/* Top page: nine icon taps, coordinates as % of full background */
.catalog--top .catalog__link { width: 25%; height: 19%; }
.catalog__link--01 { left: 6.5%; top: 7%; }
.catalog__link--02 { left: 36.5%; top: 7%; }
.catalog__link--03 { left: 66.5%; top: 7%; }
.catalog__link--04 { left: 6.5%; top: 41%; }
.catalog__link--05 { left: 36.5%; top: 41%; }
.catalog__link--06 { left: 66.5%; top: 41%; }
.catalog__link--07 { left: 6.5%; top: 65%; }
.catalog__link--08 { left: 36.5%; top: 65%; }
.catalog__link--09 { left: 66.5%; top: 65%; }

/* Detail page: rectangular product buttons and bottom-right home logo. */
.catalog--detail .catalog__link--pdf { left: 12.5%; width: 75%; height: 9.2%; }
/* Three buttons (page01) */
.catalog--three .catalog__link--pdf01 { top: 35.5%; }
.catalog--three .catalog__link--pdf02 { top: 50.3%; }
.catalog--three .catalog__link--pdf03 { top: 65.1%; }
/* Two buttons (pages 02-04, 06-09) */
.catalog--two .catalog__link--pdf01 { top: 41.8%; }
.catalog--two .catalog__link--pdf02 { top: 60.0%; }
/* Four buttons (page05) */
.catalog--four .catalog__link--pdf01 { top: 34.9%; }
.catalog--four .catalog__link--pdf02 { top: 48.8%; }
.catalog--four .catalog__link--pdf03 { top: 62.7%; }
.catalog--four .catalog__link--pdf04 { top: 76.6%; }
/* Bottom right: PRODUCT CATALOG / logo area */
.catalog__link--home { left: 50%; top: 89.4%; width: 42%; height: 5.7%; }

/* To inspect hit areas temporarily, add ?debug=1 to the page URL. */
body.debug .catalog__link { outline: 2px solid rgba(220, 0, 0, .9); background: rgba(255, 0, 0, .13); }
