/*
Theme Name: VENTION JAPAN
Version: 0.1.3
Requires PHP: 8.3
*/
:root{--ink:#151515;--accent:#00a7d8;--line:#e4e4e4}*{box-sizing:border-box}body{margin:0;color:var(--ink);font:15px/1.8 Arial,'Noto Sans JP',sans-serif;background:white}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto}header{border-bottom:1px solid var(--line);background:#fff}header .wrap{display:flex;align-items:center;gap:36px;min-height:90px}.wrap{max-width:1280px;margin:auto;padding:0 32px}.brand{font-size:34px;font-weight:900;letter-spacing:2px;color:var(--accent)}nav{display:flex;gap:24px;align-items:center}form.search{margin-left:auto;display:flex;border-bottom:1px solid #222}input,select,button,textarea{font:inherit;padding:8px;max-width:100%}form.search input{border:0;width:160px}button{cursor:pointer;background:#222;color:#fff;border:0}main{min-height:65vh;padding:44px 0 80px}h1{font-size:28px;line-height:1.5}h2{font-size:25px;letter-spacing:2px}.hero{background:#101319;color:white;min-height:400px;display:flex;align-items:center;overflow:hidden}.hero img{display:block;width:100%;object-fit:cover}.hero-text{padding:60px 8%;font-size:36px;letter-spacing:3px}.layout{display:grid;grid-template-columns:215px 1fr;gap:40px}.categories{padding:0;list-style:none}.categories li{border-bottom:1px solid var(--line);padding:9px 0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}.card{border-bottom:1px solid var(--line);padding-bottom:20px}.card img{width:100%;aspect-ratio:1;object-fit:contain}.card h2{font-size:14px;letter-spacing:0;line-height:1.8;font-weight:500}.price{font-weight:bold}.detail{display:grid;grid-template-columns:1fr 1fr;gap:48px}.thumbs{display:flex;gap:8px;flex-wrap:wrap}.thumbs button{background:white;border:1px solid var(--line);width:74px;padding:3px}.description{margin-top:48px;overflow-wrap:anywhere}.description img{display:block;margin:auto}.description table{width:100%;border-collapse:collapse}.description td{border:1px solid var(--line);padding:8px}.vention-video{aspect-ratio:16/9}.vention-video iframe{width:100%;height:100%;border:0}footer{background:#171717;color:white;padding:48px 0}footer nav{flex-wrap:wrap;font-size:13px}.notice{padding:18px;background:#f4f4f4}.pagination{padding:30px 0}.pagination a,.pagination span{padding:8px}.skip{position:absolute;top:-100px}.skip:focus{top:0;background:white;z-index:10}.option-table{width:100%;border-collapse:collapse}.option-table td,.option-table th{border-bottom:1px solid var(--line);padding:8px;text-align:left}
@media(max-width:800px){.wrap{padding:0 20px}header .wrap{flex-wrap:wrap;gap:12px;padding-top:14px;padding-bottom:14px}.brand{font-size:28px}nav{gap:14px;font-size:13px}form.search{width:100%;margin:0}form.search input{width:100%}.layout,.detail{grid-template-columns:1fr;gap:24px}.categories{display:flex;overflow:auto;gap:18px}.categories li{white-space:nowrap}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}h1{font-size:22px}.hero{min-height:200px}.hero-text{font-size:24px}main{padding-top:26px}}

header .wrap{justify-content:center;flex-wrap:wrap;padding-top:18px;padding-bottom:14px}.brand img{width:300px;max-height:90px;object-fit:contain}header nav{justify-content:center}header .brand{width:100%;text-align:center}.hero{background:#e2f4fa;min-height:0}.hero img{width:100%;height:auto}h1,h2{text-align:center}.grid h2{text-align:left}footer .brand{display:block;margin-bottom:24px}.home .layout{grid-template-columns:1fr}.home .layout aside{display:none}

header .wrap{gap:8px 24px;padding-top:8px;padding-bottom:8px}.brand img{max-height:72px;width:280px}.detail>section,.layout>section{min-width:0}.option-table{overflow-wrap:anywhere}.description{overflow-x:auto}

.hero-pager{justify-content:center;gap:8px;padding:15px}.hero-pager button{background:#eee;color:#222;border-radius:50%;width:30px;height:30px;padding:0}

/* Allow the category scroller to shrink inside the mobile grid. */
.layout>aside{min-width:0}.categories{max-width:100%}

/* Keep the catalogue's inquiry form readable on desktop and phones. */
.page #main form{max-width:760px;margin:32px auto;padding:32px;border:1px solid var(--line);border-radius:4px;background:#fafcfd}
.page #main form p{margin:0 0 24px}.page #main form label{display:block;font-weight:600}
.page #main form input:not([type=checkbox]):not([type=hidden]),.page #main form textarea{display:block;width:100%;margin-top:8px;border:1px solid #aab5bc;border-radius:3px;background:#fff;font-weight:400;padding:12px}
.page #main form textarea{min-height:200px;resize:vertical}.page #main form input[type=checkbox]{width:18px;height:18px;vertical-align:middle;margin-right:8px;accent-color:#007ca3}
.page #main form button{min-height:48px;min-width:180px;padding:12px 32px;background:#007ca3;border-radius:3px}
.page #main form :is(input,textarea,button):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.page #main [role=status],.page #main [role=alert]{max-width:760px;margin:24px auto;padding:16px 20px;border-left:4px solid #007ca3;background:#eaf7fb}
@media(max-width:600px){.page #main form{padding:20px;margin:24px 0}.page #main form button{width:100%}}
.subcategories{flex-wrap:wrap;gap:10px;margin:0 0 28px}.subcategories a{padding:8px 14px;border:1px solid var(--line);border-radius:3px}.subcategories a:hover{border-color:var(--accent)}