/* Genki 1.5.2: consistent reading size, broad editorial imagery and clear enquiry flow. */
:root{--genki-copy-size:17px;--genki-copy-leading:1.68}

/* Keep the page background and Japanese motifs visible between transparent sections. */
body:after{display:block!important;content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:url('assets/genki-watermark.svg') center center/min(1100px,90vw) auto no-repeat;opacity:.16;mix-blend-mode:screen}
#header,#main,#footer{position:relative;z-index:1}
#main{isolation:isolate}
#main:before{display:block!important;background-image:url('assets/cherry-tree-full.webp');background-position:center center;background-size:min(100vw,1450px) auto;background-repeat:no-repeat;opacity:.27}

/* Use the same readable body scale throughout editorial sections. */
#main p:not(.eyebrow){font-size:var(--genki-copy-size);line-height:var(--genki-copy-leading);overflow-wrap:anywhere}
#main .benefit p,#main .split p,#main .delivery-showcase-copy p:not(.eyebrow),#main .delivery-location-copy>p:not(.eyebrow),#main .brand-story-copy p:not(.eyebrow),#main .partners-intro,#main .partner-card-content p:not(.eyebrow),#main .contact-intro{font-size:var(--genki-copy-size)!important;line-height:var(--genki-copy-leading)!important}
#main .benefit h3{font-size:clamp(19px,1.45vw,23px);line-height:1.28}
#main .section-heading h2,#main .delivery-route-heading h2{line-height:1.17}
#main .product h3{font-size:18px;line-height:1.45}
#main .product .product-category,#main .product small{font-size:13px;line-height:1.5}
#main .wish-note{font-size:15px;line-height:1.6}
#main .product-tools label,#main label{font-size:15px;line-height:1.4}

/* Broaden editorial photos and remove the empty side gutters on delivery/about pages. */
#main .wrap{width:min(1480px,calc(100% - 72px))}
#main .about-hero .wrap.split{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,80px)}
#main .about-hero .photo{height:clamp(500px,46vw,700px);border-radius:22px}
#main .about-hero .photo>.crop{width:100%;height:100%;max-width:none}
#main .about-hero p:not(.eyebrow){font-size:17px;line-height:1.72;max-width:680px}
#main .about-hero h1{font-size:clamp(42px,4.5vw,64px);line-height:1.04;max-width:700px}
#main .delivery-showcase{width:100%;max-width:none;min-height:clamp(560px,48vw,760px);padding:clamp(32px,5vw,76px) max(36px,calc((100% - 1480px)/2));grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,78px)}
#main .delivery-showcase-art{position:relative;inset:auto;grid-column:2;grid-row:1;display:block;width:100%;height:auto;aspect-ratio:2/1;min-height:0;align-self:center;border-radius:22px;overflow:hidden;box-shadow:0 22px 55px #10182070}
#main .delivery-showcase-art>.crop{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center bottom}
#main .delivery-showcase-inner{grid-column:1;grid-row:1;width:100%;max-width:none;margin:0;align-self:center}
#main .delivery-showcase-copy{width:100%;max-width:650px;padding:20px 0}
#main .delivery-showcase-copy h1{font-size:clamp(44px,4.7vw,66px);line-height:1.04;max-width:700px}
#main .ship-story-grid{grid-template-columns:minmax(0,.64fr) minmax(0,1.36fr);gap:clamp(28px,4vw,64px)}
#main .ship-scene{min-height:clamp(340px,32vw,540px);border-radius:22px;overflow:hidden}
#main .ship-scene>img,#main .ship-scene video{width:100%;height:100%;min-height:inherit;object-fit:cover}

/* Direct Google map and more room for the delivery location copy. */
#main .delivery-location-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,3vw,44px);align-items:stretch}
#main .delivery-location-copy{min-height:330px;padding:18px 10px;display:flex;flex-direction:column;justify-content:center}
#main .delivery-location-copy h2{font-size:clamp(34px,3.15vw,48px);line-height:1.08}
#main .delivery-location-copy>p:not(.eyebrow){max-width:none;font-size:16px;line-height:1.68}
#main .delivery-map-visual{min-height:380px;overflow:hidden;border-radius:16px}
#main .delivery-google-map{display:block;width:100%;height:100%;min-height:380px;border:0}
@media(max-width:850px){#main .delivery-location-grid{grid-template-columns:1fr;gap:18px}#main .delivery-location-copy{min-height:0;padding:10px 0 18px}#main .delivery-location-copy>p:not(.eyebrow){font-size:16px}#main .delivery-map-visual,#main .delivery-google-map{min-height:340px}}
@media(max-width:600px){#main .delivery-location-copy h2{font-size:clamp(30px,8vw,38px)}#main .delivery-location-copy>p:not(.eyebrow){font-size:15px;line-height:1.62}#main .delivery-map-visual,#main .delivery-google-map{min-height:300px}}

/* Sticky navigation keeps all primary actions available while scrolling. */
#header{position:sticky;top:0;z-index:1000}
body.admin-bar #header{top:32px}
.header-inner{width:min(1500px,calc(100% - 56px));min-height:86px;display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(7px,1vw,14px)}
.header-inner>.logo{width:108px;flex:0 0 108px}
.header-inner>.nav{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:5px;margin-left:auto}
.header-inner>.nav a,.header-inner>.nav button{padding:8px clamp(9px,.85vw,14px)!important;font-size:13px;white-space:nowrap}
.header-inner>.lang,.header-inner>.wish-nav,.header-inner>.header-cta{flex:0 0 auto}
.header-inner>.wish-nav{order:2;font-size:13px!important;padding:9px 13px!important;white-space:nowrap}
.header-inner>.wish-nav:before{content:'Merkliste'!important;display:inline!important;font-size:12px}
.header-inner>.header-cta{order:3;display:inline-flex!important;font-size:13px;padding:11px 16px;white-space:nowrap}
.header-inner>.lang{order:1}
@media(max-width:1350px) and (min-width:851px){.header-inner{gap:6px}.header-inner>.logo{width:94px;flex-basis:94px}.header-inner>.nav{gap:2px}.header-inner>.nav a,.header-inner>.nav button{font-size:12px;padding:7px 8px!important}.header-inner>.wish-nav{font-size:12px!important;padding:8px 9px!important}.header-inner>.header-cta{font-size:12px;padding:9px 11px}}
@media(max-width:1100px) and (min-width:851px){.header-inner{gap:5px}.header-inner>.logo{width:82px;flex-basis:82px}.header-inner>.nav{margin-left:0;gap:0}.header-inner>.nav a,.header-inner>.nav button{font-size:11px;padding:5px 5px!important}.header-inner>.wish-nav{font-size:11px!important;padding:7px 8px!important}.header-inner>.wish-nav:before{font-size:10px}.header-inner>.header-cta{font-size:11px;padding:8px 9px;gap:7px}.header-inner>.header-cta:after{font-size:15px}}

/* Add balanced, full-height sakura trees to the enquiry page side gutters. */
#main .wish-page{position:relative;isolation:isolate;overflow:hidden;min-height:74vh;padding:clamp(54px,6vw,90px) 0 110px;background:transparent!important}
#main .wish-page:before,#main .wish-page:after{content:"";position:absolute;z-index:0;bottom:-8px;width:clamp(300px,27vw,560px);height:min(78%,680px);background:url('assets/ink-cherry-tree.webp') center bottom/contain no-repeat;opacity:.58;pointer-events:none;filter:drop-shadow(0 8px 22px #10182055)}
#main .wish-page:before{left:0;background-position:left bottom}
#main .wish-page:after{right:0;transform:scaleX(-1);background-position:left bottom}
#main .wish-page>.wrap{position:relative;z-index:1;width:min(980px,calc(100% - 96px))}
#main .wish-page> .wrap>p:not(.eyebrow){max-width:820px;font-size:18px;line-height:1.68}
#main .wish-process{max-width:900px;margin:24px 0 28px;padding:22px 26px;background:#19232dcc;border:1px solid #ffffff2c;border-radius:16px;box-shadow:0 14px 34px #10182038}
#main .wish-process h2{font-size:23px;margin:0 0 12px}
#main .wish-process ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding-left:22px}
#main .wish-process li{padding-left:3px;color:#f4f6f8;font-size:16px;line-height:1.55}
#main .wish-process>p{margin:14px 0 0;color:#d7dfe4;font-size:15px!important}
#main .wish-list{max-width:1120px;margin:28px 0}
#main .wish-row{grid-template-columns:72px minmax(0,1fr) 100px 44px;min-height:96px;gap:20px;padding:14px 18px}
#main .wish-row img{width:68px;height:68px}
#main .wish-row strong{font-size:17px;line-height:1.4;overflow-wrap:anywhere}
#main .wish-row small{font-size:14px;line-height:1.45}
#main .wish-row label{font-size:13px;line-height:1.35}
#main .wish-row input{width:88px;height:42px;font-size:16px}
#main .wish-remove{display:grid;place-items:center;width:42px;height:42px;min-width:42px;padding:0;margin:0;line-height:1;font-family:Arial,sans-serif;font-size:25px;font-weight:400;text-align:center;vertical-align:middle;transform:none}
#main .wish-actions .btn{min-height:48px}

/* Let the footer sit on the concrete background with sakura visible at both sides. */
#footer{isolation:isolate;overflow:visible}
#footer:before,#footer:after{content:"";position:absolute;z-index:0;bottom:0;width:clamp(300px,27vw,560px);height:clamp(260px,32vw,520px);background:url('assets/ink-cherry-tree.webp') left bottom/contain no-repeat;opacity:.55;pointer-events:none;filter:drop-shadow(0 8px 20px #10182055)}
#footer:before{left:0}
#footer:after{right:0;transform:scaleX(-1)}
#footer .site-footer{position:relative;z-index:1;width:min(1120px,calc(100% - 48px))}

@media(max-width:850px){
  #main .wrap{width:min(100% - 40px,760px)}
  #main .about-hero .wrap.split{grid-template-columns:1fr;gap:26px}
  #main .about-hero .photo{height:auto;aspect-ratio:1.45}
  #main .delivery-showcase{width:100%;min-height:0;display:flex;flex-direction:column;gap:0;padding:0 20px 32px}
  #main .delivery-showcase-art{order:0;width:calc(100% + 40px);height:auto;aspect-ratio:2/1;margin:0 -20px 24px;border-radius:0}
  #main .delivery-showcase-inner{order:1;width:100%}
  #main .delivery-showcase-copy{padding:0 0 14px}
  #main .delivery-showcase-copy h1{font-size:clamp(38px,7vw,54px)}
  #main .ship-story-grid{grid-template-columns:1fr}
  #main .ship-scene{min-height:340px}
  .header-inner{flex-wrap:wrap;min-height:80px;padding-block:8px}
  .header-inner>.logo{width:94px;flex-basis:94px}
  .header-inner>.mobile-menu{order:4;margin-left:auto}
  .header-inner>.nav{order:5;flex-basis:100%}
  .header-inner>.header-cta{margin-left:0}
  #main .wish-process ol{grid-template-columns:1fr;gap:10px}
  #main .wish-page:before,#main .wish-page:after{width:30vw;opacity:.4}
}
@media(max-width:600px){
  :root{--genki-copy-size:16px;--genki-copy-leading:1.65}
  #main .wrap{width:calc(100% - 36px)}
  #main .about-hero .photo{aspect-ratio:1.2}
  #main .about-hero h1{font-size:clamp(36px,10vw,48px)}
  #main .delivery-showcase{padding:0 18px 24px}
  #main .delivery-showcase-art{width:calc(100% + 36px);aspect-ratio:2/1;margin:0 -18px 20px}
  #main .delivery-showcase-copy h1{font-size:clamp(34px,9vw,42px)}
  #main .ship-scene{min-height:250px}
  .header-inner{width:calc(100% - 28px);gap:7px}
  .header-inner>.logo{width:80px;flex-basis:80px}
  .header-inner>.lang{padding:5px 8px}
  .header-inner>.wish-nav{font-size:0!important;padding:8px!important}
  .header-inner>.wish-nav:before{content:'Merkliste'!important;display:inline!important;font-size:11px}
  .header-inner>.header-cta{font-size:11px;padding:9px 10px;gap:6px}
  .header-inner>.header-cta:after{font-size:14px}
  #main .wish-page{padding:34px 0 60px}
  #main .wish-page>.wrap{width:calc(100% - 30px)}
  #main .wish-page:before,#main .wish-page:after{width:34vw;height:42%;opacity:.32}
  #main .wish-page> .wrap>p:not(.eyebrow){font-size:16px}
  #main .wish-process{padding:18px;margin:18px 0}
  #main .wish-process h2{font-size:20px}
  #main .wish-process li{font-size:15px}
  #main .wish-row{grid-template-columns:48px minmax(0,1fr) 60px 36px;gap:7px;min-height:78px;padding:9px}
  #main .wish-row img{width:46px;height:46px}
  #main .wish-row strong{font-size:14px}
  #main .wish-row small{font-size:12px}
  #main .wish-row input{width:56px;height:38px;font-size:15px}
  #main .wish-row label{font-size:11px}
  #main .wish-remove{width:34px;height:34px;min-width:34px;font-size:22px}
  #main .wish-actions{gap:12px}
}
@media(max-width:782px){body.admin-bar #header{top:46px}}


/* 2.11.26: match the supplied desktop and mobile delivery-card copy. */
#main .delivery-benefit-mobile{display:none}
@media(max-width:850px){#main .delivery-benefit-desktop{display:none}#main .delivery-benefit-mobile{display:inline}}


/* 211026 refinement from the user's marked screenshots: cleaner homepage cards, wider delivery copy, aligned image panels, and a real contact map. */
#main .welcome-copy .facts{gap:clamp(18px,2vw,32px);padding-block:22px 24px}
#main .welcome-copy .fact{min-height:50px;gap:0;align-items:center;font-size:14px;line-height:1.45}
#main .welcome-copy .fact>.icon{display:none!important}
#main .welcome-benefits .benefit{min-height:166px;padding:24px 22px;justify-content:center}
#main .welcome-benefits .benefit>.icon{display:none!important}
#main .welcome-benefits .benefit h3{min-height:2.4em;display:flex;align-items:flex-end;justify-content:center;margin:0 0 10px}
#main .welcome-benefits .benefit p{max-width:290px;margin:0 auto}
#main .promos{align-items:stretch}
#main .promo{height:100%;align-items:center}
#main .delivery-location-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,3.2vw,48px);align-items:stretch}
#main .delivery-location-photo{height:auto;min-height:340px;align-self:stretch}
#main .delivery-location-photo>.crop{height:100%;min-height:340px;object-fit:cover;object-position:center}
#main .delivery-location-copy{min-height:340px;padding:18px 0;justify-content:center}
#main .delivery-location-copy .eyebrow,#main .delivery-location-copy h2,#main .delivery-location-copy>p:not(.eyebrow){max-width:none}
#main .delivery-location-copy h2{max-width:22ch;font-size:clamp(35px,3.2vw,48px);line-height:1.08}
#main .delivery-location-copy>p:not(.eyebrow){font-size:16px;line-height:1.65}
#main .ship-story-grid{align-items:center}
#main .ship-story-copy{align-self:center}
#main .ship-scene{align-self:stretch}
#main .ship-scene>img,#main .ship-scene video{display:block;object-fit:cover;object-position:center;height:100%}
#main .map.contact-map{grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);align-items:stretch}
#main .map.contact-map>.contact-map-art{height:auto;min-height:360px;overflow:hidden;border-radius:14px;background:#e9edef!important;padding:0!important}
#main .contact-map-art iframe{display:block;width:100%;height:100%;min-height:360px;border:0}
@media(max-width:850px){
 #main .delivery-location-grid{grid-template-columns:1fr;gap:16px}
 #main .delivery-location-photo,#main .delivery-location-photo>.crop{height:clamp(240px,58vw,390px);min-height:0}
 #main .delivery-location-copy{min-height:0;padding:8px 0 18px}
 #main .delivery-location-copy h2{max-width:26ch}
 #main .map.contact-map{grid-template-columns:1fr;gap:14px}
 #main .map.contact-map>.contact-map-art,#main .contact-map-art iframe{min-height:320px;height:320px}
}
@media(max-width:600px){
 #main .welcome-copy .facts{gap:12px 18px;padding-top:18px}
 #main .welcome-copy .fact{min-height:42px;font-size:12px}
 #main .welcome-benefits .benefit{min-height:145px;padding:18px 14px}
 #main .welcome-benefits .benefit h3{font-size:16px;min-height:2.25em}
 #main .delivery-location-copy h2{max-width:none;font-size:clamp(30px,8vw,38px)}
 #main .delivery-location-copy>p:not(.eyebrow){font-size:15px;line-height:1.62}
 #main .map.contact-map>.contact-map-art,#main .contact-map-art iframe{min-height:280px;height:280px}
}
