/* My Japan Friend · v52 visual layout. Existing search and checkout logic are not changed. */
body.marketplace{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif;color:#193956}
.market-header{background:#fff;box-shadow:0 2px 12px rgba(46,89,132,.04)}
.market-header .header-inner{max-width:1400px;margin:auto;display:flex;align-items:center;gap:17px;justify-content:space-between;min-height:78px}
.market-header .header-inner>.search-box{display:none}
.market-header .header-guide{display:none}
.v52-topnav{display:flex;align-items:center;gap:clamp(8px,1.3vw,25px);font-size:12px;font-weight:700;white-space:nowrap;margin-left:auto}
.v52-topnav a{color:#264967;text-decoration:none}.v52-topnav a:hover{color:#1679ce}
.market-header .languages{display:flex;gap:5px;padding:4px;border:1px solid #e2eaf2;border-radius:40px;margin-left:5px}
.market-header .languages a{padding:7px 10px;border-radius:25px;text-decoration:none}
.market-header .languages a[aria-current=page]{background:#244865;color:white}
.market-header .header-request{white-space:nowrap;padding:10px 11px;border-radius:9px}
.marketplace .container{max-width:1400px;margin:auto}
.v52-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:8px;min-height:325px;margin:4px 0 24px;padding:32px 28px 87px;border-radius:0 0 22px 22px;background:linear-gradient(110deg,#f5fbff 5%,#eaf6ff 75%,#f3faff);overflow:hidden;border:1px solid #e6f1fc}
.v52-hero-copy{position:relative;z-index:2;min-width:0}
.v52-eyebrow{font-size:10px;color:#217ac3;font-weight:800;letter-spacing:.13em}
.v52-hero h1{font-size:clamp(25px,3.1vw,43px);letter-spacing:-.045em;color:#173a60;line-height:1.22;margin:12px 0 17px}
.v52-hero h1 em{font-style:normal;color:#1679d6}
.v52-hero p{font-size:14px;line-height:1.8;color:#456582;margin:0}
.v52-hero-visual{align-self:stretch;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;border-radius:20px}
.v52-hero-visual img{width:100%;max-width:675px;height:auto;max-height:238px;object-fit:contain;object-position:right center;mix-blend-mode:multiply}
.v52-hero-search{position:absolute;z-index:3;bottom:17px;left:27px;right:27px;border:1px solid #d6e7fa;background:#fff;box-shadow:0 8px 19px rgba(24,91,155,.08);border-radius:14px;padding:9px 11px}
.v52-search-wrap{display:flex;align-items:center;gap:10px}
.v52-hero .search-box{position:relative;flex:1;display:flex;min-width:0;max-width:none;width:auto;height:44px;order:initial;margin:0!important;border:1px solid #e5edf5;border-radius:10px;background:#fafcfe}
.v52-hero .search-box input{padding:9px 16px!important;font-size:14px;min-width:0;flex:1}
.v52-hero .search-box button{display:none}
.v52-search-button{border:0;background:#137bdf;color:#fff;border-radius:10px;padding:0 20px;min-height:44px;font-size:13px;font-weight:750;white-space:nowrap;cursor:pointer}
.v52-search-button:hover{background:#0963b8}
.v52-detail-link{border:1px solid #d6e4ef;padding:12px 14px;border-radius:10px;text-decoration:none;color:#294d6f;white-space:nowrap;font-size:12px;font-weight:700}
#browseView .search-help{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Key transformation: integrated illustrated guide like the approved visual */
.mjf-how{margin:15px 0 27px;padding:21px;border-color:#d4ebff;background:#ecf8ff;border-radius:18px;box-shadow:none}
.mjf-how-header{justify-content:flex-start;margin-bottom:15px}
.mjf-how-header>div{max-width:800px}
.mjf-how-header h2{font-size:26px;color:#174876}.mjf-how-header p{font-size:13px}
.mjf-how-action{margin-left:auto;background:#1478d1;border-radius:10px}.mjf-how-action:hover{background:#0a5caa}
.mjf-how-steps{gap:12px}
.mjf-how-step{background:#fff;border-radius:16px;box-shadow:0 3px 11px #17598808}
.mjf-how-art{height:172px;background:linear-gradient(#fff,#f3faff)!important}
.mjf-how-art img{height:166px;max-width:100%}
.mjf-how-copy{min-height:116px;padding:10px 14px 17px}
.mjf-how-num{background:#257ede;color:#fff;border-radius:30px;width:29px;height:29px}
.mjf-how-policies{border:1px solid #d3e7f7;background:#fff;border-radius:13px}
.mjf-how-note{font-size:11px}
/* Make shops readable and recognisable without burying search results */
#marketplaces{background:#fff;border:none;padding:0 0 11px;margin:0 0 18px}
#marketplaces .shop-hub-heading h2{font-size:23px;color:#1b446b}
#marketplaces .shop-hub-heading>a{font-weight:700;color:#1973b9}
#marketplaces .store-links{gap:9px}
#marketplaces .store-tile{border-radius:13px}
#marketplaces .store-links .store-link{background:#fff}
#marketplaces .store-logo img.logo-loaded{opacity:1!important}
#marketplaces .store-group+.store-group{margin-top:10px}
#marketplaces .store-group-heading{margin-bottom:7px}
#marketplaces .store-search-context{font-size:10px;margin-top:12px}
.v52-category-wrap{border-top:1px solid #edf2f6;margin:8px 0 24px}
.v52-category-wrap .categories{display:flex;position:relative;overflow-x:auto;padding:8px 0 0;gap:17px;justify-content:flex-start;border:0}
.v52-category-wrap .category-tab{white-space:nowrap}
.browse-heading h2#resultsHeading{font-size:23px;line-height:1.4;letter-spacing:-.025em;color:#193956}
#translationStatus{font-size:12px;border-radius:9px;background:#f6f8fa!important;color:#617389!important;padding:10px 13px!important}
#finderResults.product-grid{gap:20px 14px}
.product-card{border:1px solid #edf2f5;border-radius:12px;padding:10px;background:white}
.product-card h3{font-size:12px!important;line-height:1.5;max-height:4.5em;overflow:hidden!important}
.product-card .product-photo{background:#f8fafc;border-radius:10px}
.product-card .card-buy{border-radius:8px}
@media(max-width:1050px){.v52-topnav{gap:8px;font-size:11px}.market-header .header-inner{gap:10px}.v52-hero{min-height:310px}.mjf-how-art{height:141px}.mjf-how-art img{height:136px}}
@media(max-width:800px){.market-header .header-inner{padding:12px 16px;min-height:67px}.v52-topnav{display:none}.market-header .header-request{margin-left:auto}.market-header .languages{margin-left:0}.v52-hero{padding:24px 19px 88px;min-height:290px;gap:0}.v52-hero-visual img{max-height:170px}.v52-hero h1{font-size:27px}.v52-hero p{font-size:12px}.mjf-how-header h2{font-size:23px}.mjf-how-art,.mjf-how-art img{height:142px}}
@media(max-width:580px){.market-header .brand small{display:none}.market-header .header-request{display:none}.v52-hero{display:block;min-height:305px;padding:17px 14px 83px;margin:0 0 17px}.v52-hero h1{font-size:26px;margin:7px 0}.v52-hero p{font-size:11px;max-width:75%}.v52-hero-visual{position:absolute;z-index:1;right:0;top:35px;width:60%;height:154px;opacity:.8}.v52-hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center}.v52-hero-copy{position:relative;z-index:2}.v52-eyebrow{font-size:8px}.v52-hero-search{left:9px;right:9px;bottom:11px;padding:7px}.v52-search-wrap{gap:5px}.v52-hero .search-box{height:40px}.v52-hero .search-box input{font-size:11px!important;padding:6px 8px!important}.v52-search-button{min-height:40px;padding:0 11px;font-size:11px}.v52-detail-link{display:none}.mjf-how{padding:13px 10px}.mjf-how-header{display:flex;align-items:flex-start}.mjf-how-header h2{font-size:20px}.mjf-how-header p{font-size:11px}.mjf-how-action{font-size:10px;padding:7px;min-height:35px}.mjf-how-steps{grid-auto-columns:minmax(205px,75%)}.mjf-how-art,.mjf-how-art img{height:137px}.mjf-how-copy{min-height:110px}#marketplaces .shop-hub-heading h2{font-size:19px}.browse-heading h2#resultsHeading{font-size:20px}.product-card{padding:6px}#finderResults.product-grid{gap:15px 8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Keep illustration and headings separate on narrow screens: no text/image overlap. */
@media(max-width:580px){
 .v52-hero{min-height:342px;padding-bottom:81px}
 .v52-hero-copy{max-width:64%;width:64%}
 .v52-hero h1{font-size:23px;line-height:1.22;letter-spacing:-.055em}
 .v52-hero p{max-width:100%;font-size:10.5px;line-height:1.55}
 .v52-hero-visual{width:41%;height:160px;top:93px;right:3px;opacity:1;z-index:1;border-radius:12px}
 .v52-hero-visual img{object-fit:cover;object-position:55% center}
 .mjf-how-header h2{max-width:235px}
}
@media(max-width:580px){
 .v52-hero-copy{max-width:61%;width:61%}
 .v52-hero h1{font-size:22px}
 .v52-hero-visual{right:0;width:38%}
 .mjf-how-header{display:flex;flex-direction:column;gap:8px}
 .mjf-how-header h2{max-width:none;font-size:20px}
 .mjf-how-action{margin-left:0}
}